コイブミのフォーム下の「メッセージは〇文字まで……」のテキストの変更方法

個人サイト向けひとことフォーム コイブミ

ガタガタです。いつもありがとうございます!

プログラムについてのお問い合わせフォームより、以下のような問い合わせがありました。

コイブミで、「メッセージは〇文字まで、同一IPアドレスからの送信は一日〇回まで」とある部分を、「メッセージは〇文字まで」と書き換えたところ、メッセージの制限文字数が表示されなくなりました。このテキストを変更する方法を教えてください。

恐らく同様のカスタマイズをしたい方がいらっしゃると思いますので、このメッセージのカスタマイズ方法をここで公開します。参考になれば幸いです。

メッセージ表示の仕組みについて

このメッセージに該当する部分は、HTMLタグも含めると、デフォルトでは

<p class="attention">メッセージは<span id="koibumi_limitMessage"></span>文字まで、同一IPアドレスからの送信は一日<span id="koibumi_limitIP"></span>回まで</p>

となっています。

javascriptで書かれたiine.jsは、このテキスト中のspanタグをidで認識し、処理を加えます。

具体的には、<span id="koibumi_limitMessage"></span>の部分にコイブミで設定した文字数制限を、<span id="koibumi_limitIP"></span>の部分に同一IPアドレスの投稿制限を自動で入れてくれる仕組みになっています。

質問主さんはおそらく、<span id="koibumi_limitIP"></span>の部分を削除されたと思いますが、これだとjavascriptが「id="koibumi_limitIP"」の割り当てられた要素を見つけられないためエラーになり、処理が途中で止まってしまいます。だから投稿制限数が表示されなかったというわけです。

対処法

まず、HTMLのフォーム下テキスト部分を次のように変更します。

<p class="attention">メッセージは<span id="koibumi_limitMessage"></span>文字まで<span id="koibumi_limitIP"></span></p>

IPアドレス制限についての文章は消しますが、エラーを避けるため<span id="koibumi_limitIP"></span>の部分だけは残しておきます。

このままだと、<span id="koibumi_limitIP"></span>の部分にIP制限の数字だけが表示されてしまい、訪問者の方からみれば、注意書きの文末に謎の数字のゴミがついているような状況になってしまいます。

なので、CSSでこのspanタグだけを非表示にします

span#koibumi_limitIP {
visibility: hidden;
}

↑このCSSを、koibumi.cssの末尾など、適切な場所に追記してください。

これで、「id="koibumi_limitIP"」は存在するが、訪問者からは見えないような状態になり、エラーを避けながらも投稿制限数を非表示にすることができます。

テキスト全文を非表示にしたい場合は、

div#koibumi_wrap p.attention {
visibility: hidden;
}

とCSSに追記すれば、エラーを出さずにメッセージ全文を非表示にすることができます。

ぜひお試しください。