カスタマイズ：ブログタイトルを画像にする

ブログタイトルをオリジナルの画像にし、さらにリンクさせる方法です。
てっとりばやく、「自分らしいブログ」になるのでおすすめです♪

1 まず、画像を用意します。
　なれていない方は、テンプレートのデフォルトの幅と同じ横幅の画像を用意すると楽チンです。

2 画像をアップロードします。
　画像一覧で、アップロードしたタイトル画像をクリックすると別ウィンドウが開きます。
　そのアドレスが「画像アドレス」になります。

3 「デザイン」→「オリジナルデザインの登録」画面にいき、「トップページ」の記述を変更します。

↓=====before=====↓

<div id="banner">

<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
<div class="description"><%BlogDescription%></div>

</div>

↓=====after=====↓

<div id="banner">
<a href="<%BlogUrl%>"><img src="画像のアドレス" width="画像の幅" height="画像の高さ" border="0" alt="ブログの名前"></a>
</div>

4 「トップページ」と同じように「個別記事」「アーカイブ」も変更します。

5　「スタイルシート」の記述を変更します。

↓=====before=====↓

#banner,#subbanner{
background:url(/_img/strawberry_water/itigotop01.jpg) top center no-repeat;
padding:0px 0px 0px 0px;
height: 170px;
}

　
↓=====after=====↓

#banner,#subbanner{
width: ○○px;　←画像の幅
height: ○○px;　←画像の高さ　　　　　　　　　　　
border-top : 1px solid #fff;　　←表示くずれを防ぐため (注
border-bottom : 1px solid #fff;
padding: 0px ;
margin: auto;
｝

（注：ブラウザによる「表示くずれ（見え方が違ってくる）」を避けるために、「border」の「top」と「bottom」はあったほうがよいらしいです。
色を目立たない色（白など）にすれば、画面上影響はありません。