CSS イメージ差し替え技法

この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合がります。オリジナルの記事はここよりご覧いただけます。

さて、GoogleやYahoo!、MSNと言った検索エンジンは、検索時の関連性を決定するためのインデックスを実行する時に、もっぱらページのテキストコンテンツをチェックしているというのはご存知かと思います。また、検索エンジンはきちんと組織化区分化されたコンテンツを重要視するため、<h1>と言ったヘッダータグをHTML内で使用することが重要だと言うこともご存知かと思います。けれどもしWEBサイトに時代遅れな大きめ文字のみっともないヘッダーを使いたくなかったとしたらどうしましょうか。グラフィックで置き換えますか？それもいいアイデアですよね。けれど<h1>タグを<img>タグに置き換えてしまうと、検索エンジンにそっぽ向かれてしまうのでそんなことはしたくありませんよね。心配ありません。そんなことしなくていいんです！

最近いい感じで使われているトリックの1つは、ヘッダー文字を画像に置き換える時にclassを使用することです。ヘッダータグは今まで通り使用し、ただそのタグにこのように独自のclassを追加記述するだけです：<h1 class="headerReplacement">セクションヘッダー</h1>　そしてCSSでは下記のようにclassのスタイル設定をしてください：

.headerReplacement {
   text-indent: -9999px;
   width: 600px;
   height: 100px;
   background: url(pathtoyourimage) #cccccc no-repeat;
}

こうすれば、みっともないヘッダー文字は検索エンジンに引っかかる状態のまま、代わりに実際表示させたい画像を置換することが出来ます。またこのテクニックはスクリーンリーダーをご使用なさっている方々や、画像やCSSを無効化させている方々に対しても親切な方法と言えると思います。