CSS編集用デザインのサイドバーの「読者欄」の「読者になる」ボタンのカスタマイズ
ラーメンが好きだけど「ニックネーム」は何故かワンタンです。こんにちワ^^;
こんなサイドバーの「読者欄」の「読者になる」ボタンのカスタマイズ方法を御案内します。
![読者になるボタン 01](https://farm9.staticflickr.com/8730/16887042765_2cc2114734_o.png)
↓
![読者になるボタン 02](https://farm8.staticflickr.com/7609/16885848932_3a2651208a_o.png)
CSS編集の末尾に以下のコードを追記して下さい。
/*読者登録ボタン、サイドバー、03:22*/
.readerMenu .readerBtn {
width: 256px;
height: 76px;
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20131012/13/20/97/j/o02560076wantan-521381553801360.jpg);
background-position: left top;
background-repeat: no-repeat;
text-indent: -9999px;
padding: 0;
}
.readerMenu .readerBtn {
width: 256px;
height: 76px;
background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20131012/13/20/97/j/o02560076wantan-521381553801360.jpg);
background-position: left top;
background-repeat: no-repeat;
text-indent: -9999px;
padding: 0;
}
注1.赤字の箇所は、ボタンの横幅です。作成したボタンの横幅と同じ数値を記述して下さい。
注2.ピンク字の箇所はボタンの縦の高さです。やはりボタンと同じ数値を記述して下さい。
注3.青字の箇所に作成したボタンの画像URLを記述して下さい。
御自身のサイドバーの幅に合わせて、独自の「読者になる」ボタンを設置するのも、ちょっとオシャレではないでしょうか♪
☆ブィブィ ('-^*)/
ニャンレンジャー出動!!
-----
※追記15:29
このサイドバーの「このブログの読者」欄の「読者になる」ボタンを、この欄の上部に設置する場合は以下のタグをフリープラグインに記述して下さい。
<!--サイドバーの「読者になる」を上に-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".readerRequestArea").insertBefore(".readerHeader");
}
);
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".readerRequestArea").insertBefore(".readerHeader");
}
);
</script>