SEO的には良くないと言われている「text-indent: -9999px」ですが、必要な場合があり、もしくは、コードの改変が面倒なので・・・使うケースがあったりします。
Webフォントなどを駆使すればなんとかなるケースもありますが、思った通りのデザインにはならないので、未だに-9999pxにお世話になることもあるんじゃないでしょうか。
text-indent: -9999pxにお世話になるケース？
- h1で囲まれたロゴ
SEO的にはimgタグの画像にして会社名などはaltが良いとされていますが、サイト名でもある会社名などのimgタグをh1タグに囲みそれがSEO的にOKかどうかは不明です。そもそも、どういう状態がOKかという定義もあいまいですがｗ - wp_nav_menuで出力したメニューを画像メニューにしたい
wordpressのmenuに画像項目を追加できるように加工したかったのですが、思ったより面倒なので・・・
しかし、デスクトップや今どきのスマホでは問題ない範囲だと思うのですが、古いスマホなどではこの-9999pxの描写のせいでパフォーマンスが悪くなってしまうケースもあるようです。そこで、ネットで-9999pxの代替方法を見つけましたので皆様に紹介します。
元ネタ：REPLACING THE -9999PX HACK (NEW IMAGE REPLACEMENT)
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
よくあるtext-indent: -9999pxは下記のような感じです。「outline:none;」があるのはFirefoxなどでクリックした際に-9999pxのテキストまで点線の線が伸びてしまうのを防止するためです。
h1#site-title a {
display: block;
width: 250px;
height: 80px;
background-image: url(/hogehoge/images/logo.png);
background-repeat: no-repeat;
outline:none;
text-indent: -9999px;
}
これを下記のようにできるようです。
h1#site-title a {
display: block;
width: 250px;
height: 80px;
background-image: url(/hogehoge/images/logo.png);
background-repeat: no-repeat;
outline:none;
/* alternative text-indent: -9999px; */
text-indent: 100%;
white-space: nowrap;
overflow:hidden;
}
そもそも、いまどき「text-indent: -9999px」は良くない考え方だと思いますので、上記の「-9999pxの代替方法」であってもなるべくなら使用しない方がよいと思いますが、どうしてもという時にご参考になれば幸いです。