背景画像へのリンク

質問

CSSで背景画像をリンクさせているのですが
文字が出てきて困っています。

ソースは以下の通りです。
文字が出ないようにするにはどうしたらいいのでしょうか。

<div id="side">
<div class="menu_content">
<ul class="menu">
<li class="menu_top"><a href="index.html">トップページ</a></li></ul>
</div>
</div>

.menu_content li{display:block;
text-indent:-9999px;
font-size:0px;
width:206px;height:68px;
text-indent:-9999px;}

li.menu_top a{display:block;
width:406px;height:128px;
text-indent: -9999px;
background:url("css/menu_top.gif") bottom left no-repeat;}

回答No.2

sh_hirose

>この方法はわかるんですがどうしてもソースでは文字表示にしたくてどうにかやり方を探しているのですが……。原因がわからないと気持ち悪いのもあります。
SEO対策のためですか？

No.1の方のを借りて・・・
<div id="side">
<div class="menu_content">
<ul class="menu">
<li class="menu_top"><span style="visibility: hidden;
">トップページ</span><a href="index.html"><img src="css/menu_top.gif" alt="トップページ" width="横幅" height="縦幅" /></a></li>
</ul>
</div>
</div>

このようにするとか。

お礼

お返事が遅くなってすみません。
ありがとうございます。sh_hiroseさんの案でいってみます。
今回はSEOではなくて携帯でも見られるページのためだったのですが
ちょっと無理なようなので画像に切り替えてみます。

回答No.1

mat-21

こんにちは。はじめまして。
ご質問の件で、あえて画像を背景にしているのは、何かご事情があるのでしょうが、この場合、画像にリンクをしたほうが良いかと思いますが。。。

<div id="side">
<div class="menu_content">
<ul class="menu">
<li class="menu_top"><a href="index.html"><img src="css/menu_top.gif" alt="トップページ" width="横幅" height="縦幅" /></a></li>
</ul>
</div>
</div>

お礼

ありがとうございます。
この方法はわかるんですがどうしてもソースでは文字表示にしたくてどうにかやり方を探しているのですが……。原因がわからないと気持ち悪いのもあります。