前回の続きです。
Mondoさんのマネっこってのは、内緒にしてね(何)
1,記事タイトルに画像を入れる
記事タイトルに画像を入れたら、もっとテンプレが引き締まるかな?
って事で、入れてみましょう。
画像はこれを使います。
赤字を追加すると、こんなカンジになります。
2.記事タイトルの文字位置を設定する
う~ん・・・
画像と文字が重なってますねぇ・・・
文字をずらしましょう。
赤字を追加すると、こんなカンジになります。
3.記事タイトルの文字色を変える
黒じゃカワイくないのぉ!!
赤色にするんだい!
赤字を修正するとこうなります。
4,リンクの色を変える
リンクに色がついてた方が、見やすいよなぁ。
それに、クリックした事あるかないかで色が変わった方が、もっと見やすいんじゃないかなぁ・・・
そうすると、こんなカンジになります。
自分の好きな色に変えたい場合は、『カラーチャート』を参考にしてみて下さい。
5,カレンダーの色を変える
カレンダーの色が黒じゃ、何だか味気ないなぁ・・・
おそろいの赤色にしよぉっと。
赤字を加えたら、こうなりましたよ。
次回で最終回だじょ♪
Mondoさんのマネっこってのは、内緒にしてね(何)
1,記事タイトルに画像を入れる
記事タイトルに画像を入れたら、もっとテンプレが引き締まるかな?
って事で、入れてみましょう。
画像はこれを使います。
修正前 | 修正後 |
/* エントリータイトル */ .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; } |
赤字を追加すると、こんなカンジになります。
2.記事タイトルの文字位置を設定する
う~ん・・・
画像と文字が重なってますねぇ・・・
文字をずらしましょう。
修正前 | 修正後 |
/* エントリータイトル */ .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; (右への移動距離) } |
赤字を追加すると、こんなカンジになります。
3.記事タイトルの文字色を変える
黒じゃカワイくないのぉ!!
赤色にするんだい!
修正前 | 修正後 |
/* エントリータイトル */ .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; (右への移動距離) } |
赤字を修正するとこうなります。
4,リンクの色を変える
リンクに色がついてた方が、見やすいよなぁ。
それに、クリックした事あるかないかで色が変わった方が、もっと見やすいんじゃないかなぁ・・・
修正前 | 修正後 |
/* リンク(まだ見ていない状態) */ A:link { color:#000000; } | /* リンク(まだ見ていない状態) */ A:link { color:#FF0000; } |
/* リンク(マウスポインタを乗せた状態) */ A:hover { color: ; } | /* リンク(マウスポインタを乗せた状態) */ A:hover { color: #FF66FF; } |
/* リンク(すでに見た状態) */ A:visited { color:#888; } | /* リンク(すでに見た状態) */ A:visited { color:#FF00FF; } |
そうすると、こんなカンジになります。
自分の好きな色に変えたい場合は、『カラーチャート』を参考にしてみて下さい。
5,カレンダーの色を変える
カレンダーの色が黒じゃ、何だか味気ないなぁ・・・
おそろいの赤色にしよぉっと。
修正前 | 修正後 |
/* カレンダー年月 */ .calMonth { color: ; font-weight: bold; } | /* カレンダー年月 */ .calMonth { color: red; font-weight: bold; } |
/* カレンダー曜日 */ .calWeek { color: ; font-weight: bold; } | /* カレンダー曜日 */ .calWeek { color: red; font-weight: bold; } |
赤字を加えたら、こうなりましたよ。
次回で最終回だじょ♪
講座、力作ですねー。すばらしいですー。
まとめるのってたいへんですよねー。
ところで、width とか height とかの「寸法」は、
px だけでなく % でもいけるみたいです。
幅とか便利ですよー。
ではでは、頑張ってくださいねー。
また伺いますー。
>デジタルさんち から伺いました。
>講座、力作ですねー。すばらしいですー。
>まとめるのってたいへんですよねー。
ありがとうございます。ペコッ
でも、最初にこうやって画像を貼ったり表を書いたりする方法をしたのは、私じゃないんですよ。
リンクが貼ってありますが、Mondoさんのを見て、凄くわかりやすくて見やすかったので、マネしちゃったんです。
自分でやってみて、改めてMondoさんの凄さがわかったんですよ。
>ところで、width とか height とかの「寸法」は、
>px だけでなく % でもいけるみたいです。
>幅とか便利ですよー。
私が持っている本にも書いてありました。
確かに%の方が馴染み深くてわかりやすいカモしれませんね。
今度試しに使ってみようと思います。
>ではでは、頑張ってくださいねー。
どうもありがとうございます。ペコッ
>また伺いますー。
今日はどうもありがとうございました。
またお暇な時にでも、覗きに来てくださいネ♪