サイドメニューの一部を折りたたむ
ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ（非表示にする）ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。
本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは Movable Type です。
下のスクリーンショットは「最近のエントリー」を折りたたんでみた完成イメージです。
折りたたみ用のリンクについては、リストのタイトル部分をリンクにする代わりに、リストの一番下に「続きを読む」のリンクを表示する方式にしています。この方がユーザビリティ上好ましいと思われるためです。
このカスタマイズは以前頂いたご質問のひとつで、実現困難ということでうやむやにしてしまってましたが、先日公開された Counter プラグインを用いることで可能になりました。
１．Counter プラグインの設定
Counter プラグインを Movable Type にインストールしてください。プラグインの詳細は配布サイトまたは Counter プラグインの記事をご覧ください。
２．スクリプトの追加
「追記文章の折りたたみ」で利用しているリスト2.1 のスクリプトを <head> ～ </head> の間（できれば </head> の直前）に設定します。または前後の script 要素を削除して、外部ファイル（showhide.js とか）にしても構いません。
お詫び：リスト 2.1 が正常に表示されておりませんでしたので、修正致しました。
すでに「追記文章の折りたたみ」のカスタマイズを行っている場合は本項をスキップしてください。
リスト 2.1 追記文章の折りたたみ用スクリプト
<script type="text/javascript">
function showHide(entryID, entryLink, htmlObj) {
extTextDivID = ('Text' + (entryID));
extLinkDivID = ('Link' + (entryID));
if( document.getElementById ) {
if( document.getElementById(extTextDivID).style.display ) {
if( entryLink != 0 ) {
document.getElementById(extTextDivID).style.display = "block";
document.getElementById(extLinkDivID).style.display = "none";
htmlObj.blur();
} else {
document.getElementById(extTextDivID).style.display = "none";
document.getElementById(extLinkDivID).style.display = "block";
}
} else {
location.href = entryLink;
return true;
}
} else {
location.href = entryLink;
return true;
}
}
</script>３．部分折りたたみ用メニューを設定する
部分折りたたみ用メニューを表示したいテンプレートに、リスト 3.1 ～リスト 3.4 のお好きなリストを追加してください。表示するリスト数を変更する方法については５項をご覧ください。
３．１ 最近のエントリー
リスト 3.1 「最近のエントリー」用MTタグ
<div class="sidetitle">
Recent Entries
</div>
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="10">
<$MTCounterPlus$>
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkEntry">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Entry','<$MTBlogURL$>',this);return false;">続きを読む ≫</a>
</div>
<div id="TextEntry" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Entry',0,this);return false;">≪ 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>３．２ 最近のコメント
リスト 3.2 「最近のコメント」用MTタグ
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTCounter>
<ul>
<MTEntries lastn="30" recently_commented_on="10">
<$MTCounterPlus$>
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkComment">
<a href="javascript:void(0)" name="<$MTEntryID pad="1"$>" onclick="showHide('Comment','<$MTBlogURL$>',this);return false;">続きを読む ≫</a>
</div>
<div id="TextComment" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Comment',0,this);return false;">≪ 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
<li><a href="<$MTEntryLink$>"><MTEntryTitle></a><ul>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>" title="c<$MTCommentID$>"><MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments></ul></li>
</MTEntries>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>
３．３ 最近のトラックバック
リスト 3.3 「最近のトラックバック」用MTタグ
<div class="sidetitle">
Recent Trackbacks
</div>
<div class="side">
<MTCounter>
<ul>
<MTPings lastn="10">
<$MTCounterPlus$>
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkTrackback">
<a href="javascript:void(0)" name="<$MTPingID pad="1"$>" onclick="showHide('Trackback','<$MTBlogURL$>',this);return false;">続きを読む ≫</a>
</div>
<div id="TextTrackback" style="display: none">
<div class="list_more"><a href="javascript:void(0)" name="" onclick="showHide('Trackback',0,this);return false;">≪ 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
<li><a href="<$MTPingURL$>" target="_blank" title="t<$MTPingID$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>
</div>３．４ 月別アーカイブリスト
月別アーカイブリストは表示月数を制御することができないため、サイト運営が長くなるにしたがってリストが長大になります。そのためリスト全体の折りたたみや、年毎の折りたたみ等を行う訳ですが、この技を使えば「最新×ヶ月分だけを表示」というコンパクトな表示が可能になります。
月が替わり、新しい月でエントリー投稿があった場合、表示月が更新されます。
リスト 3.4 「月別アーカイブリスト」用MTタグ
<div class="sidetitle">
Monthly Archives
</div>
<div class="side">
<MTCounter>
<ul>
<MTArchiveList archive_type="Monthly">
<$MTCounterPlus$>
<MTCounterIfEqual value="6">
</ul>
<div class="list_more" id="LinkMonthly">
<a href="javascript:void(0)" onclick="showHide('Monthly','<$MTBlogURL$>',this);return false;">続きを読む ≫</a>
</div>
<div id="TextMonthly" style="display: none">
<div class="list_more"><a href="javascript:void(0)" onclick="showHide('Monthly',0,this);return false;">≪ 続きを隠す</a></div>
<ul>
</MTCounterIfEqual>
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
<MTCounterIfMore value="5"></div></MTCounterIfMore>
</MTCounter>４．CSS設定
「続きを読む ≫」および「≪ 続きを隠す」のリンクに class 属性 "list_more" を設定してますので、適宜お好みのプロパティを追加してください。ここではリスト 4.1 のように margin プロパティで上下のマージンのみを設定しています。
リスト 4.1 CSS
.list_more {
margin:5px 0;
}５．表示数を変更する
リスト 5.1 の下記の赤色部分を変更してください。
リスト 5.1 表示数を変更する場合の変更箇所
：
<MTCounterIfEqual value="6">
：
（略）
：
<MTCounterIfMore value="5"></div></MTCounterIfMore>
：「上方に表示されている数字 - 1」がデフォルトで表示される数になります。下方の数字は上の数字から -1 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。
エントリー・アーカイブで同一カテゴリーのトラックバックを表示する
Movable Type のエントリー・アーカイブで同一カテゴリーのトラックバックだけを表示するカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。
基礎知識として、エントリー・アーカイブで MTPings タグを普通に利用するだけでは、該当エントリーのトラックバックしか表示されません（アーカイブページに「最近のコメント」「最近のトラックバック」を表示する参照）。そういう訳でプラグインをいくつか試してみましたが、そのまま使うことで表示を満足するものはありませんでした（あったらすいません）。
で、自分でプラグインを作成するスキルもないので、勝手ながら Ogawa::memoranda さんの Recently pinged on Plugin を下記の通り改変させて頂き、表示させることができました。
プラグイン：Recently pinged on Plugin
改変内容：エントリー・アーカイブで同一カテゴリーのトラックバックだけを表示する
プラグインのダウンロード、インストール等につきましては配布元の記事を参照ください。
１．プラグインの修正
recently-pinged-on.pl に下記のパッチをあててください。パッチ適用前にファイルのタブ文字を半角空白8文字に変換してください。
--- recently-pinged-on.pl.bak Tue May 30 01:14:15 2006
+++ recently-pinged-on.pl Tue May 30 01:16:35 2006
@@ -41,7 +41,7 @@
my $blog_id = $ctx->stash('blog_id');
my ($start, $end) = ($ctx->{current_timestamp},
$ctx->{current_timestamp_end});
- my $cat = $ctx->stash('archive_category');
+ my $cat = $ctx->{current_archive_type} eq 'Individual' ? $ctx->stash('entry')->category : $ctx->stash('archive_category');
require MT::TBPing;
my $iter = MT::TBPing->load_iter({ blog_id => $blog_id },
@@ -63,6 +63,7 @@
my $entry = MT::Entry->load($entry_id) or next;
next if $entry->status != MT::Entry::RELEASE();
+ next if !$cat && $ctx->{current_archive_type} eq 'Individual';
next if $cat && !$entry->is_in_category($cat);
next if $start && $end && ($entry->created_on < $start || $entry->created_on > $end);パッチの利用方法が分からない方は、下記の recently-pinged-on.pl の抜粋を参考に、赤色部分を削除して青色の行を追加してください。*1
：
my $blog_id = $ctx->stash('blog_id');
my ($start, $end) = ($ctx->{current_timestamp},
$ctx->{current_timestamp_end});
my $cat = $ctx->stash('archive_category');
my $cat = $ctx->{current_archive_type} eq 'Individual' ? $ctx->stash('entry')->category : $ctx->stash('archive_category');
：
（中略）
：
require MT::Entry;
my $entry = MT::Entry->load($entry_id) or next;
next if $entry->status != MT::Entry::RELEASE();
next if !$cat && $ctx->{current_archive_type} eq 'Individual';
next if $cat && !$entry->is_in_category($cat);
next if $start && $end && ($entry->created_on < $start || $entry->created_on > $end);
：一応確認したつもりですが、改変内容に不備（他のアーカイブで仕様通りに動作しない等）がございましたらご指摘ください。
２．テンプレートの設定
エントリー・アーカイブのサイドバーの任意の位置に「最近のトラックバック」を表示する下記のタグを設定します。これまで表示していた「最近のトラックバック」のタグは削除してください。
あまり差異はありませんが、デフォルトテンプレートと公開テンプレートの2種類を挙げておきます。
２．１ デフォルトテンプレートの場合
<div class="module-archives module">
<h2 class="module-header">Entries of this Category</h2>
<div class="module-content">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="5">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>
</div>２．２ 公開テンプレートの場合
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="5">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
「最近のトラックバック」をエントリ別にまとめて表示する
Tag：[Customize, MovableType, MTCollate, MTPingEntry, SideMenu, Trackback]
Permalink
サイドバーにある「最近のトラックバック（Recent Trackbacks）」の表示は、MTタグの仕様ではトラックバック元（送信サイト）の情報しか表示できません。これにTrackback元記事表示で書いたプラグインを利用することでトラックバック先（受信サイト）のエントリー名等を表示できるようになりますが、エントリーとトラックバックは1：1対応の表示しかできず、「最近のコメント」のようにエントリー別にまとめて表示することができません。
ということで、「最近のトラックバック」をエントリー別にまとめて表示するカスタマイズをご紹介します。ここでは3通りのカスタマイズについて時系列でご紹介します。
それぞれ使っているプラグインが異なりますが、いずれも同じ表示になるように整形しています。なお、ul -li のリスト形式で整形しています（ツリー化表示される場合はサイドメニューのツリー化スクリプト（改）を参考にしてください）ので、その他のタグを利用される場合は適宜修正ください。緑色部分は公開テンプレートを利用した場合に設定するタグです。
機能の詳細につきましては、文中に掲載している元記事を参照ください。
１．MTPingEntry ＆ MTCollate プラグインを使った方法
に基づいています。MTCollate は
の Download をクリックしてダウンロード。ダウンロードしたアーカイブを解凍し MTCollate.pl を plugins フォルダに配置（またはアップロード）します。MTPingEntry は
の PingEntry.pl をクリックしてダウンロード。ダウンロードした PingEntry.pl を plugins フォルダに配置（またはアップロード）します。
サイドバーの任意の位置に下記のタグを設定します。黒字部分はデザインに併せて適宜修正してください。
<MTCollateCollect>
<MTPings lastn="10">
<MTCollateRecord>
<MTCollateSetField name="ping_id"><$MTPingID$></MTCollateSetField>
<MTCollateSetField name="ping_url"><$MTPingURL$></MTCollateSetField>
<MTCollateSetField name="ping_title"><$MTPingTitle$></MTCollateSetField>
<MTCollateSetField name="ping_blog_name"><$MTPingBlogName$></MTCollateSetField>
<MTCollateSetField name="ping_date"><$MTPingDate format="%m/%d %X"$></MTCollateSetField>
<MTPingEntry>
<MTCollateSetField name="entry_key"><MTPings lastn="1"><$MTPingDate format="%y%m%d%H%M%S"$></MTPings></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
</MTPingEntry>
</MTCollateRecord>
</MTPings>
</MTCollateCollect>
<div class="sidetitle">
Recent Trackbacks
</div>
<div class="side">
<MTCollateList sort="entry_key:#:- ping_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>" title="<$MTCollateField name="entry_title" encode_html="1"$>"><$MTCollateField name="entry_title"$></a>
<ul></MTCollateIfHeader>
<li><a href="<$MTCollateField name="ping_url"$>" encode_html="1"><$MTCollateField name="ping_title"$></a><br />
[<$MTCollateField name="ping_blog_name"$>] <$MTCollateField name="ping_date"$></li>
<MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>MTPings の lastn で表示するトラックバック数を指定します。
２．recently_pinged_on プラグインを使った方法
に基づいています。プラグインは、先のページにある recently-pinged-on.zip のリンクをクリックしてダウンロード。ダウンロードしたアーカイブを解凍し recently-pinged-on.pl を plugins フォルダに配置（またはアップロード）します。
サイドバーの任意の位置に下記のタグを設定します。黒字部分はデザインに併せて適宜修正してください。
<div class="sidetitle">
Recent Trackbacks
</div>
<div class="side">
<MTEntries recently_pinged_on="5">
<a href="<$MTEntryLink$>"><$MTEntryTitle$></a>
<ul>
<MTPings lastn="3">
<li><a href="<$MTPingURL$>" rel="nofollow"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</MTEntries>
</div>MTEntries の recently_pinged_on で表示するエントリー数、MTPings の lastn で表示するトラックバック数を指定します。
３．Recents プラグインを使った方法
に基づいています。プラグインは、先のページにある「こちらをクリック」のリンクをクリックして表示された内容を全て選択し、メモ帳等に貼り付け、ファイル名を「Recents.pl」として保存（IEならリンクを右クリックして「対象をファイルに保存」でもOK）。保存した Recents.pl を plugins フォルダに配置（またはアップロード）します。
サイドバーの任意の位置に下記のタグを設定します。黒字部分はデザインに併せて適宜修正してください。
<div class="sidetitle">
Recent Trackbacks
</div>
<div class="side">
<MTPingsRecent lastn="10" ping_sort_order="ascend">
<MTPingsRecentIfEntry><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a>(<$MTEntryDate$>)</MTPingsRecentIfEntry>
<MTPingsRecentIfPing>
<MTPingsRecentHeader><ul></MTPingsRecentHeader>
<li><a href="<$MTPingURL$>"><$MTPingTitle$></a><br />
[<$MTPingBlogName$>] <$MTPingDate format="%m/%d %X"$></li>
<MTPingsRecentFooter></ul></MTPingsRecentFooter>
</MTPingsRecentIfPing>
</MTPingsRecent>
</div>MTPingsRecent の lastn で表示するトラックバック数を指定します。なおこのプラグインは「最近のコメント」表示にも利用することができます。
以上です。このカスタマイズの足跡とご近所サイトの状況ですが、発端は１の
ではないかと思います。この後
とつながり、その後新たなプラグインとして２の
が登場しました。それに伴って
となり、
でご近所サイトに広がっていきました（当サイトでプラグインを紹介するエントリーを書いていましたが先を越されました（笑））。さらにその後、３の
が登場しました。
