text-indent:-9999pxでテキスト飛ばさなくてもテキスト非表示にして画像に置換できる方法

text-indent:-9999pxでテキスト飛ばして画像に置換する方法を使い続けてきました@delaymaniaです。

この手法がよろしくないとずっと言われ続けてきましたが、代替案を全く調べてませんでした。

先ほど良さそうな代替案を見つけたのでご紹介します。

タイトルロゴやナビゲーションに良く使われている手法

text-indent:-9999pxでテキスト飛ばして画像に置換する方法はタイトルロゴやナビゲーションに良く使われている手法です。

たとえばこんな感じの書き方をします。

#site-title{
background-image : url("./images/delaymanialogo.png");
text-indent:-9999px;
}

僕はこれで、マウスオーバーしたときに画像が切り替わるようにする使い方が好きだったんですよ。

ただ、表示されている画面の外側とはいえ、9999px分の領域を使う分パフォーマンスも良くないそうで、さらにはGoogleにSEOスパムだと思われてしまう可能性もあるとのことから、使わない方がいいと言われてるんですよね。

で、この手法の代替案として見つけたのがこちら。

上記のどちらのサイトでも紹介されてるソースはこれです。

#site-title{
background-image : url("./images/delaymanialogo.png");
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}

正直white-space:nowrap;とか使ったことないのでなんのこっちゃよく分かりませんが、これをこのまま書いたらいけました。

ちなみに、white-space:nowrap;はdisplay: block;でもいけるみたいです。

【参考サイト】

そもそもimgタグでもいいっちゃいい

最初からテキストを入れないで、こうやってimgタグを入れちゃってもいいんですよね。

<h1><a href=".index.html"><img src="./images/delaymanialogo.png" width="500" height="80" alt="delaymania.com" /></a></h1>

altにテキスト入れておけば問題ないし。

マウスオーバーしたときの挙動は、画像を半透明にすることで回避します。

a:hover {
opacity: 0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
}

WEBフォントに置き換えるっていう手もある

他にも「ロゴをWEBフォントにするパターン」もあります。

僕はいずれこれをやろうと思ってます。

frasmというサイトで実装されてます。

最後に

当面は最初に紹介したものでやっていってみようと思います。

オリジナルテーマを作ったらその時は後者の２つのいずれかを使うつもりです。

何かほかにいい方法見つけたらご紹介しますね。

そして、逆に何かいい方法を知ってる方がいたら教えてください。