ヘッダ部分に画像を挿入する－ブログ・テンプレート作成入門

ヘッダ部分に画像を挿入する

＜＜　前のページ　各グループをスタイルシートで装飾する

ヘッダ、コンテンツ、フッタのスタイルの定義を行って、以下の図のようなデザインになりました。

グループ化とスタイル適用

見た目はまだ味気ないですが、これが基本となります。
上記画面を、何も見ずに０から自力で作成できるようになって、自分でスタイルをちょこちょこいじってみる。
この作業がスタイルシートの技術を身につける近道となります。

今回は、上図のヘッダ部分に画像を挿入してみます。画像を入れるだけで見栄えがよくなります。画面がしまる、という感じでしょうか。

ヘッダ部分の横幅は、コンテナ（ヘッダ、コンテンツ、フッタをまとめた部分）の横幅に一致しています。ですから、横幅750pxの画像を用意します。縦幅は任意ですが、今回は250pxとします。

ヘッダ用画像（イルカ）

イルカの画像を用意しました。この画像は、サイトトップにimageフォルダを作成し、その中に入れておきます。

この画像を挿入するために、スタイルシートを修正します。

body {
text-align:center;
background-color:#eeffff;
}

#container {
width:750px;
text-align:left;
background-color:#ffffff; /* エントリ部分の背景を白に */
border:solid 1px #000000;
}

#header {
padding:30px;
background-color:#00ff00;
background-image:url(/image/title.jpg);　/* 画像の設定 */
text-align:center;
}

#header h1 ,#header h2 { /* ヘッダ部分の文字色を白に */
color:#ffffff;
}

#content {
padding:30px;
background-color:#ffffff;
}

#footer {
padding:30px;

background-color:#3366ff; /* フッタ部分の色をヘッダの画像と似た色に */

text-align:center;
}

#footer p {
color:#ffffff; /* フッタ部分の文字色を白に */
}

再構築し、ブラウザで確認すると、以下のようになります。

見栄えがちょっといい