見出しに画像を使いたい

この記事では、見出しに画像を使用する際に検索ロボットに文字を読ませるための方法として、文字を見えないくらい小さくする方法を紹介しています。
しかし、この方法は、検索エンジンによってスパムと見なされる可能性が出てきました。
（正しく使用していてもロボットにはわかりませんから）

そのため、以下の方法は、今後オススメできません。
新たな方法は、この記事のトラックバックからどうぞ。

--------------------

CGとかFLASHのサイトを作っているなら、ページのタイトルがテキストと罫線だけなんてありえませんよね？
凝ったフォントとデザインで、目を引くタイトル画像を入れたくなります。
でも、CSSでページを作るって決めたら、見出しは h1 とかで示さないといけません。

というわけで、h1タグの再定義です。
たとえば、前の記事で示したページは、h1が画像です。

-- CSS --
h1 {
font-size: 2px;
color: #FFFFFF;
background-image: url(img/title.gif);　（←ポイント）
background-repeat: no-repeat;
margin: 0px 0px 10px;
}

-- HTML --
<h1>プロフィール</h1>

見出しの文字は、通常見えては困るので、思いっきり小さくします。
さらに背景色と同色にして見えないようにします。
ちなみに、フォントサイズが 1px でないのは、なぜか 1px にすると表示が崩れるからです。
（h1 のプロパティを display : none にしたら、h1そのものが表示されなくなるのでNG）

他に、

.hidden { display: none; }

<h1>&nbsp;<span class="hidden">プロフィール</span></h1>

という方法もあります。
背景のデザインの問題などで見出しの文字が隠せないときはこれでもいいですが、ちょっと煩雑です。

そして、背景画像として、タイトル用の画像を指定してやります。
これで、検索ロボットは h1 のテキストを読み、見た目には画像が表示されるようになります。

背景の画像は共通で、見出しの文字はテキストにしたいときは、文字を隠さないで、逆に目立つようにしてやればOK。
ただし、重ね合わせ位置は、text-indent プロパティなどでの微調整が必要です。

---

・・・・ところが！
Macintosh版　Internet Explorer 5 だけは、これが上手くいきませんでした。
最初の方法だと、h1の下に大きな余白があいてしまうのです。

で、いろいろ策を講じてみたのですが、実は、ある一つのバグが原因でした。
「Mac IE5 は、親要素が「position: relative」のとき、子要素が、margin-top, bottom を誤って継承する」というやつで、メインコンテンツを入れる divタグが、見事に「position: relative」だったのです。

他にも、リスト関係の要素の位置がずれまくるので「CSSはだめかなぁ・・・」と思っていたのですが、position: relativeの使い方を注意するだけで、ほとんど問題なくなりました。　ほっ。