【カスタマイズへの道 - 第３話 - 】

【カスタマイズへの道 - 第２話 - 】では、≪ページ全体（body{}）≫にオリジナル壁紙を貼り、スタイルシートについても簡単に説明させてもらいましたが、
その次にしたカスタマイズは、前回にも紹介した【SHINOblog】さんの記事≪ココログデザイン（背景を食い込ませる改良編）≫を参考にして『自分でも背景を記事部分に食い込ませてみよう！』って、言う事でやってみたのです。
・
・
・
が、正直 【SHINOblog】さんの記事を読んで貰えれば解り易いと思うのですが、それだと何も書くことが無くなってしまうので、とりあえず このブログでした設定をご紹介します。

さて、今回の"背景を記事部分に食い込ませる"にはそれぞれの"セレクタ"を設定をしなければならないのですが、各セレクタ名は下の図のように指定されていて、
≪図１≫　　　　　　　　　　　　　　≪図２≫

.
個別に設定する事で色々と変更が出来るのですが、あくまでも今回は"背景を記事部分に食い込ませる"為の設定を説明します。
（【SHINOblog】さんのように、解り易いように色分けしてみました。）

まず最初に、#containerに貼る背景画像を作ろう～♪
私の場合、ブログのレイアウトが両サイドバー付きで それぞれの幅が、サイドが各200ｐｘ　記事部分が400ｐｘ　計800ｐｘに設定してあるので、この幅に合うように背景を作りました。
≪図３≫
このように背景を作ったら、コレをコントロールパネルのファイルにアップロードしておき、#containerのbackground-imageにファイルアドレスを入力し、body以外の各セレクタのbackground-colorを透明（透過）を意味するtransparentにすれば良いのですが・・・・・
ただし私の場合は、bodyの背景に画像指定をしているので、このままだと記事が読み難くなるので#container のbackground-color を白（#ffffff）に指定して、さらに、#banner の高さ指定を265pxにします。
なぜ、#banner の高さを265pxに指定するかと言うと・・・
#banner のデフォルトの高さ（あらかじめ設定されている値）は80ｐｘ位なので、コレを指定しないと≪図３≫背景の記事を読みやすくする為に白く加工した部分が下に行き過ぎて、記事が背景で読み難くなってしまうからなんどす。

で、今回のスタイルシートはこうなります。
body { background-image:url(); background-color: ; }	/* ページ全体 */ 背景画像 背景色
#container { background-image: url(); background-color: #ffffff; background-repeat: no-repeat; background-position: center top; width: 800px; }	/* ブログ全体*/ 背景画像 背景色/白 背景画像/リピートナシ 背景位置/中央・上 幅/800px
.content { background-color: transparent; }	/* 記事部分*/ 背景色/透過
#banner { background-color: transparent; height: 265px; }	/*バナー*/ 背景色/透過 高さ/265px
#center { background-color: transparent; width: 400px; }	/*センター*/ 背景色/透過 幅/400px
#right { background-color: transparent; width: 200px; }	/*右サイドバー*/ 背景色/透過 幅/200px
#left { background-color: transparent; width: 200px; }	/*左サイドバー*/ 背景色/透過 幅/200px

とりあえず、今回は≪図３≫の背景を貼る為の設定なので、もし"自分でも背景を食い込ませたい！"と思った方は、自分のブログのレイアウトに合わせた背景画像を作って、幅や高さetcを微調整してね♪

・・・・・・・・つづく