読者登録ボタンを記事の上に表示するアメブロカスタマイズ
全てのスキンの記事上に読者登録ボタンを表示するアメブロカスタマイズ
今回は、全てのスキンで使える読者登録ボタンの設置方法を紹介します。
といいましても、全てというのは現在公開されている新スキンの全てであります。
新スキンかどうかを見分ける方法は、
上部に大きなヘッダー広告があり、そしてサイドバーに大きな四角形の
広告が表示されているブログのことです。
旧バージョンではこのプラグインは使えませんのでご了承ください。
旧バージョンは、サイドバーに細長い広告が表示されているパターンです。
読者登録ボタン設置例
例えばこんな感じになります
それではいってみましょう・・・
手順1 「アメーバのサービス一覧」よりプラグインの追加を選択する
以下の画像のように「プラグインの追加」ボタンをクリックします。
手順2 フリープラグインにコピーペーストする
フリープラグインのタブを開いて以下のコードを、枠の一番上にコピーペーストしてください。コピーが終わったら下にある「保存」ボタンをクリック。
コピーコード
画像のようになります
フリープラグインが空白で初めてこの部分にコピーペーストする人は次の一文は読み飛ばして次の手順3へ進んでください。
手順3 フリープラグインにコピーペーストする
先ほどコピーペーストした部分の下に(既に別のプラグインを入力しているからは、一番下に)以下のコードをコピーペーストしてください。コピーが終わったら下にある「保存」ボタンをクリック。
コピーコード
<script type=”text/javascript”>
$(function(){
$(“<style type=’text/css’>#reader_btn10 a{height:80px;width:300px;background-image:url(あなたがアップロードした画像のURLをこの括弧の中にコピー。マウスが乗る前の画像);background-repeat:no-repeat;text-indent:-9999px;margin:0px auto 10px;display:block; }#reader_btn10 a:hover {background-image:url(あなたがアップロードした画像のURLをこの括弧の中にコピー。マウスがボタンに乗った時に変化する画像);background-repeat:no-repeat;}</style><div id=’reader_btn10′><a href=’http://blog.ameba.jp/reader.do?bnm=あなたのブログID‘ target=’_blank’>このブログの読者になる</a></div>”).insertBefore(“.skinMainArea2”);});</script>
手順その4 画像を用意する
今回は300px×80pxの画像を用意します。そんな画像ないと言われる方の為に以下に3つのパターンを用意しましたので、こちらもご活用ください。画像をお持ちの方は手順その3に行きます。
下の画像を活用される場合は、ボタン画像の上で右クリックし「名前を付けて画像を保存」を選択し、画像をあなたのパソコンに保存してください。
ボタン1
登録ボタン1
登録ボタン1マウスオーバー
ボタン2
登録ボタン2
登録ボタン2マウスオーバー
ボタン3
登録ボタン3
登録ボタン3マウスオーバー
手順その5
用意した画像をアップロードし、上記コードの赤字部分の「あなたのアップロードした画像のURLを貼り付け」の部分にURLを貼り付けます。マウスが乗る前と、乗った時にそれぞれのアップロードした画像のURLをコピーしましょう。(同じ画像をコピーしても構いません)
手順その6
先ほどコピーペーストしたプラグインの中にある、「あなたのブログID」の文字の部分に、あなたの現在のブログのIDを入力する→IDはあなたがブログにログインするときのログインIDのことです。入力し終わったら「保存」のボタンをクリックして保存しましょう。
手順7 「フリープラグイン」が使用する機能にあるかをチェック
最後の「サイドバーの配置」タブをクリックし、使用する機能に「フリープラグイン」が入っているかを確認します。入っていない場合は「使用しない機能」の中に「フリープラグイン」アイコンが入っているのでそれを「使用する機能」にドラックアンドドロップします。
いったん保存しましょう。
これで上記のように読者登録ボタンの設定ができました。
お疲れ様でした。