よくタイトル部分を画像に挿しかえているブログを見かけますよね、
まとめサイトなどに多いでしょうか。
画像のタイトルは訪問者にブログの印象を残すことができます、
今回はそんなブログのタイトル(ヘッダー)を画像に変更する方法を解説します。

ヘッダー画像を用意する
まずはヘッダー画像を用意します、
サイズはそれほど気にしなくても良いですが800X300ぐらいが良いでしょう。

画像は自分で描いたり素材として配布しているページから頂いたりします、
有名どころでは絵師さんを募集して描いてもらっているブログもありますね。

ヘッダー素材配布サイト
MATERIAL!
ブログ ヘッダー画像 無料

ヘッダーを画像に挿し変える
画像が用意できたらまずアップロードします、
FC2ブログであれば管理画面のファイルアップロードからアップロードしましょう。

アップロードが完了したら次はテンプレートの設定よりHTMLの編集を行います。

まずは<!--▼▼ ヘッダー ▼▼-->と書かれている部分を探します(テンプレートによって名称が異なることもあります)

このブログのテンプレートの場合このようになっていました。


<!--▼▼ ヘッダー ▼▼-->
<div id="header_outline">
<div id="header_body">
<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>">
<div class="top_search">
<form action="./" method="get">
<input type="text" size="20" name="q" value="" maxlength="200" />
<input type="submit" value=" 検索 " />
</form>
</div>
<div class="intro"><%introduction></div>
</div><!--/header-->
</div><!--/header_outline-->
<!--▲▲ ヘッダー ▲▲-->



そして<h1><a href="<%url>"><%blog_name></a></h1>の部分を
<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="http://~" border="0" /></a></h1>
に書き換えます(http://~の部分には画像のURLが入ります)

あとは更新を押せば画像が適用されますので
ブログより確認してください。


トラックバック先URL:http://10plate.blog44.fc2.com/blog-entry-54.html