アメブロ読者登録ボタンを記事上下に設置する方法(新CSS編集デザイン)



アメブロの読者登録ボタンを記事の上下に設置するにはCSSの編集とフリープラグインの編集が必要です。

2016年以降に追加された新CSS編集デザインに対応した情報が無かったのでここで紹介します。

スポンサーリンク

 

読者登録ボタンを記事上下に設置する為のCSS編集

まずはCSSの編集を行います。

以下のコードをコピーしてCSS編集の一番下に貼りつけてください。

.add_reader_btn_bg {
position: relative;
width: 100%;
height: 50px;
margin: 5px 0px;
text-align: center;
}
.add_reader_btn {
display: -moz-inline-box;
display: inline-block;
/display: inline;
position: relative;
width: 300px;
height: 30px;
border: 2px solid #666666;
background-color: #EEEEEE;
padding:6px;
}
.add_reader_btn a {
display: block;
color: #0000FF;
}
.add_reader_btn a:hover {
color: #FF0000;
}

 

「border: 2px solid #666666;」の部分で枠線の太さと色の変更。

「background-color: #EEEEEE;」の部分で背景色の変更ができます。

 

CSS編集後に設置するフリープラグインの編集内容

1:以下のコードをコピーしてそのままフリープラグインに貼りつけてください。

<!– 記事上下読者登録ボタン –>
<script type=”text/javascript”>
$(function(){
var r = $(‘<br><div class=”add_reader_btn_bg”><span class=”add_reader_btn”><a href=”http://blog.ameba.jp/reader.do?bnm=●●●“>このブログの読者になる</a></span></div>’);
$(‘.skin-paging:first’).after($(r).clone());
$(‘.skin-paging:last’).before($(r).clone());
});
</script>

 

2:上記コードの「●●●」の部分にご自身のブログIDを差し替えてください。

3:保存を押してコードを保存します

※フリープラグインは配置設定でサイドバーに配置しないと使用できないのでご注意ください。

 

上記の方法で記事の上下に読者登録ボタンを設置する事ができました。

新CSS編集用デザインのテンプレートを使用している方は参考にしてください。

 

読者登録を増やすにはこういった地道な作業やカスタマイズが必要となります。

読者数を増やす最も基本的な方法をこちらで紹介中なのでチェックしておきましょう。

 


スポンサーリンク