ヘッダーにブログと別の画像リンクを追加

そうだ、hのテキストにして要素をブロックにしてはみ出させてリンク、画像はCSSで背景にすればいいやん。テンプレート書き直しは同じだけど、画像用意しなくて済むわぁ。

XHTML

<!--ヘッダー部分を2カラムに書き換え-->
<div id="banner">

<div id="banner-inner" class="pkg">
<div id="banner-header1">
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2 id="banner-description"><$MTBlogDescription$></h2>
</div>
<div id="banner-header2">
<h2><a href="http://mk-box.com/">M+KBOX/フリー素材集</a></h2>
</div>
</div>
</div>  

CSS

/* #banner-header2は#bannerに使っている画像の位置に合わせて配置 */
#banner-header1 {
float: left;
}
#banner-header2 {
float: right;
height: 54px;
width: 100px;
margin-top: 42px;
margin-right: 14px;
}
#banner-header2 h2 a:link {
display: block;
height: 54px;
width: 100px;
text-indent: -5000px;
}

これで出来た〜。

・・・出来たけど・・・出来たけど・・・MacのIEで見たらメタメタです。

素直にカラム分けはやめて画像を作り直してimgにブログタイトルを回り込ませました。