どうも、うふのわーるです。
アメブロのカスタマイズシリーズ第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 = $('<br><div class="readercheck"><a href="http://blog.ameba.jp/reader.do?bnm=nonononoirman">うふのわーるブログの読者になる（クリック）</a></div>');$('.globalLinkArea:first').after($(r).clone());$('.globalLinkArea:last').before($(r).clone());});</script>
（※１ここまで）
そして、上記画像内の赤枠で囲ってある部分が
読者登録ボタンに表示される文言になるのでお好みで変更。
それと、青下線のところは各自のﾌﾞﾛｸﾞＩＤを入力。
私、うふのわーるのﾌﾞﾛｸﾞであれば
http://ameblo.jp/nonononoirman/
の赤字の部分がＩＤですね。
↓また、マイページ右上のメニューからフリースペースの編集をクリック
↓空欄の中に下記（※２）の部分をコピー＆ペーストし保存
（※２ここから）赤字部分
<style type="text/css"><!--.readercheck{margin:0 auto;padding:0;width:330px;height:45px;}.readercheck a{text-align:center;margin:0;padding-top:5px;width:315px;height:25px;box-shadow: 5px 5px 5px #999999; border-radius: 5px;font-size:15px !important;font-weight:normal !important;background:#cccccc;/* ←通常時のボタンの色 */color:#666666 !important;/* ←通常時のボタンの文字の色 */text-decoration:none !important;display:block;}.readercheck a:hover{background:#993300;/* ←マウスが乗った時のボタンの色 */color:#FFFFFF !important;/* ←マウスが乗った時のボタンの文字の色 */}--></style>
（※２ここまで）
↓ボタンや文字の配色決め
（※２）の部分を貼り付けたら
上記図の①をクリックし、カラーパレットを表示させます。
マウスを希望のカラーのところに合わせると
③部分に6ケタの英数字コードが表示されるので
希望の色のコードを覚えておきます。
↓下記4か所のコードを希望のカラーコードに変更し保存
上記図の赤線分4か所を
それぞれ希望のカラーコードに変更します。
・通常時のボタンの色
・通常時のボタンの文字の色
・マウスが乗った時のボタンの色
・マウスが乗った時のボタンの文字の色
↓またまたマイページ右上から、「配置設定」をクリック
↓下図のように「使用しない機能」から「使用する機能」へ
フリープラグインをドラッグ＆ドロップ（掴んで離す）し保存
以上。
最後に自分のﾌﾞﾛｸﾞを目視確認して
読者登録ボタンが表示＆機能していれば成功。
プラグインを追加した影響か
若干ページが重くなった気がしますが
見栄え＆ユーザービリティ（？）重視ということで
当面はこの仕様で続けてみたいと思います。
「ページ読み込みが遅い」というご意見が多くなったら
要検討ですかね。
空欄スペースに下記（※１）をコピー＆ペースト
（※１ここから） 赤字部分
<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 = $('<br><div class="readercheck"><a href="http://blog.ameba.jp/reader.do?bnm=nonononoirman">うふのわーるブログの読者になる（クリック）</a></div>');$('.globalLinkArea:first').after($(r).clone());$('.globalLinkArea:last').before($(r).clone());});</script>
（※１ここまで）
そして、上記画像内の赤枠で囲ってある部分が
読者登録ボタンに表示される文言になるのでお好みで変更。
それと、青下線のところは各自のﾌﾞﾛｸﾞＩＤを入力。
私、うふのわーるのﾌﾞﾛｸﾞであれば
http://ameblo.jp/nonononoirman/
の赤字の部分がＩＤですね。
↓また、マイページ右上のメニューからフリースペースの編集をクリック
↓空欄の中に下記（※２）の部分をコピー＆ペーストし保存
（※２ここから）赤字部分
<style type="text/css"><!--.readercheck{margin:0 auto;padding:0;width:330px;height:45px;}.readercheck a{text-align:center;margin:0;padding-top:5px;width:315px;height:25px;box-shadow: 5px 5px 5px #999999; border-radius: 5px;font-size:15px !important;font-weight:normal !important;background:#cccccc;/* ←通常時のボタンの色 */color:#666666 !important;/* ←通常時のボタンの文字の色 */text-decoration:none !important;display:block;}.readercheck a:hover{background:#993300;/* ←マウスが乗った時のボタンの色 */color:#FFFFFF !important;/* ←マウスが乗った時のボタンの文字の色 */}--></style>
（※２ここまで）
↓ボタンや文字の配色決め
（※２）の部分を貼り付けたら
上記図の①をクリックし、カラーパレットを表示させます。
マウスを希望のカラーのところに合わせると
③部分に6ケタの英数字コードが表示されるので
希望の色のコードを覚えておきます。
↓下記4か所のコードを希望のカラーコードに変更し保存
上記図の赤線分4か所を
それぞれ希望のカラーコードに変更します。
・通常時のボタンの色
・通常時のボタンの文字の色
・マウスが乗った時のボタンの色
・マウスが乗った時のボタンの文字の色
↓またまたマイページ右上から、「配置設定」をクリック
↓下図のように「使用しない機能」から「使用する機能」へ
フリープラグインをドラッグ＆ドロップ（掴んで離す）し保存
以上。
最後に自分のﾌﾞﾛｸﾞを目視確認して
読者登録ボタンが表示＆機能していれば成功。
プラグインを追加した影響か
若干ページが重くなった気がしますが
見栄え＆ユーザービリティ（？）重視ということで
当面はこの仕様で続けてみたいと思います。
「ページ読み込みが遅い」というご意見が多くなったら
要検討ですかね。