ヘッダーを横幅いっぱいに広げる

ヘッダー部分をパソコンの画面横幅いっぱいに広げることで、堂々としたイメージのブログになります。

ヘッダーを横幅いっぱいに広げるには、ちょっと工夫が必要です。

まず、ヘッダーの背景部分と文字やロゴの部分を分けて、2つの画像を作成し、CSS では、背景画像を skinHeaderArea、ロゴ画像を skinHeaderArea2で、設定します。

背景画像の高さは、例えばここでは、250ピクセルに設定することにしましょう。

横幅は、パソコンの画面いっぱいにしたいので、横方向に繰り返しても不自然に見えないような画像を用意するか、2000ピクセル以上の画像を用意しましょう。

繰り返し表示する場合には、横幅は、いくつでも構いません。

背景画像は、skinHeaderArea クラスに記述します。

ここでは、背景画像を横に繰り返すため、repeat-x を書く加えます。

横幅を画面いっぱいにしたいので、width:100% にして、高さも指定します。

.skinHeaderArea{
background:url(背景画像のURL) repeat-x;
width:100%;
height:250px;
}

ロゴ画像は、skinHeaderArea2 クラスに記述します。

ロゴ画像は、背景を透過させた PNG 形式で、サイズは、横980ピクセル 高さ250ピクセルの画像を用意します。

CSS では、横幅と高さを指定し、margin で、中央に設定します。

.skinHeaderArea2{
background:url(ロゴ画像のURL) no-repeat;
width:980px;
height:250px;
margin:0 auto;
}

以上、横幅いっぱいのヘッダー画像が完成です。

※ CSS編集ってどこ？という方は、「アメブロカスタマイズ講座」のページを御覧ください。