blog::tani.masaru

SEOの観点でメニューの中でテキストは使いたいけど、メニュー自体は画像にして見栄えを良くしたい。そんな要望にどう答えるのがいいのか、考えてみる。画像置換とか言われる話。手法としては、CSSで「text-indent: -9999px;」として、とりあえず文字を左の方に押し込んで見えなくする。

• メニュー１
• メニュー２
• メニュー３

<style type="text/css"><!--
ul#menu-sample {
 width: 600px;
 height: 25px;
 margin: 0px;
 padding: 0px;
}
ul#menu-sample li {
 list-style-type:none;
 text-align: center;
 float: left;
}
ul#menu-sample li a {
 display:block;
 float: left;
 background-repeat: no-repeat;
 background-position: left top;
 width: 200px;
 height: 25px;
 margin: 0px;
 padding: 0px;
 color: #000000;
 text-decoration: none;
 text-indent: -9999px;
}
ul#menu-sample li#item01 a{
 background-image: url(http://livedoor.blogimg.jp/tani_masaru/imgs/f/0/f0a23068.png);
}
ul#menu-sample li#item02 a{
 background-image: url(http://livedoor.blogimg.jp/tani_masaru/imgs/c/3/c30384c2.png);
}
ul#menu-sample li#item03 a{
 background-image: url(http://livedoor.blogimg.jp/tani_masaru/imgs/1/6/1693c65b.png);
}
ul#menu-sample li a:hover {
 color: #FFFFFF;
 background-position: left bottom;
}
--></style>
<ul id="menu-sample">
<li id="item01"><a href="#"><span>メニュー１</span></a></li>
<li id="item02"><a href="#"><span>メニュー２</span></a></li>
<li id="item03"><a href="#"><span>メニュー３</span></a></li>
</ul>

画像置換の方法としては、かなりメジャーな「text-indent:-9999px」。でも、これってどうなの？というのはある。つまり表示はされているが意図的に見えないようにするという点では「背景色と同じ文字色」にしたり、「フォントサイズを1px」にするのと同じことである。

【目次】
1. CSSとリストタグを使ってメニューを作る（準備編）
2. CSSとリストタグを使ってメニューを作る（基礎編）
3. CSSとリストタグを使ってメニューを作る（カスタマイズ編）
4. CSSとリストタグを使ってメニューを作る（カスタマイズ編２）
5. CSSとリストタグを使ってメニューを作る（カスタマイズ編３）