アメブロの「このブログの読者になる」を目立つボタンに変更する！

アメブロの「このブログの読者になる」を目立つボタンに変更する！

記事メイン部のトップ位置に表示される読者登録リンクのデフォルトがこちらです。


リンク色にはなっていますが味気ないアイコンと文章です。
もっとこのリンクを押して貰いたいですよね？

そこで画像に差し替えます。

今回はこのような画像を用意しました。


２枚の画像に見えますが、１枚画像です。Fireworksで制作しました。
通常は上半分が表示され、下半分がマウスオーバー時に表示されるようにCSSで設定します。

以下のソースを現在使用中のブログデザインCSSに追加して下さい。

/*メイン記事部分の読者登録ボタン*/
.readerMainLink p {
text-indent:-9000px;
text-align:center;
display:block;
padding:10px 0 0 0;
}

.readerMainLink p a {
display:block;
margin:0 auto 0 auto;
padding:0;
width:264px;/*画像の横幅を指定*/
height:30px;/*画像の半分の縦幅を指定*/
background:url(画像素材のURLをここに入れる) left top;
}

.readerMainLink p a:hover {
background-position:left bottom;
}

CSSの追加が完了すれば変更作業終了です。

変更後のキャプチャー画面ですが、いかがでしょうか？




記事担当：宮原