2009年07月18日
記事やコメントの文字の色を変える方法 : CSS
ファンブログ カスタマイズ:フォント編 投稿日:2009年07月18日 18:30
今回は、記事やコメントの文字の色を変える方法を説明します。シンプル系スキンのデフォルト設定の文字の色は、#333 です。黒く表示されるこの色は、実は黒に近い灰色で白い背景の場合いちばん読みやすいといわれている色になります。
白い背景に真っ黒である(#000)文字を表示しますとコントラストが強すぎて目がチカチカしてしまいますので、
若干淡い黒の、#333 を指定することで、コントラストを弱めている訳なんです。
逆に淡い色や背景色と同系の色を選びますと、今度はコントラストが弱くなりすぎて読みにくくなりますので、
背景色とのコントラストに注意して色を選んでみてくださいね。
記事やコメントの文字の色は、スタイルシートで指定されていますので、そのカラーコードを変更すれば、通常入力された文字が変更した文字の色になります。過去記事にも反映されますが、色の指定を入れてある文章は変更されません。あくまでも、何も指定していない文字だけに反映されるということになります。
文字の色の指定は、「スタイルシート」のカラーコードを変更したり、設定タグを追記します。作業をする前に「スタイルシート」のバックアップをとっておいてくださいね。
スタイルシートを開いたら、/* 記事表示部分 */ という記述を探してください。この項目は最後の方にありますので、後ろから戻ってスクロールすればすぐ見つかります。
この項目の下の方にあります、#entries .entryBody { という項目を探してください。フォントの色を指定するタグである color: #333; の #333 をお好みのカラーコードに変更してください。
※ カラーコードが6桁でなく3桁なのは、RGBそれぞれの残りの桁も同じだよ!っていう省略コードです。
6桁のカラーコードに変更しても問題ありませんので、ご安心ください。
#entries .entryBody {
color: #333;
padding: 10px 5px;
}
変更ができましたら、「プレビュー(P)」で確認してください。記事のフォントの色が指定した色に変更されていれば成功なので「保存(S)」を押して終了です。
同じくスタイルシートの、/* 記事表示部分 */ の上にあります、/* コメント */ という記述を探してください。
この項目の下の方にあります、.comment_layer { という項目を探してください。そこに設定タグである
color: #000000; を追記してください。※ #000000 にお好みのカラーコードを入れてください。
.comment_layer {
color: #000000;
}
ただ改行キーで行を空けて追記しますと、行の最初に追記されてしまいます。追記するコツとしましては追記する上の行の最後にカーソルを置いて「改行」し、「Tab」キーを押しますと、きれいに追記ができます。
※コメントの画面は「プレビュー(P)」では確認できませんので、記述に間違いがないかよく確認して「保存(S)」を押してください。「自分のブログを確認する」を押して、書き込みがあるコメント画面を開いてください。コメントが指定どおり変更されていれば成功です。
自分のブログなので文字の色は自由に変えれますが、あくまでも訪問者(読者)さんのことを考えて文字の色を選んでみてくださいね。
いかがでしたでしょうか?文字を大きくしてコントラストがキツイと感じている方は、#333 を #444 にするだけでも感じが変わると思いますんで、試してみる価値はあると思いますよ。(´・ω・`)b
※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら
≫ FC2 Blog Ranking ≪ 押していただけると励みになります
背景色とのコントラストに注意して色を選んでみてくださいね。
記事やコメントの文字の色は、スタイルシートで指定されていますので、そのカラーコードを変更すれば、通常入力された文字が変更した文字の色になります。過去記事にも反映されますが、色の指定を入れてある文章は変更されません。あくまでも、何も指定していない文字だけに反映されるということになります。
文字の色の指定は、「スタイルシート」のカラーコードを変更したり、設定タグを追記します。作業をする前に「スタイルシート」のバックアップをとっておいてくださいね。
▼ この説明は「シンプル系スキン」限定です。他のスキンの場合はタグの記述が異なります。 ▼
▼ 記事の文字の色を変える方法 ▼
スタイルシートを開いたら、/* 記事表示部分 */ という記述を探してください。この項目は最後の方にありますので、後ろから戻ってスクロールすればすぐ見つかります。
この項目の下の方にあります、#entries .entryBody { という項目を探してください。フォントの色を指定するタグである color: #333; の #333 をお好みのカラーコードに変更してください。
※ カラーコードが6桁でなく3桁なのは、RGBそれぞれの残りの桁も同じだよ!っていう省略コードです。
6桁のカラーコードに変更しても問題ありませんので、ご安心ください。
#entries .entryBody {
color: #333;
padding: 10px 5px;
}
変更ができましたら、「プレビュー(P)」で確認してください。記事のフォントの色が指定した色に変更されていれば成功なので「保存(S)」を押して終了です。
▼ コメントの文字の色を変える方法 ▼
同じくスタイルシートの、/* 記事表示部分 */ の上にあります、/* コメント */ という記述を探してください。
この項目の下の方にあります、.comment_layer { という項目を探してください。そこに設定タグである
color: #000000; を追記してください。※ #000000 にお好みのカラーコードを入れてください。
.comment_layer {
color: #000000;
}
ただ改行キーで行を空けて追記しますと、行の最初に追記されてしまいます。追記するコツとしましては追記する上の行の最後にカーソルを置いて「改行」し、「Tab」キーを押しますと、きれいに追記ができます。
※コメントの画面は「プレビュー(P)」では確認できませんので、記述に間違いがないかよく確認して「保存(S)」を押してください。「自分のブログを確認する」を押して、書き込みがあるコメント画面を開いてください。コメントが指定どおり変更されていれば成功です。
自分のブログなので文字の色は自由に変えれますが、あくまでも訪問者(読者)さんのことを考えて文字の色を選んでみてくださいね。
いかがでしたでしょうか?文字を大きくしてコントラストがキツイと感じている方は、#333 を #444 にするだけでも感じが変わると思いますんで、試してみる価値はあると思いますよ。(´・ω・`)b
※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【カスタマイズ:フォント編の最新記事】
この記事へのコメント