ココログデザイン（背景を食い込ませる改良編）

ひさびさにココログのデザインカスタマイズです。
私がいつも使っている、背景画像を記事部分にまで表示させる方法は、以前「カスタマイズ11（背景を食い込ませる1）」、「カスタマイズ11（背景を食い込ませる2）」でも紹介しました。
しかし、この記事では画像を４つに切り分けなければいけないうえに、コメント欄にまで画像が表示されちゃうことがあったので、あまり良い見本とは言えませんでした・・・（汗）。

現在はもっと簡単な方法でできるようになったので、改めて紹介させていただきます。
なお、この方法は著作権の関係上、ココログデザインのリッチテンプレートでは使えないので、基本のテンプレートセットをお使いください。
ちなみに、私の場合は背景色が白い「標準：無地（3列）」を使っているので、これをベースに説明させていただきますねっ。

デザインをいじるにはスタイルシートを作ることが必要です。
スタイルシートの設定の仕方は「カスタマイズ２（スタイルシートの作成＆背景を変える）」をご覧ください。

手順は「スタイルシートの設定」「画像の作成」のみ。

■まずは背景画像を作ります。
ココログの全体の幅はデフォルトで800pxになっているので、画像も800pxの幅で作りましょう。
高さは私の場合は500pxくらいかな？
これは記事の文章が読みにくくならない程度にいろいろ試して指定してみてね。
あるいは、私みたく「画像もちゃんと見せたい」とか「記事の幅も広げたい」とか思ったら、幅や高さの設定を変えることも設定可能です。
私のココログは幅が900pxに広がってるし、ブログタイトルと記事の間がずいぶん空いてて、ティラノザウルスくんがよく見えるようになってるでしょ。
まあ、この方法も後で説明しますねっ。

ティラノザウルスの画像は下にいくにつれてグラデーションでだんだん薄くなっていますが、これは画像加工ソフトで処理したもの。
この辺はお手持ちの画像加工ソフトでもできると思うし、あえて背景色が白い画像を貼ってもいいかも知れませんねっ。
画像ができたら、ココログにアップ！
管理画面の「コントロールパネル」→「ファイル」に行って「新規ファイルのアップロード」でさきほどのファイルをアップします。
（もちろん「記事の作成」画面からアップもできますね）
アップロードしたら、画像のURLをエディタなどにメモっておいてね。
例えばティラノザウルスの画像は
http://shinobu.cocolog-nifty.com/apty/files/trex.jpg
って感じ。

■いよいよスタイルシートを作りましょう。
ココログの背景には以下のスタイルが指定されています。

body	ページ全体
#banner	バナー（タイトル）部分
#left	左サイドバー
#center	中央
#right	右サイドバー
#contents	ブログ全体
.contents	記事部分

図ではわざと分かりやすい色に分けていますが、こんな感じでそれぞれ指定できるんです。
紫色になってる#contents部分に画像を貼ってあげれば、私のブログのように記事部分にまで背景画像を食い込ませることができるんですが、そのままだと他の部分に背景色が指定されててうまく表示されないので、これをなんとかしなきゃいけない・・・。
つまり、背景色が指定されてるなら、それを除いてしまえばいいわけです。

スタイルシートでは、背景色や文字色を透明にするときに「transparent（透明という意味）」を指定します。
だから、余分な部分は全部透明にしちゃえばいい訳ですね～。

図で赤くなっている「body」だけ白を指定しておきます。
そして「#contents」に背景画像を指定。
他の部分はすべて「transparent」を指定します。

スタイルシートはこうなります。

body { BACKGROUND-COLOR: #FFFFFF;}	全体の背景色は白
#container { background-image: url (http://shinobu.cocolog-nifty.com/apty/files/trex.jpg); background-repeat: no-repeat; background-position: left top;}	背景画像を指定 繰り返しなし 位置は左上に指定
#banner { BACKGROUND-COLOR: transparent} #center { BACKGROUND-COLOR: transparent} #left { BACKGROUND-COLOR: transparent} #right { BACKGROUND-COLOR: transparent} .content { BACKGROUND-COLOR: transparent}	他の部分は全て透明に

画像が飽きたら background-image: url(　)の部分を書き直したり、ファイルを上書き保存するだけで背景画像を変えられます。

さて、最初に書いたように、記事の幅を広げたい場合や、写真を良く見せたい(笑)場合は、それぞれの場所にサイズを指定してあげます。
幅は「#container」「#left」「#center」「#right」で
高さは「#banner」で指定、こんな感じですねっ。

body { BACKGROUND-COLOR: #FFFFFF;}	全体はそのまま
#container { WIDTH: 900px; background-image: url(http://shinobu.cocolog-nifty.com/apty/files/trex.jpg); background-repeat: no-repeat; background-position: left top;}	幅を900pxに指定
#center { WIDTH: 500px; BACKGROUND-COLOR: transparent} #left { WIDTH: 200px; BACKGROUND-COLOR: transparent} #right { WIDTH: 200px; BACKGROUND-COLOR: transparent} .content { BACKGROUND-COLOR: transparent}	左右のサイドバーは200px 中央は500pxを指定
#banner { HEIGHT: 200px; BACKGROUND-COLOR: transparent}	バナー部分の高さは200px

この状態ではフォントやリンク色などはデフォルトのままなので、もっと他の部分もカスタマイズしたい！という方は、私の「ウェブログ・ココログ関連」カテゴリーにもカスタマイズ記事がありますので、そちらも参考になさってくださいねっ。
なにか不明な点がありましたら、遠慮なくどうぞ～。