アメブロ 読者登録ボタンを目立たせるように配置する方法

アメブロ読者登録ボタンの設置方法

アメブロのアクセスアップには欠かせない
読者登録。

読者登録ボタンを目立たせるようにしたほうが、いいでしょう!!

 

 

 

アメブロの基本アクセスアップの手段として、
読者登録は欠かせません。

 

読者登録を増やす方法としては、
まず、自分から積極的に読者登録するのが一番早い方法。

 

アメブロも読者登録時にメッセージを送るという方法があるんですが、
以前はメッセージを加えて送ることができるように、
表示があったのですが、そのシステムも終了したので、
読者登録を勝手にしていいよ的な感じになったんです。

 

でも、やっぱりメッセージを送ったほうが、
読者登録してもらえます。

 

かといって、読者登録するときに
相手に強要することは、規約違反となります。

 

読者登録の本来の意味は、そのブログが気に入って、
もっと読みたいなーって思ったら、読者登録するわけです。

 

読者登録する側、される側双方に、
ブログの更新情報も表示されますし、とってもよい!!

 

でも、メッセージを送る時に
「あなたも読者登録してね」って相互読者登録を促すような
表現を使うと、規約にひっかかるみたい。

 

そういうメッセージは、みんな迷惑フォルダへレッツゴーとなりますので、
表現も注意して、メッセージを送りましょうね。

 

そうやって、読者登録された場合は、
読者登録管理に登録されます。

 

マイページに、【読者登録されました】と表示もありますから、
どんな方が登録してくれたのかしら?
って、そのブログに見に行きますよね。

 

そして、そのブログが気に入ったら、
読者登録返しをしましょう・・・ということになる。

 

ちょっと待て!!

読者登録したくとも、
読者登録ボタンを探さないと、見つからない場合があります。

 

たいがいは、サイドバーの読者登録のところに、ボタンがついています。

デザインスキン(テンプレート)にもよりますが、
このボタン、小さいさっ!!
こんな感じで・・・・

サイドバーの読者登録ボタン

 

 

これを探しているうちに、せっかちな方は、
もういいよーってなってしまって、
せっかくの読者さんを逃がしてしまうかも?

 

しかも、サイドバーの配置カスタマイズを、
しっかりやっていない方もいたりします。

これって、やっぱり親切ではないですよね?

 

だったらば、読者登録ボタンを目立たせたりしてみましょう。

 

サイドバーだけでは、ちょっと弱いので、
記事の上につけたらどうよ?
こんな感じで。

 
記事上に読者登録ボタンを設置

 

記事上なら、ブログに訪問した時にすぐに目に留まるし、
ぽちっとするだけで、読者登録画面に移動してくれますね。

 

読者登録ボタンを目立つところに配置することって、
これは、読者さんにとっては親切なこと。
イコール、読者さんも増えてきますよ。

 

さっそく、やってみましょう。

 

読者ボタンを記事上に設置する方法

読者ボタンの画像を用意します。

自分で作ってもいいですし、無料で提供しているサイトもあります。
可愛いお気に入りサイトはこちらです。

http://template.starvision.co.jp/

 

 

 

 

 

※読者登録ボタンは無料ですよ。

 

読者登録ボタン画像をアップロードしておきます。

※外部サーバーやドロップボックスへ、アップロードしてもいいですね。

 

読者登録ボタンを記事の上に配置していきます。

フリープラグインに下記のコード(ソース)を追加します。

 

フリープラグインを初めて使う方は、
この魔法のプラグインを一番上に追加してくださいね。
 
 

もう既に、プラグインを使われている方は、
魔法のプラグインはいりません。

 

<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() {
$(".pagingArea:first").before('<div id="bnr_dokusha"><div style="text-align:center;"><a href="http://blog.ameba.jp/reader.do?bnm=あなたのアメブロID"><img src="アップロードした読者登録ボタンの画像URL" width="300" height="50" /></a></div></div>');
});
</script>

 

このコードでは、
幅300px 高さ50pxの読者ボタンを、
記事上のページ送りの上に配置する設定をしています。

bnr_dokusha

と名前を付けたんですが、ここを変更しても構いません。

 

変更した場合は、CSSも名前を変更すればOKです。

これでいったん保存をします。

 

次にCSSにスタイルの登録をします。

 

デザインの変更からCSSの編集をクリック。

 

CSSの記述のところへ、下記のコード(ソース)を貼ってください。
その時、あとからでも変更できるように、
コメントアウト(/* */)を記述すると、
CSSコードを探すのが簡単になりますね。

 


/* 読者登録ボタン(メインカラム)*/

#bnr_dokusha{
display:block;
margin:auto;
text-align:center; /*← 中央に配置 */
}

#bnr_dokusha a:hover{
opacity:0.5; /*← 画像を半透明にする。 */
filter:alpha(opacity=50); /*← 数字を変えると透明度が変わります。 */
-moz-opacity:0.5;
}

 

ここで、保存をしてブログを確認してくださいね。

※表示できない場合は、F5キーを押下して更新をかけてくださいね。

 

こんな感じになったらOK!!です。

読者登録ボタンを真ん中に配置

 

今回のCSSの設定は、読者ボタンを真ん中に配置するという設定と、
マウスを合わせた時に、読者ボタンをちょっと透明にする設定をしています。

 

マウスを合わせた時に違う画像をお使いの場合は、
2枚の読者登録ボタン画像が必要になるので、
ちょっと大変でしょう?

なので、1枚の画像でもマウスと合わせた時に、
変化があると、2枚用意している感じになるでしょう。

 

opacity=50 のこの数字を変えれば、
透明度が変化するので、いいあんばいに変えてくださいね。

 

読者登録ボタンは、読者登録数を増やすために、
そして、読者さんを解りやすく誘導するためには必要です。

 

常に、読者さんに優しいブログカスタマイズを心掛けていきましょう。

 

サンプルで使ったテンプレートは、
私の作った【あめてん2】です。
かわいいでしょう♪

 

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



こんにちは。ちえぞうです。
手作りモノが、大好きで、好きが講じて手芸家になりました。
自分の時間を、もっと大事にするため、アフィリエイトもしています。 夢を叶える為に、日々奮闘中です。

もっと詳しくプロフィール♪

line

お役に立てたら、ぽちっとな ♪



Fc2ランキングへ



お問い合わせ

ペンちゃんをクリック!!

pen

ご質問や、ご相談など、
気軽にメールしてくださいね。

アメブロテンプレート参考本

このページの先頭へ