ともっちのCSS講座 その３

前回の続きですよ。

１，スクロールバーの色を変える

スクロールバーの色を変えて、他の人と差をつけちゃえ！

修正前	修正後
/* ページ全体の背景と余白 */ body { background-image: url(画像のurl); background-repeat: ; background-position: ; margin:0px; padding:0px 20px; background-color:#FFFFFF; }	/* ページ全体の背景と余白 */ body { background-image: url(画像のurl); background-repeat: ; background-position: ; margin:0px; padding:0px 20px; background-color:#FFFFFF; scrollbar-Face-Color : red; scrollbar-Arrow-Color : #FFFFFF; }

赤字を追加すると、こんなカンジになります。

うん♪カワイイ♪

２，記事部分に画像を貼る

記事部分に画像があったら、きっとカワイイよね♪
画像はこれを使います。

修正前	修正後
/* エントリー本文背景 */ .entryBg{ padding: 15px; background-color: #F3F3F3; margin:0px 0px 40px 0px; }	/* エントリー本文背景 */ .entryBg{ padding: 15px; background-color: #F3F3F3; margin:0px 0px 40px 0px; background-image: url(画像のurl); }

赤字を加えたら、こうなりました。


３，記事部分の画像を固定する

いやぁ～ん！！
画像が一杯出て来て見にくいよぉ～！！
画像は右下に１個だけでイイのぉ～！！

修正前	修正後
/* エントリー本文背景 */ .entryBg{ padding: 15px; background-color: #F3F3F3; margin:0px 0px 40px 0px; background-image: url(画像のurl); }	/* エントリー本文背景 */ .entryBg{ padding: 15px; background-color: #F3F3F3; margin:0px 0px 40px 0px; background-image: url(画像のurl); background-repeat: no-repeat; background-position: right bottom; background-attachment:fixed; }

赤字を加えたら、こうなりましたよ。

あ～、良かった♪
一安心、一安心♪

４，コメント欄、ＴＢ欄に画像を貼って固定する

ここまで来たら、コメント欄やＴＢ欄にも画像を貼っちゃうぞ！
貼る画像はこれにしよう。

修正前	修正後
/* コメント背景（別ウィンドウ、エントリー下ともに） */ .comment { }	/* コメント背景（別ウィンドウ、エントリー下ともに） */ .comment { background-image: url(画像のurl); background-repeat: no-repeat; background-position: right bottom; }
/* トラックバックの背景（エントリー下、別ウィンドウともに） */ .trackback { background-color: ; }	/* トラックバックの背景（エントリー下、別ウィンドウともに） */ .trackback { background-color: ; background-image: url(画像のurl); background-repeat: no-repeat; background-position: right bottom; }

赤字を加えると、こんなカンジになります。


これで完成でぇ～す！！


この記事を書くにあたり、参考にさせて貰ったMondoさん、どうもありがとうです。ペコッ

私のとは違うパターンのテンプレのCSSを紹介しているので、興味がある方は見てみるとイイですよ♪