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

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

しかしこの手法を使うのはあまりよろしくないと言われています。

というわけで、画像置換のときに使える代替案をご紹介します。

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

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");
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

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

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

最初からテキストを入れないで、こうやって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フォントにするパターン」もあります。

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

【追記】2014年11月にデザイン変更した時点で実装しました。ロゴをWEBフォントにしてます。

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

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

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

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