基本的にQEはノンジャンルなブログなので、いろいろなことを取り上げます。今回はQEでも利用しているMovable Typeのプラグイン「Related Entries」を利用し、「関連するエントリー」の件数を絞って表示するという項目に挑戦してみました。

　まず最初の前提条件として、The blog of H.Fujimotoさんで配布されている「Related Entries」と「VarExpand」の2つのプラグインを利用します。
　QEでも初期からお借りしている「Related Entries」プラグインなんですが、この頃気づいたのが関連するエントリー記事を絞り込む方法がない！ということでした。数が少ないといいのですが、それが多くなってくるとすごーく長くなります・・・。それを短くコンパクトにするのが今回の目標です。

1.関連するエントリーを一覧表示する。
　基本的なおさらいとして、「ブログ記事」アーカイブで"関連するエントリーを出力する方法"を先に見てみたいと思います。多分一番簡単な記述方法は以下の通り。

 <ul>
 <mt:entryRelatedEntries>
  <li><a href="<$mt:entryPermalink$>"><$mt:entryTitle$></a></li>
 </mt:entryRelatedEntries>
 </ul>

　このように記述することで、関連するエントリーのパーマリンクが新しいものから順に表示されます。

　そこで問題なのが、件数です。先も言いましたが、件数が多くなれば多くなるほど下へどんどん伸びて行ってしまいます。<mt:entries>タグでよく使う「lastn="*"（最新の*件を表示）」や「limit="*"（最大で*件表示）」といったオプションに対応していないようなので、ここでは変数を用いて問題を解決しました。

2.規定数以上のエントリーを表示しないようにする。
　言い方を変えれば「最新の関連エントリー*件を表示する」方法ですね。「VarExpand」と条件分岐を用いて記述すると、

 <mt:setVar name="count" value="0">
 <ul>
 <mt:entryRelatedEntries>
 <mt:setVarFormula name="count" formula="($count)+1">
 <mt:if name="count" le="5">
  <li><a href="<$mt:entryPermalink$>"><$mt:entryTitle$></a></li></mt:if>
 </mt:entryRelatedEntries>
 </ul>

　となります。
　1行目で関連するエントリーの件数をカウントする変数countを用意。
　4行目で関連エントリー1つに対し変数に1を加えます。
　5行目でこの記事の順番が5番目以下のときのみ一覧に表示する、という仕組みです。当然、5行目の「le="*"」の*を好きな数字に変えることで表示エントリーの数を自由に設定することができます。

3.規定数以上のエントリーをちぢめて表示する。
　上の2の応用版です。（QEではこれを使っています）はじめの2つのプラグインに加え、CSS Lectureさんで紹介されているjQueryを用いたアコーディオン式メニュー（クイックリンクで使っているアレです。）も活用し、規定数より多い関連エントリーを縮めて表示する方法です。まずブログ記事アーカイブには以下のように記述します。

 <mt:setVar name="count" value="0">
 <ul>
 <mt:entryRelatedEntries>
 <mt:setVarFormula name="count" formula="($count)+1">
 <mt:if name="count" eq="6">
 </ul>
 <dl class="navi">
  <dt>もっと関連するエントリーを見る場合はクリック！</dt>
  <dd>
   <ul></mt:if>
    <li><a href="<$mt:entryPermalink$>"><$mt:entryTitle$></a></li>
 </mt:entryRelatedEntries>
 <mt:if name="count" ge="6">
  </dd>
 </dl>
 </mt:if></ul>

　少し長くてゴチャゴチャしていますが、これでちゃんと動作します。さっきと同じように関連エントリーの数を順番に数えますが、
　5行目で関連エントリーの数が6個になった時点でアコーディオンの題名を表示。
　13行目で関連エントリーの数が6個以上だった場合にアコーディオンを閉じるタグを入力。仕組みを聞いてしまえば「あーそんなんか」と思うほどシンプルですけど。

　そして最後にHTMLのヘッダーにアコーディオン式開閉メニューのスクリプトを挿入すれば完成します。（スクリプトの「navi*」を「navi」に直すこと！）また、表示を緩やかにするために、スクリプトの末尾の4行を以下のように書き換えると美しい。

~途中から~
 	$(".navi dt").click(function(){
 		$(this).next().slideToggle(1600);
 		});
 });

　3行目の「1600」を任意の数字に変えることで開閉スピードを変えることができます。（値が小さいほど早く開く。）