データー移行が終了したようなので、デザインをリニューアルしてみた。今回からはブログタイトルも画像にしてみた。

大外の箱である#containerの左上を基準に設定し、絶対値で位置を決めて画像を配置する方法を利用。タイトルを画像化する方法はこれが一番手っ取り早いんじゃないかな〜？とりあえずしばらくはこのデザインで行ってみようかな。

詳しくは続きに書いてみました。

#container内に position: realitive; を追記。この事によりcontainerの左上の座標が原点になる。

次に#logoと言うスタイルを用意する。 #logoは#containerの左上を基準として配置したい位置を決める為のスタイルだ。
例: #logo { position: absolute; top: 0px; left 240px; }

そして用意したロゴ画像をHTMLの<div id="banner">の後に#logoを適用させて貼る。
例:
<div id="logo">
<a href="http://ブログのアドレス"><img src="http://アップロードした画像のアドレス" width="画像の横幅" height="画像の高さ" alt="" border="0" /></a>
</div>

最後に以下の様にblogtitleとdiscriptionを見えなくするスタイルを適用させる。
例:
<span style="display: none">
<h1 class="blogtitle">
<a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1><$BlogDescription$></div>
</span>

以上っ！