忍者：ヘッダーにタイトル画像（ロゴ等）を入れる

[ HTMLからタイトル一部に画像を入れる方法 ]



元のHTMLタグから、現在タイトル文字を指定している、<h1 id="BlogTitle">～</h1>の間を少し変更します。



<div id="HeaderBase">

<header>

<div id="HeaderInner">

  <!--if_not_entry-->

<h1 id="BlogTitle"><a href="<!--$g_url-->"><!--$g_title--></a></h1>

  <!--/if_not_entry-->



赤い文字の<!--$g_title-->場所をimgタグを使ってロゴの画像データが保存されているリンク先に指定する。

（ロゴの画像は「ファイルアップロード」から事前にアップしておきます。リンクのアドレスを調べるには、保存したロゴ画像をマウスで右クリックをして「Inspect Element」（Firefox）でリンクアドレスがわかります。）



<h1 id="BlogTitle"><a href="<!--$g_url-->"><img src="http://file.cglabo.blog.shinobi.jp/Logo.png" alt="logo"></a></h1>



に変更です。

---

[ CSSからタイトル全体を変える方法 ]



元のCSSヘッダコードから、background: --- ; を追加する。



#Header {

margin-left: 10px;

padding: 60px 0 20px;

text-align: right;

}



URLにリンク先を指定。



#Header {

margin-left: 10px;

padding: 60px 0 20px;

background: #333333 url(http://file.cglabo.blog.shinobi.jp/Logo.png) no-repeat center bottom scroll;

text-align: right;

}