だぶだぶノート

hail2u.net – Weblog – CSS Image Replacement Hacks

css on/image off環境の問題は、imgタグを使えば解決するが、
見出しやメニューなどでテキストを画像として表示する方法は様々あるが、なぜわざわざそうするかというと、SEOである。
今はどうかは知らないが、検索ロボットは、imgタグのalt属性は展開しない。

つまり、<h1><img src=”midashi.gif” alt=”見出し”/></h1>と書くと、
検索サイトには<h1></h1>と登録されてしまうが、
テキストとCSSを駆使したimage replacementを使えば、きっちり<h1>見出し</h1>として登録してもらえる。

h1{
    width: 200px;
    height: 20px;
    overflow: hidden;
}
h1:after{
    content:url(midashi.gif);
    margin-top: -20px;
}

:after疑似セレクタを使って画像を挿入し、モトのテキストを隠してしまう、というのを考えたが、IEは:afterに対応していないので、
http://www.mezzoblue.com/tests/revised-image-replacement/
mezzoblueさんのところのShea Enhancementを利用して

<h1>
<!--[if ie]><img src="midashi.gif" alt=""
                style="position:absolute;"/><![endif]-->
見出し</h1>

これにh1:afterのCSSを組み合わせると、コメントが入ってしまうが空要素の挿入はさけられると思う。

が、このIE対策は個人的に使いたくない手法では、ある。

テキストで表示しておき、JavaScriptで置換（image offの環境では置換しない）するのがベターかな、とは思う。