2017 06123456789101112131415161718192021222324252627282930312017 08
TOP > カスタマイズ(HTML・CSS) > title - ヘッダーを画像に挿し変えてみよう!(FC2ブログ)

ヘッダーを画像に挿し変えてみよう!(FC2ブログ)

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

ヘッダー画像を用意する
まずはヘッダー画像を用意します、
サイズはそれほど気にしなくても良いですが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



Related Entries
このブログの更新情報をメールでお届けいたします。
メールアドレスをご入力ください。
記事通知ブログパーツ「読んでミー。」


このエントリーをはてなブックマークに追加 このページをはてなブックマークに登録してみる?


Comment is pending approval.
Comment is pending administrator's approval.
[ 2017/05/10 04:08 ] [ 編集 ]
Post a comment












Only the blog author may view the comment.
Trackbacks:
この記事のTrackbacks URL

アクセスカウンター

最新記事
アクセスランキング
[ジャンルランキング]
コンピュータ
31位
アクセスランキングを見る>>

[サブジャンルランキング]
Webサイト作成
1位
アクセスランキングを見る>>


アクセスランキング