2006年5月20日
文字色の変更(FC2ブログ編)
今回は、FC2ブログの「文字色」のカスタマイズ方法について説明します。
具体的に、エントリー本文の文字色を変更する方法を例に挙げて、説明します。
文字色を変更する場合、スタイルシートを編集すると簡単に変更することができます。
では、フォントをカスタマイズする方法として、エントリー本文のフォントを変更する方法を例にして説明します。
テンプレートは、公式テンプレートの「sample」を使用して説明します。
■ CSS(スタイルシート)の編集方法
「sample」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
<スタイルシート>
エントリー部分の文字色を変更するには、.div.entry-body内で、color というプロパティを追加して、文字色を指定します。
初期設定では、bodyで「color: #333;」と全体的に指定されていますので、エントリー部分の文字色だけを変更するには、エントリー部分の文字色を個別に指定します。
<スタイルシートの編集例>
文字色の指定方法には、「#666666」「#666」のように16進表記で指定する方法と、 「blue」のようにカラーネームで指定する方法があります。
■ 16進表記で指定
16進表記で指定する場合、WEBセーフカラーを使用すると、より多くの環境で意図通りの色で表示させることができます。
WEBセーフカラーとは、8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色のWEBカラーのことです。 WEBセーフカラーを使用すれば、表示の際に色が変換されてしまうことが少なくなり、より多くの環境で意図通りの色で表示させることができるということです。
■ カラーネームで指定
16進表記の他にカラーネームで色を指定することができます。
カラーネームによる指定の場合、色名によっては使用OSやブラウザのバージョンなどの環境により、 正しく表示できないことがあるので注意してください。
HTML4.01とXHTML1.0、CSS2で共通して正式に使用できるカラーネームは、下記の16色です。
■ カラーチャート表(標準カラー16色)
文字色の変更について、エントリー本文の文字を例として説明しましたが、エントリー本文だけでなく、他の部分の文字色を変更したい場合は、その該当する「color」の指定値を編集することで変更できます。
FC2ブログの「sample」テンプレートの主なクラス・セレクタは、下記の通りですので、参考にしてください。
<FC2ブログの「sample」テンプレート>
以上、文字色の変更、指定方法について説明しました。
是非、活用して、望みの文字色にカスタマイズしてください。
[次の講義へ] → 行間(行の高さ)の変更
参考になりましたら、応援お願いします。
具体的に、エントリー本文の文字色を変更する方法を例に挙げて、説明します。
エントリー本文の文字色を変更するには
文字色を変更する場合、スタイルシートを編集すると簡単に変更することができます。
では、フォントをカスタマイズする方法として、エントリー本文のフォントを変更する方法を例にして説明します。
テンプレートは、公式テンプレートの「sample」を使用して説明します。
■ CSS(スタイルシート)の編集方法
「sample」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。
<スタイルシート>
| div.entry-body { padding : 0 10px; } |
エントリー部分の文字色を変更するには、.div.entry-body内で、color というプロパティを追加して、文字色を指定します。
初期設定では、bodyで「color: #333;」と全体的に指定されていますので、エントリー部分の文字色だけを変更するには、エントリー部分の文字色を個別に指定します。
<スタイルシートの編集例>
| div.entry-body { padding : 0 10px; color: #666666; } |
文字色の指定方法
文字色の指定方法には、「#666666」「#666」のように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」の指定値を編集することで変更できます。
FC2ブログの「sample」テンプレートの主なクラス・セレクタは、下記の通りですので、参考にしてください。
<FC2ブログの「sample」テンプレート>
| クラス | 該当箇所 |
| div#branding h1 a | ブログのタイトル |
| div#branding p | ブログの説明 |
| div.section h2 | エントリーのタイトル |
| div.entry-body | エントリーの本文 |
| div#secondary-column h2 | アーカイブ関連の見出 |
| div#extra-column h2 | アーカイブ以外の見出 |
以上、文字色の変更、指定方法について説明しました。
是非、活用して、望みの文字色にカスタマイズしてください。
[次の講義へ] → 行間(行の高さ)の変更
参考になりましたら、応援お願いします。
パーマリンク | 投稿者 りっち | 2006年5月20日 22:43
|
|
はてなブックマークに追加
|
Yahooブックマークに登録
トラックバック
このエントリーのトラックバックURL:
コメント
コメントしてください
