label 要素を用いてトラックバックURLを1クリックで選択状態にする
Tag：[Customize, JavaScript, label, MovableType, TrackbackURL, Usability, XHTML]
Permalink
個別エントリーアーカイブに表示されたトラックバックURLを、ドラッグせずに1クリックで選択する方法は既にスタンダードなカスタマイズとして確立していますが、label 要素を加えてさらに取得しやすくしてみました。label 要素は、それで括られた説明文をクリックした時やアクセスキーを押した時、本来の部分をクリックした時と同じ動作をさせる働きをもっています。
デフォルトテンプレートにおけるトラックバックURL表示のHTMLタグは下記のようになっています。
<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff">このエントリーのトラックバックURL:<br />
<$MTEntryTrackbackLink$></p>このタグでは下のような表示になり、トラックバックURLをコピーする場合、マウスでドラッグする必要があります。
- トラックバック
- このエントリーのトラックバックURL:
- http://www.koikikukan.com/cgi-bin/blog/koikikukan/mt-tb.cgi/1216
このタグに対してURL表示部分を input 要素に変更し、さらに onfocus イベントを加えて1クリックでURL全体が選択できるようにします。
<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff">このエントリーのトラックバックURL:<br />
<input tabindex="1" accesskey="x" name="tb_url" value="<$MTEntryTrackbackLink$>" readonly="readonly" onfocus="this.select()" /></p>ここまでが従来のカスタマイズで、テキストエリアのURLを1クリックで選択状態にすることができます。ここでは省略していますがIEのみ有効なコピーボタンをつけるというカスタマイズもあります。
- トラックバック
- このエントリーのトラックバックURL:
input 要素には name 属性が必要です。また tabindex 属性と accesskey 属性の付与が推奨されています。
ここからさらに input 要素に任意の id 属性を追加し、その id 属性を指定する label 要素で説明文「このエントリーのトラックバックURL:」を括ります。
<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff"><label for="tb_url">このエントリーのトラックバックURL:</label><br />
<input tabindex="1" accesskey="x" name="tb_url" id="tb_url" value="<$MTEntryTrackbackLink$>" readonly="readonly" onfocus="this.select()" /></p>これで「このエントリーのトラックバックURL:」の部分をクリックしても選択状態にできるようになります。
- トラックバック
URLの周囲に他の説明文を加えている場合はそこに label 属性を付与することでさらにマウスでURLを狙う精度を低くすることができます。
label 要素に accesskey 属性を付与することで、ALT キー+「accesskey属性で指定した値」で選択することもできます。Movable Type ではデフォルトテンプレート・メインページの検索部分にこのテクニックを用いていますので、そちらも参考にされると良いと思います。
2005.06.17 追記
typo がありました（誤：lable→正：label）ので修正しました。すいません。
プルダウンメニューに表示されたアーカイブリンクの選択状態を保持する
具体的な動作は、プルダウンメニュー化された月別アーカイブリストやカテゴリーアーカイブリストから任意のアーカイブリンクを選択すると、自動的に選択したアーカイブページにジャンプし、ジャンプ先にある同じプルダウンメニューに、選択されたアーカイブリンクを表示します（通常のプルダウンメニューは他のページにジャンプすると選択状態が元に戻ってしまいます）。このカスタマイズを行うことでプルダウンメニューの直感的な操作が可能になります。左の図は月別アーカイブリストから「2004年11月」を選択した後、リンク先のページで2004年11月が選択状態になっていることを示しています。 以下のカスタマイズはJavascriptを外部ファイルにする場合・しない場合の２パターンで記述しています。外部ファイルにしない場合は１項を、する場合は２項を実施してください。 |
サイドバーのカテゴリーアーカイブリストや月別アーカイブリストをプルダウンメニュー（セレクトボックス）にしている場合、プルダウンメニューから選択したアーカイブリンクの選択状態を保持するカスタマイズです。１．JavaScriptを外部ファイルにしない場合のカスタマイズ
１．１ 月別アーカイブリストの変更
テンプレートの「日付アーカイブテンプレート」を選択し、サイドメニューの月別アーカイブ（"Monthly Archives"というタイトルのタグ）が設定されている直下に青色のタグおよびスクリプトを挿入します。
<script type="text/javascript">
<!--
function selectUrl(sel){
if(sel.options[sel.selectedIndex].value){
location.href = sel.options[sel.selectedIndex].value;
}
}
//-->
</script>
<div class="sidetitle">
Monthly Archives
</div>
<div class="side" id="monthlylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$> [<$MTArchiveCount$>]</option>
</MTArchiveList>
</select>
</form>
</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("option");
for (var i = 0; i < nodes.length; i++) {
var selectYear = nodes[i].innerHTML.substring(0,4);
var selectMonth = nodes[i].innerHTML.substring(5,7);
if(year == selectYear && month == selectMonth){
nodes[i].selected = true;
}
}
//-->
</script>
リストは公開テンプレートを例にしていますがデフォルトテンプレートも大体同じです。緑色部分はデフォルトからセレクトボックスへの変更、および選択時に該当URLにジャンプするためのスクリプトです。既にセレクトボックスが設定済みであれば修正は不要ですので必要に応じて修正してください。また赤色で示す id属性名が他で使用中の場合は、異なる属性名に適宜変更してください。
月別アーカイブをモジュール化（日付アーカイブテンプレートより php または MTInclude タグを用いてインクルード）している場合は、スクリプトをインクルードしている行の直下に設定します。緑色のJavaScriptはどちらに記述しても大丈夫です。
なお、サイドメニューの折りたたみを利用されている方はそちらの id属性名を用いますので、先の
<div class="side" id="monthlylist">の設定は不要です。ただし現在設定されている id属性名と一致するように、リスト内の赤字部分を適宜修正してください。サイドメニュー折りたたみ用スクリプトが設定されている場合は、上記スクリプトの後方に配置してください。
上記のリストは、図のように先頭から「yyyy年mm月」と表示されているものを前提にカスタマイズしています。先頭に他の文字列を含んでいる場合や年月が「yyyy/mm」等にしている場合は、
var selectYear = nodes[i].innerHTML.substring(0,4);
var selectMonth = nodes[i].innerHTML.substring(5,7);の赤色部分を修正してください。例えば上の行は「0文字目から4文字目の直前（つまり3文字目）までを取得」という意味です（通常の1文字目はプログラム上「0」と数えます）。
リストをツリー形式にされている場合（例えば該当行のHTMLに月しか表示してない場合）は、先の2行を
var selectYear = nodes[i].value.substring(44,48);
var selectMonth = nodes[i].value.substring(49,51);として、value属性のURL内にある年月を取得するようにします。赤色部分の値は適宜変更してください。
さらに年月以外のoptionタグが存在する場合は、value属性値（つまりURL）の文字列長をチェックして
for (var i = 0; i < nodes.length; i++) {
var selectYear = nodes[i].innerHTML.substring(0,4);
var selectMonth = nodes[i].innerHTML.substring(5,7);
if(nodes[i].value.length == 61) {
var selectYear = nodes[i].value.substring(44,48);
var selectMonth = nodes[i].value.substring(49,51);
if(year == selectYear && month == selectMonth){
nodes[i].selected = true;
}
}
}とすれば良いでしょう。
１．２ カテゴリーリストの変更
テンプレートの「カテゴリー・アーカイブテンプレート」を選択し、サイドメニューのカテゴリーリスト（"Categories"というタイトルのタグ）の設定されている直下に青色のタグおよびスクリプトを挿入します。リストは公開テンプレートを例にしています。緑色部分の意味は月別アーカイブと同様です。
<script type="text/javascript">
<!--
function selectUrl(sel){
if(sel.options[sel.selectedIndex].value){
location.href = sel.options[sel.selectedIndex].value;
}
}
//-->
</script>
<div class="sidetitle">
Categories
</div>
<div class="side" id="categorylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<MTCategories>
<option value="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$> [<$MTCategoryCount$>]</option>
</MTCategories>
</select>
</form>
</div>
<script type="text/javascript">
<!--
var data ="<$MTArchiveTitle$>";
var nodes = document.getElementById('categorylist').getElementsByTagName("option");
for (j = 0; j < nodes.length; j++) {
if(nodes[j].innerHTML.indexOf(data) == 0){
nodes[j].selected = true;
}
}
//-->
</script>
赤色で示す id属性名が他で使用中の場合は、異なる属性名に適宜変更してください。
カテゴリー・アーカイブをモジュール化（カテゴリー・アーカイブテンプレートより php または MTInclude タグを用いてインクルード）している場合は、スクリプトをインクルードしている行の直下に設定します。緑色のJavaScriptはどちらに記述しても大丈夫です。
なお、サイドメニューの折りたたみを利用されている方はそちらの id属性名を用いますので、先の
<div class="side" id="categorylist">の設定は不要です。ただし現在設定されている id属性名と一致するように、リスト内の赤字部分を適宜修正してください。サイドメニュー折りたたみ用スクリプトが設定されている場合は、上記スクリプトの後方に配置してください。
今回サブカテゴリー表示を意識したカスタマイズには対応していませんので予めご了承ください。
１．３ メインページの変更
メインページには月別アーカイブリストやカテゴリーリストに追加したものからJavaScript（青字部分）を除いたものを設定します。また空要素をメニュー先頭に表示する場合は茶色で示したタグを追加してください。青字部分が含まれていると再構築時にエラーになりますのでご注意ください。
月別アーカイブリスト
<script type="text/javascript">
<!--
function selectUrl(sel){
if(sel.options[sel.selectedIndex].value){
location.href = sel.options[sel.selectedIndex].value;
}
}
//-->
</script>
<div class="sidetitle">
Monthly Archives
</div>
<div class="side" id="monthlylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<option value="">選択してください</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$> [<$MTArchiveCount$>]</option>
</MTArchiveList>
</select>
</form>
</div>カテゴリーリスト
<script type="text/javascript">
<!--
function selectUrl(sel){
if(sel.options[sel.selectedIndex].value){
location.href = sel.options[sel.selectedIndex].value;
}
}
//-->
</script>
<div class="sidetitle">
Categories
</div>
<div class="side" id="categorylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<option value="">選択してください</option>
<MTCategories>
<option value="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$> [<$MTCategoryCount$>]</option>
</MTCategories>
</select>
</form>
</div>２．JavaScriptを外部ファイルにする場合のカスタマイズ
２．１ 外部ファイルの設定
下記のスクリプトを「selectbox.js」というファイル名で保存し、ローカル・サイト・パスに配置（またはアップロード）してください。ファイルはブログで用いている文字コード（UTF-8等）で保存してください。
外部ファイルは日別アーカイブ/カテゴリー・アーカイブ共通に使用します。
selectbox.js
function selectUrl(sel){
if(sel.options[sel.selectedIndex].value){
location.href = sel.options[sel.selectedIndex].value;
}
}
function addSelectForMonthly(data){
var year = data.substring(0,4);
var month = data.substring(12,14);
var nodes = document.getElementById('monthlylist').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
var selectYear = nodes[i].innerHTML.substring(0,4);
var selectMonth = nodes[i].innerHTML.substring(5,7);
if(year == selectYear && month == selectMonth){
nodes[i].selected = true;
}
}
}
function addSelectForCategory(data){
var nodes = document.getElementById('categorylist').getElementsByTagName("option");
for (var i = 0; i < nodes.length; i++) {
if(nodes[i].innerHTML.indexOf(data) == 0){
nodes[i].selected = true;
}
}
}２．２ テンプレートの設定（１）
日別アーカイブテンプレート/カテゴリー・アーカイブテンプレートの<head>～</head>部分に下記のタグを設定します。
<script type="text/javascript" src="<$MTBlogURL$>selectbox.js"></script>この設定で実行し、JavaScriptファイルが正常に取得できなかった場合は <$MTBlogURL$> の部分を適宜変更してみてください。
２．３ テンプレートの設定（２）
日別アーカイブテンプレートの月別アーカイブリストおよび、カテゴリー・アーカイブテンプレートのカテゴリーリストに下記の青色部分を追加します。
日付アーカイブテンプレート
<div class="sidetitle">
Monthly Archives
</div>
<div class="side" id="monthlylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$> [<$MTArchiveCount$>]</option>
</MTArchiveList>
</select>
</form>
</div>
<script type="text/javascript">
<!--
addSelectForMonthly("<$MTArchiveTitle$>");
//-->
</script>カテゴリー・アーカイブテンプレート
<div class="sidetitle">
Categories
</div>
<div class="side" id="categorylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<MTCategories>
<option value="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$> [<$MTCategoryCount$>]</option>
</MTCategories>
</select>
</form>
</div>
<script type="text/javascript">
<!--
addSelectForCategory("<$MTArchiveTitle$>");
//-->
</script>
緑色部分はデフォルトからセレクトボックスへの変更箇所を示しています。既にセレクトボックスが設定済みであれば修正は不要ですので必要に応じて修正してください。また上記の id属性名を他で使用中の場合は青色部分、および select.js の赤色部分を異なる属性名に変更してください。
２．４ メインページの変更
メインページには月別アーカイブリストやカテゴリーリストに追加したものからJavaScript（青字部分）を除いたものを設定します。また空要素をメニュー先頭に表示する場合は茶色で示したタグを追加してください。青字部分が含まれていると再構築時にエラーになりますのでご注意ください。
月別アーカイブリスト
<div class="sidetitle">
Monthly Archives
</div>
<div class="side" id="monthlylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<option value="">選択してください</option>
<MTArchiveList archive_type="Monthly">
<option value="<$MTArchiveLink$>"><$MTArchiveTitle$> [<$MTArchiveCount$>]</option>
</MTArchiveList>
</select>
</form>
</div>カテゴリーリスト
<div class="sidetitle">
Categories
</div>
<div class="side" id="categorylist">
<form>
<select name="select" onChange="selectUrl(this.form.select)">
<option value="">選択してください</option>
<MTCategories>
<option value="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$> [<$MTCategoryCount$>]</option>
</MTCategories>
</select>
</form>
</div>３．スタイルシートの設定
スタイルシートの .side が定義されている下に追加します。
.side select {
font-family: Verdana, Arial, sans-serif;
color:#666666;
background: ffffff;
font-size:9px;
}内容はデザインに応じて適宜変更してください。なお background を設定しない場合、Netscape7.1 ではセレクトボックスの背景色が暗くなりましたのでご注意ください。
以上です。今回のカスタマイズについては現在のところ
- OS：Windows2000 SP4
- ブラウザ：IE6.0/Netscape7.1/Sleipnir1.66/Firefox1.0/Opera7.23
で動作の正常性を確認しております。なお、前回のサンプルでは selected 属性の設定を
nodes[i].setAttribute("selected","selected");としておりましたが、Mozilla系のブラウザで正常に動作しないことが判明したため、
nodes[i].selected = true;に変更致しました。
この場をお借りしてお詫びと訂正に代えさせていただきます。
2005.03.04 追記
メインページの設定について追加しました。
2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。
選択されたアーカイブリンクを強調表示する（モジュール化対応版）
サイドメニューにある 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 追記
モジュール化対応版を公開しました。
