[MT4]オリジナルヘッダ

まずは、見栄えで一番重要な、ヘッダ部分をオリジナルのものに変えてみます。
デフォルトは、ブログのタイトルがテキストになっていますが、これを画像にします。
ただし、ソースコード上はテキストでブログのタイトルを入れておくようにします。

まず、モジュールテンプレート「ヘッダー」ですが、ほとんど変更する必要はありません。
トップページへのリンクのための＜a＞タグが、ブログのタイトルテキストに対してつけられています。今回はテキストの代わりに画像を使うので、ここを変更します。

トップページでは、タイトル部分が h1、その他では、div タグで指定されているので、これに対して＜a＞タグをつけます。

＜mt:If name="main_index"＞
＜a href="＜$mt:BlogURL$＞" accesskey="1"＞
＜h1 id="header-name"＞＜$mt:BlogName encode_html="1"$＞＜/h1＞
＜/a＞
＜h2 id="header-description"＞＜$mt:BlogDescription$＞＜/h2＞
＜mt:Else＞
＜a href="＜$mt:BlogURL$＞" accesskey="1"＞
＜div id="header-name"＞
＜$mt:BlogName encode_html="1"$＞
＜/div＞
＜/a＞
＜div id="header-description"＞＜$mt:BlogDescription$＞＜/div＞
＜/mt:If＞

テキストを画像に差し替えるのは、スタイルシートで行います。
（custom.css で、該当部分を上書き指定します）

元のスタイルシートでは、背景画像の上にサイトのタイトルと概要のテキストが配置されていますが、これを、オリジナルの画像のみにしてテキストを隠します。
ただし、ソースからサイトのタイトルを無くすことはSEO上好ましくないので、スタイルシートで見えないようにします。

ヘッダは、次のクラスで指定されています。
.header-name　（サイトのタイトル）
.header-description　（サイトの概要）

この両方に、custom.css で次のスタイルを追加します。
Text-indent: -9999px;

次に、オリジナルヘッダの背景画像に合わせて、スタイルを調整します。
今回は、ヘッダーの左右センターに1枚絵を配置するので、下記のような指定になります。

#header {
background: #ffdddd url(img/common/header.jpg) no-repeat center 15px;
}
#header-content {
margin: 0px 0px;
}

これでブログタイトルが、表示上は画像、ソースコード上はテキストになります。