アメブロ サイドバーの読者登録ボタンを変更する方法

アメブロ サイドバーの読者登録ボタンを変更する方法

アメブロでは、サイドバーのカスタマイズも、とっても重要!!

サイドバーの読者登録ボタンもよく見ると、
なんだかそっけない感じがします。

 

 

 

アメブロでは、アクセスアップのために、読者登録申請を行います。

 

これって本当に重要よ!!

 

できれば、ペタを付けた後に
ペタを返してくれた方に、読者登録申請をすると、
読者登録返しをしてくれたりします。

 

以前の記事でも書いたのですが、
読者登録しようにも、読者登録ボタンが見当たらない!!
あるいは、どこにあるかわからん!!
という方もいらっしゃるかも!!

 

私もいつもそうなんですが、
記事上とかに内容だったら、
サイドバーをずーっとスクロールしたりします。

 

もう、なんかね!!

って感じることもあるんです。

 

 

せっかく読者登録するき満々なのに、
ボタンなどが解りづらかったら、ストレスを感じますよね。

 

なので、読者登録ボタンは目立つ方が
やっぱりいいに決まっているんです。

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

 

 

読者登録ボタンも記事の上にあると、本当に親切です。

 

もっといいのは、オリジナルなものなんてなおよし!!

 

なんか嬉しくなっちゃうよね。

 

というわけで、サイドバーにも読者登録数などを表示するところがありますよね。

 

ここもちょっとカスタマイズして、
読者登録ボタンを変更してみましょう。

 

CSS編集可能なテンプレートでは、
最初こんな感じの画像です。

サイドバー読者登録欄

 

本当に、なんとかしてねって言っているみたいでしょう。

 

ここにオリジナルボタンを設置して、
ちょっと目立たせてみましょう。

 

サイドバーの読者登録ボタンの設置方法

 

サイドバー用に読者登録ボタンを作っておいてね。

大きさは、カラムによっても、
サイドバーのどちらに配置するか?ということでも変わってきます。

今回は、2カラム用に作成した読者登録ボタンを使います。

2カラムだと、サイドバーの幅も広いので、
ボタンを変えるだけでも、目立ちます。

 

大きさは、だいたい幅が170pxくらい、
高さは40pxくらいが丁度いいかも。

 

画像などにもよりますが、
大きいのがいい人は、どかんといっちゃってください。

 

画像が出来たら、記事投稿から画像のアップロードで、
画像をアップロードして、アップロード先のURLをメモにコピーして
おいてね。

 

 

今回ついでといってはなんですが、
読者登録数の文字の大きさと、
ボタンの下にある、【更新情報が届きます】という
説明文の文字の大きさもちょっと変更しちゃいます。

 

デザイン変更から、【CSSの編集】で、
CSSのところに、コードを追加します。
一番下でいいですよ。

その時に、後で変更できるように、
/* */ ← コメントアウト を使って、
タイトルをつけましょうね。

 

/*  読者登録ボタン(サイドバー)*/

.readerMenu .skinMenuBody{
padding:10px;
}

.readerRequestBtnArea{
text-indent:-9999px;
}

.readerRequestBtnArea a{
margin:0 auto;
display:block;
text-indent:-9999px;
width:171px;
height:42px;

/* ★ボタンの画像URLを指定します。 */
background:url(ここにアップロードした画像のURL) no-repeat center;
}

.readerRequestBtnArea a:hover {
 opacity: 0.5;
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
}


.readerHeader{
font-size:16px;
}

.readerRequestDescription{
font-size:11px;
}



 

 

※コードをコピーしてそのまま貼ってくださいね。

CSSに追加したら、表示を確認してくださいね。
完成はこんな感じね。

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

 

どうですか?

 

check

コードの解説

 

.readerRequestBtnArea

というのは、読者登録欄のことです。

.readerRequestBtnArea{
~ コードの設定をしています。

 

.readerRequestBtnArea a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}

 

↑ ボタンにマウスを合わせると、ボタンの画像が
半透明になるようにしています。

alpha(opacity=50);

-moz-opacity: 0.5;

 

この数字を変更すると、透明度が変わりますよ。

 

自分のいいあんばいに、調整してくださいね。

.readerHeader

これは、読者登録数の部分です。

 

.readerRequestDescription

これは、ボタンの下の更新情報が届きますという文章のことです。

 

今回は、この2か所のフォントサイズを変更しました。

 

フォントもサイズなどは、
こちらもいいあんばいで、調整して変更してくださいね。

 

サイドバーのカスタマイズは、
意外と重要だったりします。

中でも読者登録ボタンを設置しただけでも、
全然評判が違ってきますよ。

 

あなたのブログもサイドバーの読者登録ボタンを、
オリジナルなものにして、
読者登録数を増やしていってくださいね。

 
 
 

コメントを残す

サブコンテンツ

管理人:ちえぞう

chiezou



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

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

line

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



Fc2ランキングへ



お問い合わせ

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

pen

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

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

このページの先頭へ