個別記事

前後の記事

letter-spacing を使って背景画像置換

この記事が属するカテゴリー
CSS

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」って、日本では一般的にはどう言う呼称なんでしょう、背景画像置換？

2005-03-29T17:11:54+09:00 | コメント (7) | トラックバック (1) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/196

このリストは、次のエントリーを参照しています: letter-spacing を使って背景画像置換:

パソコンのページ さんからのトラックバック
画像の置き換え
CSSでテキストを画像に置き換える という技術 （すでに２００４年ごろから公開されている技術です） text-indent:-9999pxとか使... [続きを読む]
2007年07月10日 21:06

コメント

Neo さんからのコメント

初めまして、Neoと言います。
これからも宜しくお願いします。

こちらはWinXP・IE6なのですが、
「MIR: Malarkey Image Replacement」の方を見ると、
バナー画像の上に「M」の字が乗っかっています。
これは、ブラウザのバグなのでしょうか？

2005年03月30日 17:58
e-luck さんからのコメント [TypeKey Profile Page]

Neo さん、はじめまして。
ご報告ありがとうございます。
僕の環境 XP SP2 では見えないですねー。
Neo さんも SP2 でしょうか？
つか、関係ないか…

2005年03月31日 09:02
Neo さんからのコメント

はい、私もSP2です。
解像度の問題なのでしょうか。私は1024×768です。
見えるのは私だけなのでしょうか…？
何か怖いですなぁ(笑)

今発見しました。
文字を「大」か「最大」にすると見えなくなります。
また、文章をドラックしたりすると、中途半端に消えたりしています…

2005年04月01日 12:41
e-luck さんからのコメント [TypeKey Profile Page]

あー、見えました（笑）
ウィンドウサイズを広げたりすると、消えたりもしますねー。
結構、バギーな感じですね。
昨日までは全然見えていなかったのに、一回見えたら、キャッシュをクリアしようが、毎回見えるようになりました（笑）
And all that Malarkey では、引き続きテストを行っていて、これに関して新たな記事を書くらしく、それに期待した方が良いかも知れませんね。

2005年04月01日 13:21
Neo さんからのコメント

あら、見えましたかww
新しい記事が楽しみですね。

2005年04月02日 21:25
あや さんからのコメント

e-luckさん、はじめまして！
かなり昔の話題のようですが検索で見つけて、興味深く拝見しました。
でもやっぱりうちのIE6だと最初の１文字が表示されてしまい、ダメでした…、
それで調べてたら、こんなのが出てきたんですが↓
http://www.skyzyx.com/archives/000123.php
いかがでしょうか？？
私はあんまり英語に長けてないんですが(苦笑)、
このページは検証しながら順を追って書いてるようなので、
一番最後に示されてるコードでやってみました。
まだ詳しく検証してないですが、
とりあえずWin IE6,Opera7.53,Mozilla1.7.3, Mac IE5で見てみたら平気でした。
お時間のあるときに試してみてください！☆

2005年07月02日 15:36
e-luck さんからのコメント [TypeKey Profile Page]

あや さん、情報ありがとうございます。
後で見させて頂きますね。

2005年07月03日 09:03

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)