BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» アメブロカスタマイズ サイドバーの読者登録ボタンをオリジナル画像にする方法

このエントリーをはてなブックマークに追加

アメブロカスタマイズ サイドバーの読者登録ボタンをオリジナル画像にする方法

   投稿日: 2015/01/23    投稿者:webコラム

こんにちは。

今回は、アメブロのサイドバーにある読者登録ボタンをオリジナル画像に変更する方法についてご案内したいと思います。


初めから用意されている読者登録ボタンはこんな感じ。

dokusha1.png

目立たないですよね・・・。

 

私もいろいろなブログを見て回って、また読みたいなと思うブログには読者登録するのですが、この「読者登録ボタンがどこにあるかわからないっ!」ということがあります。

サイドバーをスクロールしてあちこち探してみたり・・・。

 

より読者を増やすための読者登録ボタンなのにもったいないですよね!

やはり読者登録ボタンは目立っているほうがいい!

ということで、変更方法をご案内します!

1.変更する画像を準備します。


250px×45pxのこんな画像を用意してみました。

toroku.gif


2. CSSの編集画面を開きます。

「ブログを書く」→「デザイン編集」→「CSSの編集」とクリックします。

css1.png


3.読者登録ボタンをアップロードする。


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

アップロードすると、下に画像が出るので、「この画像のパス」をコピーします。

css2.png

4.CSSの編集画面で読者登録ボタンを編集する。

スタイルシート編集画面の一番下までスクロールし、下記のスタイルシートを貼り付けます。


.readerMenu a.skinImgBtnS{
width:250px;
height:47px;
text-indent:-9999px;
background-image:url(画像のURL);
background-repeat:no-repeat;
background-position:center 0px;
}

.readerMenu a:hover.skinImgBtnS{
background-position:center -47px;
}

.readerMenu .skinMenuBody{
padding:0px;
margin:0px;
}

※     青色の部分は画像の幅や高さによって変更してください。

できあがり。

dokusha2.png

カテゴリ:

TOPへ