REDLINE MAGAZINE | 画像置換問題その後。

画像置換問題その後。

で、あなた今回のリニューアルで例の画像置換問題(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の拡張で画像置換してる部分の画像を消したらこんな感じ。

ちなみにまだリニューアル途中なもんで、至る所に怪しいページがありますが、スルーしてくださいまし。

2007年03月25日 00:16 | Red | パーマリンク