「Movable Type WEBデザインの新しいルール」

3-10「背景画像を利用する」の手順2で、ヘッダにロゴつきの背景画像を与えています。この画像にトップページへのリンクを設定する方法を紹介します。

書籍に掲載している方法では画像にリンクを設定できないため、img 要素をテンプレートモジュール「ヘッダー」に設定します。またそれにあわせて、スタイルシートも設定します。
手順2を行わず、その代わりに以下の2つのタイプのうち、いずれかの設定を行ってください。

１．シンプルタイプ

ヘッダー（抜粋）

<div id="header"> <a href="<$MTBlogURL$>" accesskey="1"><img src="<$MTBlogURL$>images/logo.png" alt="ロゴ" title="xxxのトップページへ" /></a> </div>

スタイルシート（メイン）

/* ヘッダ */ #header { border-bottom: 1px solid #bed5b4; height: 120px; width: 800px; overflow: hidden; /* 表示領域を超えた画像を非表示にする */ }

この方法は簡単ですが、h1 要素が存在しないので、SEO的には不利かもしれません。

２．SEOを考慮したタイプ

こちらは h1 属性も含んでいます。ただし、画像サイズがヘッダ表示領域と一致している必要があります。
サンプルサイトのヘッダー表示領域（800px × 120px）に合わせた画像ファイル（logo_800x120.png）を用意しましたので、ダウンロードしてお使いください（ファイル名は ダウンロード後、logo.png に修正してください）。

logo_800x120.png

ヘッダー（抜粋）

<div id="header"> <div><p><a href="<$MTBlogURL$>" accesskey="1"><img src="<$MTBlogURL$>images/logo.png" alt="ロゴ" title="xxxのトップページへ" /></a></p></div> <h1 id="blog-name">First Weblog</h1> </div>

スタイルシート（メイン）

/* ヘッダ */ #header div { position: relative; } #header div p { position: absolute; top: 0; left: 0; }

３．注意事項

• img 要素の alt 属性（画像が表示されない場合の代替テキスト）は必須です。
• img 要素の title 属性を記述しておけばヘッダにマウスをポイントした時にツールチップが表示されます。

それではよろしくお願い致します。