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 にて表示がおかしかったので、現在は上記方法は使っておりません。また機会がありましたら記事にします。

タグ：,

関連する記事