[MT5]ナビゲーションのロールオーバー画像をページごとに切り替える

ナビゲーションでページごとにロールオーバー画像を切り替えるときのソースです。
使うたびに忘れるので、メモ。

ソースは、「ナビゲーション」の名前でテンプレートモジュールとして保存し、インデックスやアーカイブにインクルードさせるのが良いと思います。

また、画像の名前は、それぞれ以下とします。
■「nav_01.gif」 : 通常時（マウスオフ）
■「nav_01_on.gif」 : ロールオーバー

ロールオーバー用のJSは色々とあるのですが、こちらのものが大変便利で重用させていただいてます。

1.「HTMLヘッダー」のテンプレートに、以下のソース（宣言文）を埋め込む

<mt:SetVars>
title=<mt:BlogName encode_html="1" />
page_title=<mt:PageTitle encode_html="1" />
main_index=1
archive_template=1
</mt:SetVars>

HTMLヘッダーはMTテンプレートのデフォルト名です。
それぞれ名称が異なると思いますので、お使いの<head>用のテンプレートに埋め込んでください。

2.「ウェブページテンプレート」のタイトルタグに、以下青色のタグを入れる

このソースは、ページのタイトルを表示するもので、ページタイトルによってロールオーバー画像の表示を切り替えるのに必要です。

3.「ナビゲーション」テンプレートに、以下のソースを記述

<ul id="navigation">
<MTIf name="main_index" value="1"><li><img src="nav_01_on.gif" width="***" height="***" alt="Home" /></li><mt:Else><li><a href="<$MTBlogURL$>"><img src="nav_01.gif" width="***" height="***" alt="Home" class="over" /></a></li></MTIf>
<MTIf name="archive_template" value="1"><li><img src="nav_02_on.gif" width="***" height="***" alt="Archives" /></li><mt:Else><li><a href="<$MTBlogURL$>"><img src="nav_02.gif" width="***" height="***" alt="Archives" class="over" /></a></li></MTIf>
<MTIf name="page_title" like="About"><li><img src="nav_03_on.gif" width="***" height="***" alt="About" /></li><mt:Else><li><a href="<$MTBlogURL$>about.html"><img src="nav_03.gif" width="***" height="***" alt="About" class="over" /></a></li></MTIf>
<MTIf name="page_title" like="Contact"><li><img src="nav_04_on.gif" width="***" height="***" alt="Contact" /></li><mt:Else><li><a href="<$MTBlogURL$>mailform.html"><img src="nav_04.gif" width="***" height="***" alt="Contact" class="over" /></a></li></MTIf>
</ul>

赤字のところを適宜書き換えてご利用ください。

■main_index : トップページ
■archive_template : アーカイブページ
■page_title [About] : About（ウェブページ）
■page_title [Contact] : Contact（ウェブページ）

ウェブページの[About]と[Contact]は、ページタイトルによって書き換えてください。
上記のソースでは、「About」というタイトルのページの時にロールオーバー画像を表示し、それ以外では通常時の画像を表示数するようになっています。

MT | コメント(2) | トラックバック(0)

Comment

キムキム | 2010年9月21日 14:09 | 返信

こちらのページ、非常に参考になりました。
ひとつ質問なのですが、
「1.「HTMLヘッダー」のテンプレートに、以下のソース（宣言文）を埋め込む」
のところの、archive_template=1　のところなのですが、
Blogではない、ウェブサイトの、アーカイブテンプレートは、
ウェブページになっていますが、Blog、ウェブサイト関係なく
archive_template=1　で、ヘッダーに入れればよいでしょうか？
変な質問ですいません。
よろしくお願いします。