ブログ作成その５

では、いよいよ最後のブログ作成その５になります。ここでは、CSSで背景を表示し、文字の余白、色などを微調整していきます。

5-1.画像をimageフォルダに保存する

最後に背景に画像を設定し、文字の色を変えてみましょう。以下の画像をimageフォルダの中に名前をつけて保存してください。

ヘッダーの画像（step5-1.jpg）サイズ：900×100px
ヘッダーのサンプル

body背景の画像（step5-2.gif）サイズ：60×60px
body背景の画像サンプル

空とスイカの画像をstep5-1.jpg、水色と白の画像をstep5-2.gifと名前をつけて保存します。

画像を右クリック、名前を付けて保存でimageフォルダに保存してください。(拡張子をそれぞれ.jpgと.gifにします。)

5-2.CSSで背景に画像を表示する

次にCSSに追加コードを入力していきましょう。sample.cssを開いて以下の背景に画像表示させる設定を追加入力していきましょう。青文字の部分が追加したテキストになります。

@charset "utf-8";

body {
 margin:0;
 padding:0;
 background-image:url("../image/step5-2.gif");
}

div.pagebody {
 width: 900px;
 margin: 30px auto;
 border: solid 1px #666666;
 background-color: #ffffff;
}

div.header {
 text-align: center;
 padding:30px;
 background-image:url("../image/step5-1.jpg");
}

div.nav { text-align: center;}

div.nav ul li {
 display: inline-block;
 margin: 0 10px;
}

div.section { padding: 0 20px;}

div.article {
 border: solid 1px #999999;
 padding: 0 20px;
 margin-bottom: 20px;
}

div.footer {
 padding: 20px;
 text-align: center;
 background-color: #0066cc;
}

address { color:#ffffff;}

h1 {
 margin:0;
 color:#ffffff;
}

h2 { margin:0;}

background-image	フォルダと画像名を指定して画像を背景に表示させます。
background-color	背景の色を設定します。
color	文字の色を設定します。