記事エリア上下の読者登録ボタンの幅を調整する

こんにちは。
『やさしいブログの作り方』の松田です。

新デザインスキンには、旧デザインスキンの標準仕様であった記事エリア上下の読者登録ボタンがなくなりました。

記事エリア上下の読者登録ボタンはサイドバーの読者登録ボタンよりも押される可能性が高いと個人的には思っています。

そこでカスタマイズをすることで新デザインスキンにも記事エリア上下に読者登録ボタンを設置する方法を以前ご紹介させていただきました。

まだ見ていない、という方はこちらから。


さて、ご紹介した方法だと記事エリアの幅いっぱいに読者登録ボタンのボックスが伸びてしまい、特に2カラムを使っておられる方は無駄に横長になってしまいます。

「何とかなりませんか～？」という質問をいただいたので何とかします。（笑）


以前ご紹介したフリープラグインの記述に以下の赤文字の部分を追記します。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>
<script type="text/javascript">
$(function(){
var r = $('<div style="margin:0 auto; width:80%; background:#ffeeee; padding:10px;border:2px solid #ff0000; display:block; font-weight:bold; font-size:1.2em; text-align:center;"><a href="http://blog.ameba.jp/reader.do?bnm=amecafe2011">このブログの読者になる（チェック）</a></div>');
$('.pagingArea:first').before($(r).clone());
$('.pagingArea:last').after($(r).clone());
});
</script>

赤文字の部分を追加すると、読者登録ボタンのボックスが記事エリアの幅の80％に縮小され、かつセンタリングされます。

幅を調整したい場合は80％の値を変更すればOKです。