読者登録ボタンの上下にメッセージを表示する方法

読者登録ボタンの上下にメッセージを表示する方法


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

こんにちは。

アメブロのサイドメニューの『このブログの読者』にある読者登録ボタン(読者になるボタン)の上または下に、CSSを使って、お好みのメッセージを表示する方法をご紹介します。

例えば、今から読者になってくれようとしている方に向け、

「よろしければ『相手に知らせて』で読者登録して下さいね」

といったメッセージを表示するのに利用できると思います。

読者登録ボタンの『上』にメッセージを表示する方法

読者登録ボタンの『上』にメッセージを表示するには、ユーザーCSSに以下のような内容を追加します。

ユーザーCSSについてわからない場合はこちらを参照してください

/* 読者登録ボタンの『上』にメッセージ表示 */
.readerMenu .readerRequestBtnArea:before{
  display: block;
  white-space: pre-wrap; /* 改行できるようにするおまじない */
  margin-top: 10px; /* メッセージ上側余白 */
  margin-bottom: 10px; /* メッセージ下側余白 */
  text-align: left; /* 文字を左寄せにする */
  font-size: 12px; /* 文字サイズ */
  font-weight: bold; /* 文字を太字にする */
  color: #f00; /* 文字色 */
  content:"サイドメニューの読者登録ボタンの 『上』 に表示したい文字";
}

文字サイズや文字色などは、コメント(注釈)を頼りにお好みの設定に変更して下さい。

読者登録ボタンの『上』にメッセージを表示する方法

次に、読者登録ボタンの『下』にメッセージを表示する場合ですが、上に表示する場合とほとんど変わりません(beforeがafterに変わるだけ)。

ユーザーCSSに以下のような内容を追加して下さい。

/* 読者登録ボタンの『下』にメッセージ表示 */
.readerMenu .readerRequestBtnArea:after{
  display: block;
  white-space: pre-wrap; /* 改行できるようにするおまじない */
  margin-top: 10px; /* メッセージ上側余白 */
  margin-bottom: 10px; /* メッセージ下側余白 */
  text-align: left; /* 文字を左寄せにする */
  font-size: 12px; /* 文字サイズ */
  font-weight: bold; /* 文字を太字にする */
  color: #f00; /* 文字色 */
  content:"サイドメニューの読者登録ボタンの 『下』 に表示したい文字";
}

文字サイズや文字色などに関しても、同様にコメント(注釈)を頼りにお好みの設定に変更して下さい。

/* 読者になると・・・届きますの『下』にメッセージ表示 */

あと、おまけで、読者登録ボタンの下に最初から表示されているメッセージ「読者になると、このブログの更新情報が届きます。」のさらに下に、お好みのメッセージを表示する方法もご紹介します。

ユーザーCSSに以下のような内容を追加して下さい。

/* 読者になると・・・届きますの『下』にメッセージ表示 */
.readerMenu .readerRequestDescription:after{
  display: block;
  white-space: pre-wrap; /* 改行できるようにするおまじない */
  margin-top: 10px; /* メッセージ上側余白 */
  margin-bottom: 10px; /* メッセージ下側余白 */
  text-align: left; /* 文字を左寄せにする */
  font-size: 12px; /* 文字サイズ */
  font-weight: bold; /* 文字を太字にする */
  color: #f00; /* 文字色 */
  content:"「読者になると、このブログの更新情報が届きます。」の 『下』 に表示したい文字";
}

これもあまり変わりませんね(readerRequestBtnAreaがreaderRequestDescriptionに変わっただけです)。

もちろん、文字サイズや文字色などに関しても、同様に変更できます。

以上、サイドメニューの『このブログの読者』にある読者登録ボタン(読者になるボタン)の上または下にCSSを使ってお好みのメッセージを表示する方法をご紹介しました。

どうぞ参考にして下さい。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次

アメブロカスタマイズと読者を増やすブログ運営