CSS でテキストを画像に置換するテクニックとして、当サイトでは text-indent を使用していますが、「And all that Malarkey」で letter-spacing を使った方法「MIR image replacement」が紹介されていたのでメモ。
拙い英語力なんで、解釈間違っているかも知れませんが、例として以下の物を使い、「Movable Type 3.151-ja」の部分を画像にする場合として説明してみます。
<dl>
<dt>powered by</dt>
<dd title="Movable Type 3.151-ja">Movable Type 3.151-ja</dd>
</dl>んでもって、実際にやってみた詳細とサンプル。 IE5 で見てもらえばわかるのですが、text-indent を使った方法だと、画像がうまく表示されません。一方、 letter-spacing を使った方は、IE5 でも問題なく画像表示されます。
And all that Malarkey で言われている、text-indent を使った場合にはいくつかのブラウザで水平スクロールバーが出てしまうってのは、いまいち分からなかったんですが、取りあえず IE5 にも対応させたいって場合は、「MIR image replacement」を使ってみても良いかもしれませんね。ちなみに、こういった「image replacement」って、日本では一般的にはどう言う呼称なんでしょう、背景画像置換？
Comments
初めまして、Neoと言います。
これからも宜しくお願いします。
こちらはWinXP・IE6なのですが、
「MIR: Malarkey Image Replacement」の方を見ると、
バナー画像の上に「M」の字が乗っかっています。
これは、ブラウザのバグなのでしょうか？
Neo さん、はじめまして。
ご報告ありがとうございます。
僕の環境 XP SP2 では見えないですねー。
Neo さんも SP2 でしょうか？
つか、関係ないか…
はい、私もSP2です。
解像度の問題なのでしょうか。私は1024×768です。
見えるのは私だけなのでしょうか…？
何か怖いですなぁ(笑)
今発見しました。
文字を「大」か「最大」にすると見えなくなります。
また、文章をドラックしたりすると、中途半端に消えたりしています…
あー、見えました（笑）
ウィンドウサイズを広げたりすると、消えたりもしますねー。
結構、バギーな感じですね。
昨日までは全然見えていなかったのに、一回見えたら、キャッシュをクリアしようが、毎回見えるようになりました（笑）
And all that Malarkey では、引き続きテストを行っていて、これに関して新たな記事を書くらしく、それに期待した方が良いかも知れませんね。
あら、見えましたかww
新しい記事が楽しみですね。
e-luckさん、はじめまして！
かなり昔の話題のようですが検索で見つけて、興味深く拝見しました。
でもやっぱりうちのIE6だと最初の１文字が表示されてしまい、ダメでした…、
それで調べてたら、こんなのが出てきたんですが↓
http://www.skyzyx.com/archives/000123.php
いかがでしょうか？？
私はあんまり英語に長けてないんですが(苦笑)、
このページは検証しながら順を追って書いてるようなので、
一番最後に示されてるコードでやってみました。
まだ詳しく検証してないですが、
とりあえずWin IE6,Opera7.53,Mozilla1.7.3, Mac IE5で見てみたら平気でした。
お時間のあるときに試してみてください！☆
あや さん、情報ありがとうございます。
後で見させて頂きますね。