Blog | ブログ

2006年10月 - Archive

2006.10.09 15:13

画像置換とBIR

画像で作ったタイトルに、
H1タグをつけたいとき。

結構あるかと思います。
いままでの経験上1/2くらいはそんなケース。

普通に、
<h1>

<img src="hogehoge.jpg" alt="●●●">

</h1>

書くのがおそらくベター。

でも、
SEOを意識しだすと、
h1の中にimgタグなんて入れたくなくなります。

どういうことかと言ったら、
googleやYSTがどんな解釈してるかわからないけど、
h1の中にimgがありそのaltに文字を記述する場合と、
h1の中に文字を記述する場合って、
後者の方がいいと思うですよ。

で、
僕は、CSSで、
text-indent: -9999px;
使ってます。

これは、
画像置換っていう
俗称があるのを
つい先ほど知りました。

また、
BIR(Bob Image Replacement)という
テクニックもあるようで、
------------------------------------------------
<style type="text/css">
body {
background:#d3d3d3;
position:relative;
z-index:1;
}
bir {
background:transparent url('image.jpg') top left no-repeat;
height:100px;
width:400px;
}
.bir span {
position:relative;
z-index:-1;
}
</style>
</head>
<body>

<h1 class="bir"><span>Top-Level Text</span></h1>


------------------------------------------------

こんな感じ。

positionと、
z-indexをうまく使っていうようです。

画像置換の際の、
「画像の表示を切ったら何も表示されない」
というデメリットが克服できているそうです。

 

-9999pxは、
結構スパム扱いされるんじゃないかっていう
心配が日に日に増してきていたので、

このBIRは

いいネタ。

でも、
これにも問題はあって、
フォントサイズ大きくしたときに、
「フォントサイズもうまくしていしないと、背景の下からはみ出すことがある。」
「MacIEだと画像が表示されない」
っていうのが気がかり。

それと、
positionの設定と、
z-indexの設定が、
bodyにかかっているのが、
ちょっとやっかいれす。
あと、無駄なspanはできれば書きたくない。

ちょっと悩むなぁ。
BIRはあんま実用的じゃないような気がしてるので、

このまま-9999pxかな。。。