アメブロで、このブログのようにヘッダーを

横幅いっぱいに表示しているブログをよく見かけますね。

その方法をご説明します。

 

ヘッダーの背景画像とヘッダー画像を使用します。

ヘッダーの背景画像を skinHeaderArea に設定し、

背景画像を skinHeaderArea2 として追記します。

header

アメブロのデザイン編集画面で、

ブログヘッダーの表示範囲を定義している

skinHeaderArea を探し、ここにはヘッダーの背景部分を指定します。

▼編集箇所

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
background-color:#000000; ← 画像を指定する場合ここは不要
background:url(http://~~画像URL~~) repeat-x; ← 画像を指定する場合
width:100%; ← ここで、横幅を100%に設定します。
}

▼CSS追記

.skinHeaderArea2{
background:url(http://~~画像URL~~) no-repeat;
width:980px;
height:334px; ← 画像の高さを指定
margin:0 auto;
}

ヘッダー画像としてはページ中央(margin:0 auto;)にします。

 

私が買ってよかったパソコン&iPhone関連商品 トップ7








アクセス解析を学ぶなら読んでおきたい4冊