研修の補助資料０４：ヘッダーの画像を変更する

seesaaブログでＨＰ作成：研修補助資料４です。
（研修会のご案内はこちらから。）

今回は、ブログをＨＰっぽくという事で、ヘッダーの画像を変更します。

が、その前に(^^ゞ

ブログタイトルの文字を大きくしたために、ヘッダーが窮屈な感じがしているので、まず、ヘッダー高さをちょっと高くしましょう。

#banner{
margin-bottom:10px;
padding-left:20px;
padding-right:0px;
text-align:left;
height:80px;
}

　上の赤字の部分を、下の青字のように、変更します。

#banner{
margin-bottom:10px;
padding-left:20px;
padding-right:0px;
text-align:left;
height:90px;
}

変更した数値が、ヘッダーの高さです。
この後、ヘッダーの画像を変更するので、変更後の画像の高さに合わせておくことが大切です。
（というか、ヘッダーの高さと同じ高さの画像を用意するのですが。）

ホームページのＴＯＰ頁の画像が、ちょっと下がったことがお分かりですか？
このままでは変化が分かりづらいのですが、ヘッダーの画像を変更すると、ＨＰのイメージががらりと変わりますよ。

この作業をする場所は、使用しているデザインの『スタイルシート』です。

『スタイルシート』の場所は・・・

先日の記事で説明しましたね。
こちら『研修の補助資料３：ＨＰのタイトルの文字を大きく』をご覧下さい。

では、ヘッダーの画像を変更しましょう。

・全くカスタマイズをしていないＨＰの例
　http://sample-hp.seesaa.net/

・カスタマイズ後のＨＰの例
　http://sample-hp222.seesaa.net/