【CSS】画像置換の方法を変更してみた : トイレのうず／ブログ

CSS の画像置換とは Javascript を使わずにテキストを画像に置き換えて表示する方法。画像を background に指定する方法が一般的だけれど、印刷で表示されないとか問題もある。

旅のサイトでは主に background でメニュー画像を表示して、テキストを text-indent:-9999px; で画面の外に飛ばす方法をとっていたのだけれど、どうもこの「 text-indent:-9999px; 」がスパム判定されてるっぽい気がするんですよね。旅のサイトを GoogleSiteMap に登録したと同じくらいに Google からのアクセスが減っているのです。画像置換とスパムについては下記サイトが参考になりました。
→ Emotional Web ：画像置換と SEO スパムの境界線

で、代替方法を複数当たってみて、一番よさそうな Apple のサイトで使われている方法に変更してみました。
→ fixture.jp/blog ： Apple サイトに見るグローバルメニューの画像置換手法

●旅サイトのメニュー部分の変更箇所
【変更前】

#menu1 li { 
	float: left;
	width: 63px;
	list-style-type:none;
	text-indent:-9999px;
}
#menu1 a {
	display: block;
	width: 63px;
	height:28px;
	background: url(images/menu.gif) left top;
}

【変更後】

#menu1 li { 
	display:inline;
	list-style-type:none;
}
#menu1 a {
	float: left; 
	width: 63px;
	height: 0;
	padding-top: 28px;
	overflow: hidden;
	background: url(images/menu.gif) left top;
}

テキストを画面外に飛ばすのではなく、 witdh 、 height で指定した枠外にはみ出た部分を非表示にするという方法です。テキストのある a タグに「 height:0 」を設定することにより、表示設定で文字を大きくしたときはみだして見える対策もとられています。

他にもいろいろと方法があるみたいなのでリンクだけ張っておきます。
・小粋空間： CSS の画像置換で画像にリンクを設定する
・ CSS TPIS ：画像置換 -z-index

＊追記＊
IE6 にて表示がおかしかったので、現在は上記方法は使っておりません。また機会がありましたら記事にします。