letter-spacing を使ってテキストを画像に置換のサンプル

CSS を適用していない状態

powered by

Movable Type 3.151-ja

text-indent を使った方法

text-indent: -9999pxを使った、画像置換テクニック。

powered by

Movable Type 3.151-ja

dd に対して、下記の CSS を適用。

dd.ti {
        background: url(powered.gif) center center no-repeat;
        width: 137px;
        height: 32px;
        text-indent: -9999px;
}

「MIR: Malarkey Image Replacement」を使った方法

「MIR: Malarkey Image Replacement」を使った、画像置換テクニック。

powered by

Movable Type 3.151-ja

まず .mir と言う、グローバルなクラスを用意し、letter-spacing を指定します。

.mir {
        letter-spacing : -1000em;
}

で、これは Opera には効かないので、Opera 用に html>body ハック "be nice to Opera" を適用し、更にマックIE のバグ回避のためにバックスラッシュを使ったハックを使用。

/* オペラのみに適用、は弾く */
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* ハック終了 */

上記２つを予め定義しておけば、画像置換したい場所に対して、適宜、背景の指定を行えば良いって事らしい。

改めて dd に対して、下記の CSS を適用。

dd.mir{
        background: url(powered.gif) center center no-repeat;
        width: 137px;
        height: 32px;
}