hail2u.net – Weblog – CSS Image Replacement Hacks

Posted by dab | 2008年12月16日 火曜日 13:04:11 < コンピュータ >

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の環境では置換しない)するのがベターかな、とは思う。

TrackBack URI : http://home.wi-wi.jp/blog/wp-trackback.php?p=201

Leave a comment

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: