MT4xカスタマイズ：ヘッダー画像(2)

　ヘッダーの画像は、スタイルシートに、ヘッダーのバックグラウンド画像として、指定する...

ということは、前回の「ヘッダーを変更する」でお分かりいただけたかと思います。

　一般的には、背景画像を設定しておいて、190行目のタイトル指定で、上下のマージンを変えて表示位置を調整します。

#header-content {
    width: 725px;
    min-height: 72px;
    margin: 20px 0 100px 20px;
}

#header-name {
    color: #083c54; 
    font-family: "century gothic", futura, arial, helvetica, "hirakakupro-w3", osaka, "ms pgothic", sans-serif;
    font-size: 28px;
    font-weight: bold;
}

　CSSのマージン指定は、「上、右、下、左」または「上下、右、左」「上下、左右」となっています。

　この場合ですと、上から20px、右は０、下から100px、左が20px ということになります。

　ただし、このサイトのようにタイトル文字をデザイン的に処理している場合は、タイトル文字の表示を無効にしておいて、その代わりにロゴを表示するように指定します。

　前処理として、ロゴ画像を作り、それを画質劣化の少ないPNG形式で保存して、ヘッダー画像と同じフォルダにFFFTPなどのFTPソフトでアップロードしておきます。画像形式はJPGでもいいです。

　そのうえで、CSSのヘッダー記述の下に、次のような指示を付け加えます。

#header img {
 margin-top: 50px;
 margin-left: 200px;
 }

#header a {
 text-decoration: none;
}

　ロゴの表示位置は、ご自身のヘッダー画像に合わせて、後からマージンを調整してください。

　それと、タイトル文字とロゴ画像が重複しないように処置をしておきませんといけませんね。

　タイトルの記述を削除してしまえば、楽でいいのですが、ＳＥＯ的にはタイトル行を削除するのは問題があります。それで、196行目で

#header-name {
    color: #083c54; 
    font-family: Verdana,;
    font-size: 10px;
    font-weight: normal;
    text-indent: -9999px;
    outline-width: 0;}

　最後の２行を付け加えて、タイトル文字がヘッダー部に表示されないようにしておきます。

　ここまでは下準備です。

　ヘッダー部のHTML指定でロゴ表示をしていませんので、ロゴは表示されません。

　ヘッダーにロゴを指定するには、Ver.3ではインデックステンプレートを編集すればOKでしたが、

MT4xではヘッダーモジュールを編集するのです。

　例によって、管理画面から、「デザイン」→「テンプレート」選択します。

　画面右側に「クイックフィルタ」というフィールドがあります。

　その中ほどに、赤丸で囲んだ「テンプレートモジュール」がありますので、これをクリックして下さい。

　次の画面が出てきます。

　ヘッダーモジュールが一番下にあります。

　クリックすると、ヘッダー部のｈｔｍｌとエントリー部の最初の部分がつながった形で記述されています。ヘッダーの記述は24行目から始まります。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

<div id="header">

 <div id="header-inner">

 <div id="header-content"><MTIf name="main_index">

 <h1 id="header-name"><$MTBlogName encode_html="1"$></h1>

 <a href="<$MTBlogURL$>" accesskey="1"><img src="http://nantoka.com/images/logo.png" alt="ロゴ" width="200px" height="30px"></a>

 <h2 id="header-description"><$MTBlogDescription$></h2>

<MTElse>
<div id="header-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a>
</div>
<div>
<a href="<$MTBlogURL$>" accesskey="1"><img src="http://nantoka.com/images/logo.png" alt="ロゴ" width="200px" height="30px"></a>
</div>
<div id="header-description"><$MTBlogDescription$>
</div>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

　 header-name の後ろに、ロゴ画像を指定します。

　この例では、ヘッダー画像と同じフォルダにはなっていませんで、ルートディレクトリにimages というフォルダを作り、そこにロゴ画像をアップロードしています。

　どこにおいても、フォルダ指定がしてあればＯＫです。

　これで、タイトルが画像で表示され、タイトル文字は表示されなくなりました。

　ただし、このサイトのように背景画像が暗いところにロゴ画像を重ねると、アウトラインがやや目立ちます。

　このやり方が本道なのですが、やってみるとアウトラインが気になりました。

　それで、私の場合は背景画像にロゴも組み込んだ形で、表示しています。

　この場合困るのは、タイトル文字にリンクを貼って、どのページからでもトップページに戻れるサイトナビゲーションが使えなくなるという点ですね。

　これは、パンくずをヘッダー下に置いて、トップページに戻れるようにする方法とか、あります。

　今回はとりあえずの処置として、インデックスページ・アイコンを作り、それにトップページのリンクを貼って、ヘッダーの中に表示させてみました。

　パンくずが、何となくウザイと思ったものですから。