ヘッダ部分に画像を挿入する
<< 前のページ 各グループをスタイルシートで装飾する
ヘッダ、コンテンツ、フッタのスタイルの定義を行って、以下の図のようなデザインになりました。
見た目はまだ味気ないですが、これが基本となります。
上記画面を、何も見ずに0から自力で作成できるようになって、自分でスタイルをちょこちょこいじってみる。
この作業がスタイルシートの技術を身につける近道となります。
今回は、上図のヘッダ部分に画像を挿入してみます。画像を入れるだけで見栄えがよくなります。画面がしまる、という感じでしょうか。
ヘッダ部分の横幅は、コンテナ(ヘッダ、コンテンツ、フッタをまとめた部分)の横幅に一致しています。ですから、横幅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; /* フッタ部分の文字色を白に */
}
再構築し、ブラウザで確認すると、以下のようになります。
以上でメインページのレイアウトはいったん終了します。
次回はカテゴリページのレイアウトの作成をします。
次のページ >> カテゴリ・アーカイブのテンプレート作成