選択されたアーカイブリンクを強調表示する（モジュール化対応版）
サイドメニューにある Monthly Archives および Categories のリンクをクリックした時に該当のリンクを強調表示させるカスタマイズです。前回の記事ではモジュール化されたメニューに対して有効にならかったため全面的に方式を見直し、モジュール化にも対応するようにしました。
今回のカスタマイズはJavaScriptのみを用いてますのでプラグイン等は不要です。
仕組みを簡単に説明しておきます。スタティックなページにJavaScriptを組み込み、MTArchiveTitle の取得を行います。メニューリスト表示後に、同じくスタティックページに組み込んだJavaScript（DOM）を利用して MTArchiveTitle の内容にマッチする年月（またはカテゴリー名）のアンカータグを導き出し、アンカーの属性にスタイルを追加します。
以下カスタマイズ方法です。
１．テンプレートの設定
１．１ Monthly Archives を変更する場合
日付アーカイブテンプレートのサイドメニューにある月別アーカイブ（"Monthly Archives"というタイトルのタグ）の設定されている直下に青色のタグおよびスクリプトを挿入します。リストは公開テンプレートを例にしています。なおリストの表示内容（日本語表示／英語表示）によってスクリプトが異なりますのでご注意ください。
まずリストを日本語表示（X年X月）にしている場合です。
<div class="sidetitle">
Monthly Archives
</div>
<div class="side" id="monthlylist">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]<br/>
</MTArchiveList>
</div>
<script type="text/javascript">
<!--
var data = "<$MTArchiveTitle$>";
var year = data.substring(0,4);
var month = data.substring(12,14);
var nodes = document.getElementById('monthlylist').getElementsByTagName('a');
for (i = 0; i < nodes.length; i++) {
var a = year + "年" + month + "月";
if(nodes[i].innerHTML == a){
nodes[i].setAttribute("class","selectedlink");
nodes[i].setAttribute("className","selectedlink"); // for IE
}
}
//-->
</script>次にリストを英語表示（January 2005 等）にしている場合です。
<div class="sidetitle">
Monthly Archives
</div>
<div class="side" id="monthlylist">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]<br/>
</MTArchiveList>
</div>
<script type="text/javascript">
<!--
var data = "<$MTArchiveTitle$>";
var nodes = document.getElementById('monthlylist').getElementsByTagName('a');
for (i = 0; i < nodes.length; i++) {
if(nodes[i].innerHTML == data){
nodes[i].setAttribute("class","selectedlink");
nodes[i].setAttribute("className","selectedlink"); // for IE
}
}
//-->
</script>上記の id属性名を使用中の場合は、こちらの属性名を変更してください。
月別アーカイブをモジュール化（日付アーカイブテンプレートより php または MTInclude タグを用いてインクルード）している場合は、スクリプトをインクルードしている行の直下に設定します。
なお、サイドメニューの折りたたみを利用されている方はそちらの id属性名を用いますので、先の
<div class="side" id="monthlylist">の設定は不要です。ただし現在設定されている id属性名と一致するように、リスト内の赤字部分を適宜修正してください。
前記事の繰り返しになりますが本設定は日別アーカイブページにも適用されます。例えば月別アーカイブと日別アーカイブが同じ「日別アーカイブテンプレート」を利用する設定になっていて（デフォルトではそのようになっています）、カレンダーのリンクが日別アーカイブページになっている場合、カレンダーのリンクをクリックした先のページで該当月が強調表示されます。
１．２ Categories を変更する場合
カテゴリー・アーカイブテンプレートのサイドメニューにあるカテゴリーアーカイブリスト（"Categories"というタイトル）の設定されている直下に青色のタグおよびスクリプトを挿入します。リストは公開テンプレートを例にしています。
<div class="sidetitle">
Categories
</div>
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<script type="text/javascript">
<!--
var data = "<$MTArchiveTitle$>";
var nodes = document.getElementById('categorylist').getElementsByTagName("a");
for (i = 0; i < nodes.length; i++) {
if(nodes[i].innerHTML == data){
nodes[i].setAttribute("class","selectedlink");
nodes[i].setAttribute("className","selectedlink"); // for IE
}
}
//-->
</script>上記の id属性名を使用中の場合は、こちらの属性名を変更してください。
サブカテゴリー表示の場合はデフォルトで設定されているタグの
<div id="categories">を利用しますので、
<div class="side" id="categorylist">の設定は行わず（何か設定されていればそのままでOK）、赤字部分を "categories" に修正してください。スクリプト部分は上記の設定を行います。
サブカテゴリーリストの折りたたみのカスタマイズをされている方は、本スクリプトがサブカテゴリーリスト用のスクリプトの後方に配置されるように設定してください。サブカテゴリーリスト用のスクリプトごとモジュール化されている場合は配置の前後を意識する必要はありませんので、インクルード行の後方に本スクリプトを設定してください。
２．スタイルシートの設定
スタイルシート（styles-site.css）の下記の辺りに青色の設定を追加してください。設定内容はサンプルですので、コメントを参考に内容を適宜修正してください。
当サイトではカテゴリーリストと月別アーカイブおよび日別アーカイブに適用させています。強調表示は行わず、アンダーラインおよび選択状態になるように設定しています。
.side-counter {
font-size:9px;
background: none;
padding:2px;
margin-top:8px;
margin-bottom:25px;
}
a.selectedlink:link,
a.selectedlink:visited,
a.selectedlink:active {
text-decoration: underline; /* リンクに下線を引く場合 */
color: #006699; /* リンクの色を変える場合 */
font-weight: bold; /* 強調文字にする場合 */
}以上です。カスタマイズ内容に不具合ございましたらご指摘ください。なお動作についてはWindows 2000の
- IE6.0
- Netscape7.1
- FireFox1.0
- Opera7.23
で確認していますが他の環境では未確認ですので情報お待ち申し上げます。
既知のバグで、IEでsetAttribute('class',*)でclass属性の属性値を変更できないという不具合があるため、スクリプト内で setAttribute を2回実行させています（本来はブラウザ種別で分岐させて設定すべきですが）。
メニューをプルダウン形式にされている方は下記のようなスクリプトを配置して、選択月や選択カテゴリーにselected 属性を付与するといいかもしれません。ここではアイデアのみに留めておきます。
<script type="text/javascript">
<!--
var data = "<$MTArchiveTitle$>";
var nodes = document.getElementById('categolylist').getElementsByTagName("option");
for (i = 0; i < nodes.length; i++) {
if(nodes[i].innerHTML.indexOf(data) == 0){
nodes[i].setAttribute("selected","selected");
}
}
//-->
</script>optionタグの前方に設定されたデフォルトの selected は無視されるという認識ですがブラウザによって動作が異なるようであればお許しください。
2005.07.25 追記
Monthly Archives のリストを英語表記にしている場合のカスタマイズ方法を追記しました。
2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。
選択されたアーカイブリンクを強調表示する
サイドメニューにある Monthly Archives および Categories のリンクをクリックした時に該当のリンクを強調表示させるカスタマイズです。
本カスタマイズは下記の記事を参考にさせて頂きました。ありがとうございました。
ここではカスタマイズ方法のみ記しておりますので機能の詳細につきましては参照元の記事をご覧ください。
以下カスタマイズ方法です。なおオリジナルは PerlScript プラグインを利用されていますがここでは php を使ってみました。したがって利用するアーカイブファイルの拡張子が .php になっていることが前提となります。またモジュール化されている場合は正常に動作しませんので予めご了承ください。PerlScriptプラグインを利用される場合は拡張子の制約はありませんので必要な箇所を適宜修正ください。
１．MTTagInvoke のダウンロード
MTExtensions のページより MTTagInvoke をダウンロードしてください（ページ左上に「Download」のリンクがあります）。ダウンロードしたファイルを解凍して MTTagInvoke.pl を plugins フォルダに配置（FTP等によるアップロードを含む）します。
２．Monthly Archives を変更する場合
日付アーカイブテンプレートにあるサイドメニューの Monthly Archives のタグ（下のリスト）の下線部分を削除して、青色のタグを追加してください。例は公開テンプレートのものを利用しています。
<div class="sidetitle">
Monthly Archives
</div>
<MTTagInvoke tag_name="MTSetVar" name="thismonth">
<MTTagAttribute name="value"><$MTArchiveDate format="%Y%m"$></MTTagAttribute>
</MTTagInvoke>
<div class="side">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>">
<a href="<$MTArchiveLink$>"<?php $a ="<$MTGetVar name="thismonth"$>"; $b = "<$MTArchiveDate format="%Y%m"$>"; if ($a == $b) print " style=\"font-weight:bold;\""; ?>>
<$MTArchiveTitle$></a> [<$MTArchiveCount$>]<br/>
</MTArchiveList>
</div>本設定は日別アーカイブページにも適用されます。例えば月別アーカイブと日別アーカイブが同じ「日付アーカイブテンプレート」を利用する設定になっていて（デフォルトではそのようになっています）、カレンダーのリンクが日別アーカイブページになっている場合、カレンダーのリンクをクリックした先のページで該当月が強調表示されます。
３．Categories を変更する場合
カテゴリー・アーカイブテンプレートにあるサイドメニューの Categories のタグ（下のリスト）の下線部分を削除して、青色のタグを追加してください。同じく公開テンプレートのものを例にしています。
３．１ 一括表示
<div class="sidetitle">
Categories
</div>
<MTTagInvoke tag_name="MTSetVar" name="thiscategory">
<MTTagAttribute name="value"><$MTArchiveTitle$></MTTagAttribute>
</MTTagInvoke>
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<a href="<$MTCategoryArchiveLink$>" <?php $a ="<$MTGetVar name="thiscategory"$>"; $b = "<$MTArchiveTitle$>"; if ($a == $b) print "style=\"font-weight:bold;\""; ?>>
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>３．２ サブカテゴリー表示
<div class="sidetitle">
Categories
</div>
<MTTagInvoke tag_name="MTSetVar" name="thiscategory">
<MTTagAttribute name="value"><$MTArchiveTitle$></MTTagAttribute>
</MTTagInvoke>
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>">
<a href="<$MTCategoryArchiveLink$>" <?php $a ="<$MTGetVar name="thiscategory"$>"; $b = "<$MTArchiveTitle$>"; if ($a == $b) print "style=\"font-weight:bold;\""; ?> title="<$MTCategoryDescription$>">
<MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>サブカテゴリーについては MTTopLevelCategories で括られているか、モジュール化されていないとクリックしたカテゴリー自体が表示されませんのでご注意ください。
いずれも表示部分を、
style=\"font-weight:bold;\"に統一していますが、
class=\"hogehoge\"に変更し、スタイルシートへ
.hogehoge {
font-weight:bold;
}と設定することも可能です。
2005.01.11 追記
モジュール化されている場合は正常に動作しない旨を追記しました。
2005.01.12 追記
モジュール化対応版を公開しました。
