ともっちのＣＳＳ講座 その２

前回の続きです。
Mondoさんのマネっこってのは、内緒にしてね（何）

１，記事タイトルに画像を入れる

記事タイトルに画像を入れたら、もっとテンプレが引き締まるかな？
って事で、入れてみましょう。

画像はこれを使います。

修正前	修正後
/* エントリータイトル */ .etTitle { color: #333333; font-size : large; font-weight: bold; }	/* エントリータイトル */ .etTitle { color: #333333; font-size : large; font-weight: bold; background-image: url(画像のurl); background-repeat: no-repeat; height: 画像の高さ px; }

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


２．記事タイトルの文字位置を設定する

う～ん・・・
画像と文字が重なってますねぇ・・・
文字をずらしましょう。

修正前	修正後
/* エントリータイトル */ .etTitle { color: #333333; font-size : large; font-weight: bold; background-image: url(画像のurl); background-repeat: no-repeat; height: 画像の高さ px; }	/* エントリータイトル */ .etTitle { color: #333333; font-size : large; font-weight: bold; background-image: url(画像のurl); background-repeat: no-repeat; height: 画像の高さ px; padding-top: 適度な数値 px; （下への移動距離） padding-left: 適度な数値 px; （右への移動距離） }

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


３．記事タイトルの文字色を変える

黒じゃカワイくないのぉ！！
赤色にするんだい！

修正前	修正後
/* エントリータイトル */ .etTitle { color:#333333; font-size : large; font-weight: bold; background-image: url(画像のurl); background-repeat: no-repeat; height: 画像の高さ px; padding-top: 適度な数値 px; （下への移動距離） padding-left: 適度な数値 px; （右への移動距離） }	/* エントリータイトル */ .etTitle { color:red; font-size : large; font-weight: bold; background-image: url(画像のurl); background-repeat: no-repeat; height: 画像の高さ px; padding-top: 適度な数値 px; （下への移動距離） padding-left: 適度な数値 px; （右への移動距離） }

赤字を修正するとこうなります。


４，リンクの色を変える

リンクに色がついてた方が、見やすいよなぁ。
それに、クリックした事あるかないかで色が変わった方が、もっと見やすいんじゃないかなぁ・・・

修正前	修正後
/* リンク（まだ見ていない状態） */ A:link { color:#000000; }	/* リンク（まだ見ていない状態） */ A:link { color:#FF0000; }
/* リンク（マウスポインタを乗せた状態） */ A:hover { color: ; }	/* リンク（マウスポインタを乗せた状態） */ A:hover { color: #FF66FF; }
/* リンク（すでに見た状態） */ A:visited { color:#888; }	/* リンク（すでに見た状態） */ A:visited { color:#FF00FF; }

そうすると、こんなカンジになります。


自分の好きな色に変えたい場合は、『カラーチャート』を参考にしてみて下さい。

５，カレンダーの色を変える

カレンダーの色が黒じゃ、何だか味気ないなぁ・・・
おそろいの赤色にしよぉっと。

修正前	修正後
/* カレンダー年月 */ .calMonth { color: ; font-weight: bold; }	/* カレンダー年月 */ .calMonth { color: red; font-weight: bold; }
/* カレンダー曜日 */ .calWeek { color: ; font-weight: bold; }	/* カレンダー曜日 */ .calWeek { color: red; font-weight: bold; }

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


次回で最終回だじょ♪