画像置換問題その後。
で、あなた今回のリニューアルで例の画像置換問題(CSS有効で画像無効)部分についてはどうしたのという話。別ブログの方でもその問題に関する雑感は書いてたんだけど、今回こっちのブログで使った方法はこんな感じ。
今回のデザインは普通のheaderっぽいものがなくて、左上の方がh1だったりするわけですが、とりあえず背景画像(jpg)とロゴ部分の画像(gif)を用意して、こんなソースにしてみました。
XHTMLソース
<h1 id="sitelogo">
<a href="http://redline.hippy.jp/">REDLINE MAGAZINE | webデザインに関するさまざまな情報掲載サイト
<img src="http://redline.hippy.jp/images/temp/logo_01.gif" alt="REDLINE MAGAZINEトップページへ" width="330" height="63" /></a>
</h1>
CSSソース
h1に指定している#sitelogo部分で背景を表示して、hタグ内のaタグの位置を指定。その後hタグ内のimgタグの位置を左上に合わせてテキストの上へ。
#sitelogo{
width:459px;
height:313px;
background: url(images/temp/sitelogo_bg.jpg) no-repeat;
}
#sitelogo a{
width:330px;
height:63px;
position:absolute;
top:213px;
left:101px;
text-decoration:none;
}
#sitelogo a img{
position:absolute;
top:0px;
left:0px;
}
うむ。画像消えても大丈夫っぽい。テキストサイズを可変しても大丈夫(つーか元々bodyのフォントサイズ62.5%だし。)Firefoxの拡張で画像置換してる部分の画像を消したらこんな感じ。
ちなみにまだリニューアル途中なもんで、至る所に怪しいページがありますが、スルーしてくださいまし。
<< CSSで半透明ボックス | CSSで検索フォームの見た目を変更 >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/122