カスタマイズ11（背景を食い込ませる2）

いよいよスタイルシートの作成です。
それぞれのタグは「カスタマイズ11（背景を食い込ませる1）」で詳しく解説しています。

バナー部分の幅と背景の設定

#banner { height: 120px; padding: 25px; background-image: url(upper.jpg); background-repeat: no-repeat; background-position: left top; }

タイトル部分 高さを指定 タイトル余白 背景画像のファイル名を指定 背景画像は繰り返しなし 背景画像は左上寄せ

背景を覗いた全体（コンテナ）の幅と背景の設定

#container { width: 800px; border-right: 1px solid #66CC66; border-bottom: 1px solid #66CC66; border-left: 1px solid #66CC66; }

背景を覗いた全体 幅を指定 ボーダーは緑色で1pxの実線

borderは私は上だけ何も指定しなかったのでborder-right、border-bottom、border-leftの３辺を個別に指定してるけど、四辺を囲みたい場合は
「border: 1px solid #66CC66;」のみの記述でオッケーです。
もちろん、4辺それぞれ別な色に指定することも可能です(笑)。
上部は「border-top: 1px solid #66CC66;」のように書きます。

左サイドバーの設定

#left { width: 200px; background-image: url(left2.jpg); background-repeat: no-repeat; background-position: left top; }

左サイドバー 幅を指定 背景画像のファイル名を指定 背景画像は繰り返しなし 背景画像は左上寄せ

右サイドバーの幅と背景の設定

#right { width: 200px; background-image:url(right2.jpg); background-repeat: no-repeat; background-position: left top; }

右サイドバー 幅を指定 背景画像のファイル名を指定 背景画像は繰り返しなし 背景画像は左上寄せ

記事部分の幅と背景の設定

#center { width: 400px; background-image: url(center2.jpg); background-repeat: no-repeat; background-position: left top; }

記事部分 幅を指定 背景画像のファイル名を指定 背景画像は繰り返しなし 背景画像は左上寄せ

記事部分の背景の設定
固定リンクのページで余計な画像が表示されるのを防止します。
「#center」で指定する背景画像より「.content」クラスの背景画像の方が上に表示されます。
そのため、「.content」の背景色を透明にしています。

.content { background-color: transparent;}

記事部分 背景は透明

「background-image: url(center2.jpg);」などの画像ファイルは自分が作ったファイル名を指定してください。
画像指定の仕方は「画像を使うにあたって」を参照してねっ。
一個一個の設定が面倒だったら、このタグ全コピペして画像のファイル名とボーダーの色だけ変えれば使えると思います(笑) 。