琵琶湖を中心にしたバス釣りブログです。バスボートで琵琶湖のバスを釣っています。

　

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

 

今回のカスタマイズはアメブロの「このブログの読者になる（チェック）」をオリジナル画像に変えます。

デフォルトでは「このブログの読者になる（チェック）」とテキストで書かれていますが・・・

 

このようにオリジナル画像に変えることができます。

 

ついでにマウスのカーソルを持っていくと画像が切り替わるようにもできます。

実際のイメージとしてはこちらのサイトを参考にしてください。

今回は画像を2つ用意しました。

1つは通常時の画像。

もう1つはマウスのカーソルを持っていった時に切り替わる画像。

 

ボタンを簡単に作成することができる無料ソフトでお勧めなのはInkscape。

Inkscapeのダウンロードや使い方はこちらをご覧下さい。

画像を作成する際は、画像の縦横のサイズに気をつけてください。

例えばブログ全体の横幅が800pxで3カラムの場合、

左サイド170px、右サイド170px、本文部分420pxとなります。（残り40pxは余白）

したがって420px以上の画像を作成すると、設置したときに枠からはみ出すってことです。

 

それではカスタマイズ開始。

「ブログを書く」⇒「アメブロを書く」⇒「画像フォルダ」で、作成した画像をアップロードしておきます。

 

次に「ブログを書く」⇒「デザインの変更」⇒「CSSの編集」とクリック。

 

そしてcss編集欄の一番下までスクロールさせ、以下を全てコピペし各所を編集、保存します。

/* —– このブログの読者になる（チェック） ———— */
.readerMainLink p{
text-indent:-9999px;
background-image:none;
}
.readerMainLink p a{
display: block;
padding:0;
margin:0 auto;
width:500px; /* 画像の横幅 */
height:72px; /* 画像の高さ */
background-image : url(ここにアップロードした画像のURL);
background-repeat : no-repeat ;
}
.readerMainLink a:hover { /* ボタンにカーソルを合わした時 */
background-image : url(ここにアップロードした画像のURL);
background-repeat : no-repeat ;
}

赤字のところは人によって異なるのでそれぞれ編集してください。

 

「アップロードした画像のURL」の調べ方については、

アメブロのスキンをカスタマイズ～サイドバーのタイトルを画像にする～ で詳しく説明しました。

人気ブログランキングで今何位？

• tweet
• 

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓