text-indentでテキストを消す代わりに使っている背景画像を表示する方法(youtubeも採用)

WEB制作

もはや太古の昔から存在した錯覚に陥っているtext-indent:-9999px;でテキストを消して背景画像を表示するという方法ですが、どこでも同じような議論はされてきているらしく、これってSEO的にどうなん?って話はやっぱり耳にします。

結果僕は「サイトの内容に関係あるテキストであれば消しても問題ない」と思っている派で、Google先生のお話だと隠しテキストがユーザーの為ならOKで、検索エンジンのためならNGってことでOK?

ただ、画像の内容と CSS や alt 属性による代替テキストが完全に一致していなければならないわけではありません。前回の記事 に も書きましたように、代替テキストが、ユーザーに読ませることを想定し、ユーザーにとって有益なものであると考えられるものであれば ( 例えばテキストブラウザや、テキスト読み上げソフトをご利用のユーザーのために書かれたものである場合 ) 、問題はありません。

http://googlewebmastercentral-ja.blogspot.com/2009/12/google.html

 

でも、個人的にはtext-indentの-9999って嫌いなんですよね。ずっと僕も使ってきたので、自分で言うのもなんですが、なんか裏技感たっぷりで、違う方法あれば移行したいとずっと思っていました。

で、つい先日たまたまようつべ先生のコードを開いて色々見てたら思った以上にtext-indentの記述が少ない、CSS SpriteをYoutubeが採用してたのは有名な話だったんで、そりゃさぞかし大量のtext-indent記述があるんじゃろうと思っていたのですが、text-indentの変わりにHTML上には大量の

[html]http://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif[/html]

の何もないGIF画像ファイルの記述。さて、これはいったい何だろうと、とても回転の遅い頭で考えてみたら、透明画像をおいて、その画像の背景に対して背景画像を表示してるのですね。

確かに、この方法ならtext-indentなんか使わずに背景画像を表示させることが可能、ということで早速このサイトで試してみました。

 

このサイトのロゴ「バンクーバーのうぇぶ屋」のHTMLは

[html]<h1 id=”logo”><a href=”/” class=”bg_parts”><img src=”/_/images/pix.gif” alt=”バンクーバーのWEB屋” /></a></h1>[/html]

と記述。画像の読み込み先は透明GIF(透明GIFとか書くと一昔前のspacer.gifを思い出しますね。)

さて、お次はCSS。

[css]
.bg_parts{
background:url(/_/images/bg_parts.png) no-repeat;
display:block;
}

header#wrapHead h1#logo a{
background-position: 0 -315px;
width: 440px;
height: 101px;
float:left;
margin:50px 0;
}
[/css]

こんな感じ。

ちなみに、bg_partsのクラスはCSS Spriteの読み込み画像。一回一回背景URL指定するのも面倒なので、CSS Spriteを使う時はこのクラスを読むようにしてます。(これも以前ようつべ先生から学びました)

 

要するに、text-indentの代わりに透明GIFを使うという方法だった訳ですね。まぁ、種明かしすれば「へ~」って感じの方法ですが、個人的にはtext-indentよりは好きです。

 

あ、でもこれでGoogleスパムの心配ゼロって言うつもりはありません。結局GIFにaltを設定していて、画像は透明なんてオチなので、ヘタすればスパム扱いかもしれませんが、上記のGoogle先生の言うことが本当なら、サイトの内容に沿っていれば別に使っても問題ないでしょうから、もはや個人の好みの問題かと思っています。個人的にはtext-indentでテキストぶっ飛ばす方法よりは綺麗に収まってる感じがして好きですという話でした。

Pagetop