新しい技術とか古い技術とか関係なく今のhtmlを考える。

画像によるテキスト置き換えに関して

最近話題になっている「text-indent:-999px;を使うとペナルティーになる」という噂。
ちまたでは「webフォント使ったらいいじゃん！」って話になっているように感じますが、今のところ日本語でのwebフォント使用には若干難があるように見えます。(試したことはないが。。日本語フォント買えって言われたから。。)

じゃあどうしたらいいのさ?

というわけで、ペナルティーを回避する為にどのように対処したらよいのかを自分なりに考えてみました。
※ 個人的に考えたやり方なのでこれが世の中の検索エンジンに受け入れられるかは保障しませぬ。

まあ、テキストを画像で置き換えたい場合、普通に置き換えるならimgタグでhtmlファイルに直接書き込み、テキスト部分はaltに入れとけばいいって話だ。問題は、ロールオーバーさせたい時。 javascriptとかとか使えば出来るけど、なるべく無駄なものは入れたくない。

もういっそのことテキストを入れずにaタグの中身をカラにして背景を適用させるか。

いやいやそんな方法が許される訳がない。 HTML5+CSS3の技術を使えば出来るだろうけど、まだそれをあてにするには時期が早すぎるし。。

とにかく、やってみた。
サンプルコードが枠からはみ出ちゃいましたが(- -;)
コピペしやすさを考えてそのままにしています。

imgタグで初めから仕込んであった画像を操作する　(1)

imgタグでもともとボタンの画像を入れておき、hover時にもともと入っていた画像のwidthを0にし、backgroundでhover時の画像を出しています。

--[ html ]-----------------------

<ul id="p01">
	<li id="bt01"><a href=""><img src="img/bt_01.gif" alt="HOME"></a></li>
	<li id="bt02"><a href=""><img src="img/bt_02.gif" alt="ABOUT"></a></li>
	<li id="bt03"><a href=""><img src="img/bt_03.gif" alt="CONTACT"></a></li>
</ul>

--[ CSS ]------------------------

ul#p01 li a{
	width:91px;
	height:20px;
	display:block;
	margin:0 0 5px 0;
}

ul#p01 #bt01 a{background:url("../img/bt_01_ov.gif") no-repeat;}
ul#p01 #bt02 a{background:url("../img/bt_02_ov.gif") no-repeat;}
ul#p01 #bt03 a{background:url("../img/bt_03_ov.gif") no-repeat;}

ul#p01 a:hover img{
	width:0;
	height:0;
}

imgタグで初めから仕込んであった画像を操作する　(2)

上と似てるけど、今度はhover時にopacityで元画像を消し、backgroundでhover時の画像を出してみた。

--[ html ]-----------------------

<ul id="p02">
	<li id="bt01"><a href=""><img src="img/bt_01.gif" alt="HOME"></a></li>
	<li id="bt02"><a href=""><img src="img/bt_02.gif" alt="ABOUT"></a></li>
	<li id="bt03"><a href=""><img src="img/bt_03.gif" alt="CONTACT"></a></li>
</ul>

--[ CSS ]------------------------

ul#p02 li a{
	width:91px;
	height:20px;
	display:block;
	margin:0 0 5px 0;
}

ul#p02 #bt01 a{background:url("../img/bt01_ov.gif") no-repeat;}
ul#p02 #bt02 a{background:url("../img/bt02_ov.gif") no-repeat;}
ul#p02 #bt03 a{background:url("../img/bt03_ov.gif") no-repeat;}

ul#p02 a:hover img{
	opacity:0;
}

テキストサイズを調整する

aタグの中にテキストを打ちこんでいるが、indentで飛ばすのではなくfont-sizeを0にして見えなくしています。

--[ html ]-----------------------

<ul id="p03">
	<li id="bt01"><a href="">HOME</a></li>
	<li id="bt02"><a href="">ABOUT</a></li>
	<li id="bt03"><a href="">CONTACT</a></li>
</ul>

--[ CSS ]------------------------

ul#p03 li a{
	width:91px;
	height:20px;
	display:block;
	margin:0 0 5px 0;
}

ul#p03 #bt01 a{background:url("../img/bt_01.gif") no-repeat;}
ul#p03 #bt02 a{background:url("../img/bt_02.gif") no-repeat;}
ul#p03 #bt03 a{background:url("../img/bt_03.gif") no-repeat;}

ul#p03 #bt01 a:hover{background:url("../img/bt_01_ov.gif") no-repeat;}
ul#p03 #bt02 a:hover{background:url("../img/bt_02_ov.gif") no-repeat;}
ul#p03 #bt03 a:hover{background:url("../img/bt_03_ov.gif") no-repeat;}

ul#p03 li a{
	font-size:0px;
	text-decoration:none;
}

aタグの中にテキストを消すためのタグを入れる

aタグの中にspanを忍ばせ、これにスタイル(opacity:0;)を掛けることでテキストを見えなくしている。
ボタン自身のスタイルはaタグにかけている。

--[ html ]-----------------------
<ul id="p04">
	<li id="bt01"><a href=""><span>HOME</span></a></li>
	<li id="bt02"><a href=""><span>ABOUT</span></a></li>
	<li id="bt03"><a href=""><span>CONTACT</span></a></li>
</ul>

--[ CSS ]------------------------

ul#p04 li a{
	width:91px;
	height:20px;
	display:block;
	margin:0 0 5px 0;
}

ul#p04 #bt01 a{background:url("../img/bt_01.gif") no-repeat;}
ul#p04 #bt02 a{background:url("../img/bt_02.gif") no-repeat;}
ul#p04 #bt03 a{background:url("../img/bt_03.gif") no-repeat;}

ul#p04 #bt01 a:hover{background:url("../img/bt_01_ov.gif") no-repeat;}
ul#p04 #bt02 a:hover{background:url("../img/bt_02_ov.gif") no-repeat;}
ul#p04 #bt03 a:hover{background:url("../img/bt_03_ov.gif") no-repeat;}

ul#p04 a{
	text-decoration:none;
}

ul#p04 a span{
	opacity:0;
}