文字色をスタイルシートで変更する方法と注意点｜サイト・ブログのアクセスアップ・SEO対策方法

文字色をスタイルシートで変更する方法と注意点

ホームページのコンテンツの要と言えるテキスト文字は、ページの見出しや説明文、
本文の文章やヘッダー（最後尾）の後付けなど様々な用途で打ち込んで作成します。

文字の色は例えば通常は白紙の背景色でしたら黒文字にするなど、
背景色と文字色が相反する色にして双方を目立たせるように設定するのが基本です。
文字に色をつけるには以下のようなタグを付ける事で変更できます。

フォントの変更用タグ

①　＜span style="color:#336666"＞文字＜/span＞　　実用例
②　＜font color="green"＞フォント＜/font＞　　実用例
（＜＞は小文字にして記入して下さい。）

特定の単語や文章に色を指定する時はここのタグで良いのですが、
各ページごとのタイトル文章（見出し）や、フッターやヘッダー部分、リストなど
決まった部分に同じ文字色に変更したいときには、＜div＞タグなどを用いて
スタイルシート（CSS）のページで指定すると簡単で、HTML的にも有効です。

スタイルシートへの書き方は
entry-body {
color:#006A6A;
}

という具合に、文字のステータスを指定している{}の領域内に
color:カラーコードまたは色の英単語;を挿入するだけでOKです。

文字色を変える対象のHTMLソースの領域はdivタグを使ってこのように囲みます。
＜div class="entry-body"＞領域＜/div＞

ブログサービスのダウンロード配布のCSS用テンプレートで見本がありますので、
それらを参考にしてカスタマイズしながら文字色が変わっているかどうかを
チェックして変更していくとだんだん慣れていきます。

背景色と別の色に設定

注意点として、背景色や背景画像、また文字近くの紛らわしい画像と
全く同じかほとんど同じ色に指定して目立たなくしてしまうと、
Googleなどの大手検索エンジンからは隠し文字として扱われてしまい
SEOスパムの判定を受けて検索結果順位が大幅に下がってしまう危険があります。

そのため、スタイルシートで変更する文字色は必ず、背景色と対比するように
なるべく目立つ色に組み合わせをして変えていきましょう。

CSS スタイルシート |