画像で見出しを作る場合のCSS

from トロ〜ンとしたNの日常　画像で見出しを作る場合のCSS

見出しとなる文字をかっこよく装飾する場合、どうしても画像で制作してしまうのですが、そうするとサーチエンジンは画像になってしまった文字をテキストとして読めないので、SEO（サーチエンジン最適化）としては不利になります。しかも見出しになるくらいの文字ですからその意味合いも重要だったりするので、問題は意外に深刻だったりします。
imgタグの中のalt属性に書き込むのは従来からの方法です。たとえばこんな感じで。

<img src="hogehoge.jpg" alt="なになに">

一応テキストになっていますが、このalt属性の単語の重要性がちゃんと検索エンジンに伝わるかどうか怪しいところで、どちらかといえばh1,h2等のタグに設定したいところです。これがCSSを使うと可能になります。
HTMLの方には次のように書きます。

<div id="hogehoge">
<h1><span>なになに</span></h1>
</div>

で、CSSの方に次のように書きます。ちょっと省略しますけど、

#hogehoge h1 { background-image: url("hogehoge.jpg");}
#hogehoge span { display: none; }

画像のサイズをh1の方に設定してあげた方がいいですが、spanでdisplayをnoneにすることで文字が表示されなくなります。でもh1にテキストは入っているので単語の重要性は確保できます。

【おまけ】トラちゃん