コメント投稿ボタンの上下に注意書きや挨拶を表示する方法

コメント投稿ボタンの上下に注意書きや挨拶を表示する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

アメブロのコメント投稿ボタンの上下に、簡単な注意書きや挨拶文などを表示する方法をご紹介します。

コメント投稿ボタンの上下に注意書きや挨拶を表示する方法

僕もそうなのですが、コメントを承認制にしている場合などに、コメント投稿ボタンのすぐ近くに注意書きを表示するのに便利です。

何も書いてないと、読者さんがコメントをくれた時すぐにコメントが表示されないので、

「コメント投稿に失敗した」

と勘違いさせてしまい、何度もコメント入力させてしまう手間をかけさせてしまったり、

「何でコメントが投稿できないの?」

と、読者さんに不安な気持ちを抱かせることになりかねませんので、それを防ぐために、ひと言添えておいてはいかがでしょう。

では、やり方です。

アメブロのコメント投稿ボタンの上下に、簡単な注意書きや挨拶文などを表示するには、以下のようなコードをユーザーCSSの末尾に追加してください。

/* コメント投稿ボタンの「上」に表示 */
.commentBtnArea:before {
  display: block;
  white-space: pre;
  text-align:center;
  margin-bottom: 15px;
  content:"いつもコメントありがとうございます。aコメントは承認制になっていますので、投稿後すぐには表示されません。aよろしくお願いします。";
}
/* コメント投稿ボタンの「下」に表示 */
.commentBtnArea:after {
  display: block;
  white-space: pre;
  text-align:center;
  margin-top: 15px;
  content:"ありがとうございました。";
  color: #ff0000; /* 文字を赤く */
  font-size: 150%; /* 文字を大きく */
  font-weight: bold; /* 太字に */
}

赤文字部分が、実際に表示される文面ですので、自由に変更してください。

基本的には、表示したい内容をそのまま書けばOKなんですが、いくつか注意事項があります。

■改行は a と書きます
文を改行したい位置で普通に改行しても改行されません。また、HTMLではありませんので<br>と書いても改行されません。改行したい位置にはaと書くようにしてください。

■長い行が自動的に折り返されません
行が横に長くなっても自動的に折り返されませんので、横幅がはみ出さないように適宜改行を入れて調節してください。

■HTMLタグは使えません
<a>や<img>などのHTMLタグは使えませんので、例えばリンクを表示するようなことはできません。

なお、コード中のグレーの部分は、CSSで文字装飾ができることを例示してみただけですので、実際にはなくても大丈夫です。

以上、アメブロのコメント投稿ボタンの上下に、簡単な注意書きや挨拶文などを表示する方法をご紹介しました。

よかったら参考にしてみてください。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ