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

　

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

 

今回のアメブロカスタマイズは、

カスタマイズ可能なアメブロのスキン、「グレイ」を使用した場合の方法ですが、

他の「ブルー」、「グリーン」、「ピーチ」でも全く同様の方法でカスタマイズできると思います。

「スタンダード」ではCSSの記述が若干違いますが、やることは全く一緒です。

 

で、今日やるカスタマイズはこちら。

アメブロのヘッダーを・・・

 

このようにロールオーバーで別の画像に切り替えます。

 

ロールオーバーとは、簡単に言うとマウスのポインタ（矢印）を持っていくと切り替わるってことです。

どんな感じになるかは僕のテストブログをご覧下さい。

かのカスタマイズをするにあたり、ヘッダー用の画像を2つ作成する必要があります。

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

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

 

とりあえずヘッダー用の画像を作成し、用意します。

 

こちらはロールオーバーで切り替わった時用のヘッダー。

 

今回はこのように常に「～の巻」という文字がタイトルの語尾につくように工夫してみました。

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

 

これで下準備完了。

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

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

 

css編集欄を一番下までスクロールし、以下のタグを貼り付け、赤字のところを編集してください。

 

#header{
margin:0 auto;
width: 1000px;/*　ヘッダー画像の横幅　*/
background-image: url(ここにアップロードした通常時のヘッダー画像のURL);
background-repeat: no-repeat;
}

div#header h1 {
margin:0;
padding:0;
width:1000px; /*　ヘッダー画像の横幅　*/
height:341px; /*　ヘッダー画像の高さ　*/
}

div#header h1 a {
display:block;
width:1000px;/*　ヘッダー画像の横幅　*/
height:341px;/*　ヘッダー画像の高さ　*/
text-indent: -9000px;/*　タイトル文字を消す　*/
overflow: hidden;
}

/* マウスを乗せたときの画像　*/
div#header h1 a:hover {
display:block;
background-image: url(ここにアップロードしたロールオーバー用の画像のURL);
background-repeat: no-repeat;
}

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

 

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

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

 

このカスタマイズでは、ヘッダー画像にブログトップページへのリンクを貼っています。

ちなみにアメブロでは横幅800px以上の画像をアップロードすることができません。

800px以上のヘッダー画像を使用する場合はこちらをご覧下さい。

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

• tweet
• 

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

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