文字色の変更（MT3.2編）

では、エントリー本文の文字色を変更する方法を説明します。
文字色を変更する場合、スタイルシートを編集すると簡単に変更することができます。

■ CSS（スタイルシート）の編集方法
MT3.2のデフォルト・テンプレートのスタイルシートを見ていただくと、下記のような記述があります。

＜スタイルシートの記述＞

.entry-excerpt, .entry-body, .entry-more-link, .entry-more { 　　clear: both; }

エントリー部分の文字色を変更するには、color というプロパティを追加して、文字色を指定します。

初期設定では、bodyで「color: #333;」と全体的に指定されていますので、エントリー部分の文字色だけを変更するには、エントリー部分の文字色を個別に指定します。

＜スタイルシートの編集例＞

.entry-excerpt, .entry-body, .entry-more-link, .entry-more { 　　clear: both; 　　color: #666666; }

[関連記事] → 文字色の変更（MT3.17編）


文字色の指定方法には、「#666666」のように16進表記で指定する方法と、 「blue」のようにカラーネームで指定する方法があります。

■ 16進表記で指定

color: #666666;

16進表記で指定する場合、できる限り、WEBセーフカラーを使用してください。
WEBセーフカラーとは、8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色のWEBカラーのことです。 WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、 より多くの環境で意図通りの色で表示させることができます。

■ カラーネームで指定

color: blue;

16進表記の他にカラーネームで色を指定することができます。
カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。

HTML4.01とXHTML1.0、CSS2で共通して正式に使用できるカラーネームは、下記の16色です。

■ カラーチャート表（標準カラー16色）

Aqua #00FFFF	Yellow #FFFF00	Fuchsia #FF00FF	White #FFFFFF
Teal #008080	Olive #808000	Purple #800080	Gray #808080
Blue #0000FF	Lime #00FF00	Red #FF0000	Silver #C0C0C0
Navy #000080	Green #008000	Maroon #800000	Black #000000

以上、文字色の変更、指定方法について説明しました。
是非、読みやすい文字色にカスタマイズしてくださいね。

[次の講義へ] → 行間（行の高さ）の変更

参考になりましたら、1クリックお願いします＾＾