今回は、文字色の変更です。
ここでかえるのは全体的な文字色です。
文字色の指定は、個別にも設定できます。
個別設定をしない限りここで設定した色が反映されます。
＊個別設定は、それぞれの設定の仕方をみてください。
| 詳しくはそれぞれの説明をご覧下さい □全体的な文字色を変えよう □記事タイトルの文字色を変えよう □記事本文の文字色を変えよう □コメント欄の文字色を変えよう □サイドバータイトルの文字色を変えよう □サイドバー本文の文字色を変えよう |
＊使うカスタムスキンによっては最初から個別設定してあるものもあるので注意してください
リンクしない部分の文字色をかえよう
今回は全体の文字色をかえるよ
文字の色がちがうだけでイメージもかわるから好みの色をみつけよう
今回も全体の変更だから /*—–Common—–*/ #container { の中だよ
文字色を変更するときのタグは color だよ
color を見つけてそのあとに好みの色をいれよう
もし color が見当たらなければ書き足していいよ
ぺんぺん
今回は color:#444444; から color:#0000FF;（青）に変更してみるよ
どんなかんじかな
| 変更前 | 変更後 |
|---|---|
| /*—–Common—–*/ #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#444444; border: 1px solid #FF0000; } | /*—–Common—–*/ #container { width :770px; margin:0 auto; line-height:1.4; text-align:left; color:#0000FF; border: 1px solid #FF0000; } |
◇色名：英語の色名を書く赤ならred、青ならblue、緑ならgreen、黒ならblackという感じ
◇カラーコード：#+6ケタの英数字で書く色ごとにコードが決まっているのでそれを使います。例えば白なら#FFFFFFになります。
ぺんぺん
画像でみるとわかりやすいなあ
文字が全部青くなってるね
個別設定で文字色の指定が入っている場合、その指定部分のみ変更されません。
■スキンによっては最初の設定で、全体の文字色を変えても変更されない部分があります。
■文字色は、部分によって個別設定できるので、変わってない部分は個別にタグが入っているということです。
■変える方法は個別タグを消すか個別タグを書きなおす 必要があります。
リンクする部分の文字色をかえよう
次はリンクする部分の文字色をかえてみよう
まずは、タグを確認しよう
リンクにも4パターンあります。どこの色をかえたいのか考えてみてくださいね。
| a:link | ページ全体のリンク | まだ開いてない部分の色 |
| a:visited | ページ全体のリンク | 一度開いたことがある部分の色 |
| a:active | ページ全体のリンク | その部分を選択しているときの色 |
| a:hover | ページ全体のリンク | マウスを乗せているときの色 |
≪参考≫ リンクワードの下に出る下線も指定できますよ。
| a:link { text-decoration:none; color:#777777; } | noneは下線なし |
| a:hover { text-decoration:underline; color:#70a000; } | underlineは下線あり |
リンクのタグを確認したので、さっそく全体のリンク色をかえるよ
今回もやっぱり /*—–Common—–*/ の中だよ。
ぺんぺん
color:#777777;（青） から color: #FF0000;（赤）に変更するよ
| 変更前 | /*—–Common—–*/ a:link { text-decoration:none; color: #777777; } a:visited { text-decoration:none; color: #777777; } a:active { text-decoration:none; color: #777777; } a:hover { text-decoration:underline; color: #70a000; } |
| 変更後 | /*—–Common—–*/ a:link { text-decoration:none; color: color: #FF0000; } a:visited { text-decoration:none; color: #FF0000; } a:active { text-decoration:none; color: #FF0000; } a:hover { text-decoration:underline; color: #70a000; } |
| 参考 カラーチャート |
ぺんぺん
画像の赤い部分がリンクがある部分だね
ここはみんなにクリックしてもらいたい場所とわかりやすいね
個別設定で文字色の指定が入っている場合、その指定部分のみ変更されません。
■スキンによっては最初の設定で、全体の文字色を変えても変更されない部分があります。
■文字色は、部分によって個別設定できるので、変わってない部分は個別にタグが入っているということです。
■変える方法は個別タグを消すか個別タグを書きなおす 必要があります。
