アメブロトップの画像はどうやって表示させている？

質問

アメブロトップの画像はどうやって表示させている？

アメブロトップの画像はどういう技術的方法で表示させてるんでしょうか？
ソースを読んでもよくわかりませんでした。
クリックするとリンク先に飛ぶけど、画像としては認識されてないみたいです。
わかる方がいたら、解説をお願いします。

回答No.1

zeff · ベストアンサー

text-indent:-9999px;
ですね。

HTMLを見ただけでは判らないので、
ソースの表示から
http://usrcss.ameblo.jp/skin/templates/33/○○○.css
となっているアドレスを見てみてください。

/* ---------- header : ブログタイトル部分 ----- */
#header{
width:800px;
height:400px;
background:url(トップ画像.jpg);
}
#header h1,
#header h2{
padding:0;
margin:0;
}
#header h1{
text-indent:-9999px;
}
#header h1 a{
display:block;
width:800px;
height:400px;
/*\*/
overflow: hidden;
/**/
}
#header h2{
display:none;
}

文字のインデントをはるか向こうへやってしまうことで、
本当は<h1>～</h1>にテキストがあるんだけど消えてしまったようにし、
背景画像にリンクが張られているように見せかける手法です。

<img>でやるべきだろうし画像を非表示にすると何もなくなってしまうので
どうかな？と思いますがamebaでは普通に使われていますね。
またgoogleがこれを検索エンジンスパムと判定する、という話もあります。

お礼

なるほどよくわかりました。cssで制御しているんですね。
しかも-9999px指定なんてbuggyなことをやってるので、あまり良くないですね。
ちなみにhtml部分はこうなってて、これだけ見てたのではわからないですね・・・

<!--headerTop-->
<h1><a href="http://ameblo.jp/mihoshiraishi/"><!-- google_ad_section_start(name=s2, weight=.1) -->白石美帆 オフィシャルブログ Powered by Ameba<!-- google_ad_section_end(name=s2) --></a></h1>
<h2><!-- google_ad_section_start(name=s2, weight=.1) -->白石美帆 オフィシャルブログ Powered by Ameba<!-- google_ad_section_end(name=s2) --></h2>

ともあれ素直にimgタグで指定してもらいたいです。