1. TOP
  2. アメブロカスタマイズ
  3. 読者登録ボタンを記事の上に表示するアメブロカスタマイズ

読者登録ボタンを記事の上に表示するアメブロカスタマイズ

全てのスキンの記事上に読者登録ボタンを表示するアメブロカスタマイズ

今回は、全てのスキンで使える読者登録ボタンの設置方法を紹介します。

といいましても、全てというのは現在公開されている新スキンの全てであります。

新スキンかどうかを見分ける方法は、

上部に大きなヘッダー広告があり、そしてサイドバーに大きな四角形の

広告が表示されているブログのことです。

旧バージョンではこのプラグインは使えませんのでご了承ください。
旧バージョンは、サイドバーに細長い広告が表示されているパターンです。

読者登録ボタン設置例

例えばこんな感じになります

image-11044869372-11541036605

それではいってみましょう・・・

手順1 「アメーバのサービス一覧」よりプラグインの追加を選択する

以下の画像のように「プラグインの追加」ボタンをクリックします。

image-11044869372-11509404321

手順2 フリープラグインにコピーペーストする

フリープラグインのタブを開いて以下のコードを、枠の一番上にコピーペーストしてください。コピーが終わったら下にある「保存」ボタンをクリック。

コピーコード

<script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js”></script>

画像のようになります

image-11044869372-11509506378

フリープラグインが空白で初めてこの部分にコピーペーストする人は次の一文は読み飛ばして次の手順3へ進んでください。

フリープラグインになんらかのコードが入力されている場合
枠の一番上にというのは既に、プラグインにあなたが選んだ別のプラグインのコードが入っていた場合の作業です。既に入力しているプラグインの上に次のコードを追加してくださいという意味です。このコードが既に入っている場合は手順3へ進んでもらって結構です。このニュアンスが微妙であなたのパソコンの環境によってはうまくいかないことがあるかもしれません。
手順3 フリープラグインにコピーペーストする

先ほどコピーペーストした部分の下に(既に別のプラグインを入力しているからは、一番下に)以下のコードをコピーペーストしてください。コピーが終わったら下にある「保存」ボタンをクリック。

コピーコード

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<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
o0300008011513539103

登録ボタン1マウスオーバー
o0300008011513539627

ボタン2

登録ボタン2
o0300008011513539625

登録ボタン2マウスオーバー
o0300008011513539626

ボタン3

登録ボタン3

o0300008011513539104

登録ボタン3マウスオーバー
o0300008011513539102

手順その5

用意した画像をアップロードし、上記コードの赤字部分の「あなたのアップロードした画像のURLを貼り付け」の部分にURLを貼り付けます。マウスが乗る前と、乗った時にそれぞれのアップロードした画像のURLをコピーしましょう。(同じ画像をコピーしても構いません)

手順その6

先ほどコピーペーストしたプラグインの中にある、「あなたのブログID」の文字の部分に、あなたの現在のブログのIDを入力する→IDはあなたがブログにログインするときのログインIDのことです。入力し終わったら「保存」のボタンをクリックして保存しましょう。

手順7 「フリープラグイン」が使用する機能にあるかをチェック

最後の「サイドバーの配置」タブをクリックし、使用する機能に「フリープラグイン」が入っているかを確認します。入っていない場合は「使用しない機能」の中に「フリープラグイン」アイコンが入っているのでそれを「使用する機能」にドラックアンドドロップします。

image-11044869372-11509578210

いったん保存しましょう。

これで上記のように読者登録ボタンの設定ができました。

お疲れ様でした。

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ