前回の続きで

今度はブログページの一番上にあるタイトルを
画像に置き換えてしまう方法を紹介するが

このカスタマイズは
ブログのテンプレートによって見栄えが悪くなる場合もある
どういう場合かというと
画像の上にタイトル文字が表示されるように
スタイルシートで設定されているテンプレートの場合だ

それとこの方法でやると
ブログの説明文も表示されなくなるので
その場合は別途自分で文字をいれなければなくなる
まあ紹介文が表示されなくともよいのであれば別にかまわないが

まず画像に置き換える方法を説明する前に
準備段階として「コメントアウト記述」について説明する

「トップページ」「個別記事」「アーカイブ」の部分に関しては
HTMLという言語で書かれているが
無効にしたい部分をコメントをいれる為に用意されている
「コメントアウト記述」することで
あとで元にもどしたい場合の為に残しておける

では「コメントアウト記述」の方法だが
実に簡単で

始まり：　<!--
終わり：　　-->

で挟むだけになる

たとえば
<img src="http://www.hoge.ne.jp/title.jpg">
という部分をコメントアウトして残したい場合なら

<!--
<img src="http://www.hoge.ne.jp/title.jpg">
-->

とすればOKだ

それではカスタマイズ箇所だが
テンプレートは前回と同じもので説明するので
話しがわからない場合は前回の記事を参照よろしく

まずは「トップページ」の以下の部分をコメントアウトしよう

<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->

次に緑色の部分のみコピーしてコメントアウトの下へ貼り付け
文字部分を画像に置き換える
前回同様にアップロードしておいた画像を使用するのであれば
< img src="自分のブログのアドレス/画像ファイル">
というHTMLタグを以下のように間にいれることになる

<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><；img src="画像へのURL"></a></h1>

といった感じで
続けると以下のようになっているはずだ

<!--
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><%BlogTitle%></a></h1>
-->
<h1 class="blogtitle"><a href="<%BlogUrl%>" accesskey="1"><img src="画像へのURL"></a></h1>

以上、タイトル文字を画像に置き換える方法を紹介したが
このブログの文字も画像に置き換えてあるので
確認してみてほしい

それといろいろカスタマイズしたいのであれば
テンプレートにカスタマイズしたいものを登録し
そちらをいじることをオススメする