アメブロでヘッダー画像を横幅いっぱいに表示する方法

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

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

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

 

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

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

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

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

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

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;)にします。

 

Amazonプライム会員なら無料で読めるビジネス書4選

上を目指すために読んでおきたい8冊

---

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

---

---

---

---

---

---

---