文字色の変更

今回は、「文字色」のカスタマイズ方法について説明します。

ブログカスタマイズ講座では、読みやすい文字色についても説明しますので、是非、参考にしてくださいね。

[カスタマイズ講座へ] → 読みやすい文字色にするには


文字色をカスタマイズする方法として、具体的に「エントリー本文」の文字色を変更する方法を例にして説明します。

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

＜スタイルシート＞

.content p { color: #666666; }

文字色を指定するには、color というプロパティを使用します。
初期設定では、エントリー本文の文字色は、「 color: #666666;」と指定されています。この「#666666」という記述を変更することで、文字色を変更することができます。


文字色の指定方法には、「#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

文字色の変更について、エントリー本文の文字を例として説明しましたが、エントリー本文だけでなく、他の部分の文字色を変更したい場合は、その該当する「color」の指定値を編集することで変更できます。

MovableType3.17の主なクラス・セレクタは、下記の通りですので、参考にしてください。

＜MovableType3.17 デフォルト・テンプレート＞

クラス・セレクタ	該当箇所
#banner h1	ブログのタイトル
#banner h2	ブログの説明
.content	エントリー全体
.content h2	エントリーの日付
.content h3	エントリーのタイトル
.content p	エントリーの本文
.content p.posted	投稿者・投稿時間・コメントなど
#right	サイドメニュー全体（右側）
.sidebar	サイドメニュー
.sidebar h2	サイドメニューの見出し
.link-note	RSSへのリンクや検索ボックス
#calendar	カレンダー
#powered	powered　by の部分

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

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

参考になりましたら、応援お願いします。