サイドメニューの一部を折りたたむ
ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ（非表示にする）ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。
本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは Movable Type です。
下のスクリーンショットは「最近のエントリー」を折りたたんでみた完成イメージです。
折りたたみ用のリンクについては、リストのタイトル部分をリンクにする代わりに、リストの一番下に「続きを読む」のリンクを表示する方式にしています。この方がユーザビリティ上好ましいと思われるためです。
このカスタマイズは以前頂いたご質問のひとつで、実現困難ということでうやむやにしてしまってましたが、先日公開された Counter プラグインを用いることで可能になりました。
１．Counter プラグインの設定
Counter プラグインを Movable Type にインストールしてください。プラグインの詳細は配布サイトまたは Counter プラグインの記事をご覧ください。
２．スクリプトの追加
「追記文章の折りたたみ」で利用しているリスト2.1 のスクリプトを <head> ? </head> の間（できれば </head> の直前）に設定します。または前後の script 要素を削除して、外部ファイル（showhide.js とか）にしても構いません。
お詫び：リスト 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>- リスト 2.1 追記文章の折りたたみ用スクリプト
３．部分折りたたみ用メニューを設定する
部分折りたたみ用メニューを表示したいテンプレートに、リスト 3.1 ?リスト 3.4 のお好きなリストを追加してください。表示するリスト数を変更する方法については５項をご覧ください。
３．１ 最近のエントリー
<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.1 「最近のエントリー」用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.2 「最近のコメント」用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.3 「最近のトラックバック」用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>- リスト 3.4 「月別アーカイブリスト」用MTタグ
４．CSS設定
「続きを読む ≫」および「≪ 続きを隠す」のリンクに class 属性 "list_more" を設定してますので、適宜お好みのプロパティを追加してください。ここではリスト 4.1 のように margin プロパティで上下のマージンのみを設定しています。
.list_more { margin:5px 0; }- リスト 4.1 CSS
５．表示数を変更する
リスト 5.1 の下記の赤色部分を変更してください。
： <MTCounterIfEqual value="6"> ： （略） ： <MTCounterIfMore value="5"></div></MTCounterIfMore> ：- リスト 5.1 表示数を変更する場合の変更箇所
「上方に表示されている数字 - 1」がデフォルトで表示される数になります。下方の数字は上の数字から -1 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。
