「text-indent:-9999px」の代わりに透明な画像を使って背景を表示させる方法

今スマホ対応のWordPressテーマを作ってます、うかです。

アイコンなんかを背景画像として表示させる際、邪魔なテキストを非表示にする方法として、CSSで「text-indent:-9999px」を指定する方法をよく見かけます。

「text-indent:-9999px」でアイコンだけを表示

コードを書くとこんな感じ。

<p class="home"><a href="/">ホーム</a></p>

このままだと、「ホーム」という文字が表示されるわけですが、

.home {
	text-indent: -9999px;
	background: url('/img/icon.gif') left no-repeat;
}

こんな感じでCSSを指定してあげることで、-9999pxというありえない範囲まで文字をずらして、ブラウザ上にはアイコンだけが表示されるわけですが、これ、「隠しテキスト」として扱われてGoogle様に嫌われるんじゃないか?なんて見方もあるようです。

このケースでの「text-indent:-9999px」は、検索エンジンを欺くためではなく、デザイン上、閲覧者にとって好ましいと思ってやってるわけで、Googleにガタガタ言われる筋合いはねーよ(゚Д゚#)ゴルァ!…と言いたいところなんですが、天下のGoogle様を怒らせる可能性があるとなると、それはそれはビビってしまうわけです。

「text-indent:-9999px」の代替手段

で、この代わりになる方法はないかと探してみたら、ありました。

表示させたくない文字を、透明な画像のalt属性に埋め込んでしまうという方法。

コードを書いてみると、

<p><a href="/"><img alt="ホーム" src="/img/spacer.gif" width="30" height="30"></a></p>

これだと、透明な画像が表示されている状態=その下にある背景だけが見える状態です。

.home {
	width: 30px;
	height: 30px;
	background: url('/img/icon.gif') center no-repeat;
}

で、その背景をこんな感じで指定してあげれば、透明な画像の下にあるアイコンが表示されるという仕組み。

同じ画像に異なるalt属性を当てるというのが、text-indentと何が違うんだYo!と個人的には思ったりもしたんですが、元記事のタイトルにある「YouTubeも採用」という文字を見て、これはありかも!と思った次第です。はい。単純です。

もっとスマートなやり方はないもんかねぇ…

パソコンから見るためのサイトを作る場合は、文字とアイコンを一緒に表示させるようなデザインを考えればいいんでしょうけど、スマートフォン対応のサイトの場合、ディスプレイの大きさに制限があることもあって、アイコンだけを表示させたいケースは多いかと思います。

私も今、スマートフォン用のWordPressテーマを作ってまして、そこにアイコンだけ表示させるのに、text-indentを使う以外の方法はないかとググった結果が、この記事のとおり。

ま、複数のアイコン画像を作ってそれを直接imgタグで読み込んであげればいいだけのような気もするんですが、なんか「イマドキ」じゃない感じでして。(ほら、CSS Spriteとか使ってみたいじゃないですかw)

誰もが「これはいい!」と思えるようなスマートな方法、他にないもんですかねぇ…。