小粋空間  -  a cheap joke and a play on words site

当サイトで公開しているサイドメニューの折りたたみを、Movable Type 4.2 のデフォルトテンプレートで利用する場合の設定方法を記します。

サンプルも用意しましたのでお試しください（最近のブログ記事／最近のコメント／タグクラウド／カテゴリ／月別アーカイブが折りたためます）。

デフォルトテンプレートの折りたたみサンプル

１．スクリプトのダウンロード・アップロード

スクリプトのページから、折りたたみ用スクリプト menufolder.js のリンクを右クリックして「名前をつけてリンク先を保存」等でダウンロードして、同じ名前でローカルPCに保存してください。

ダウンロード後、menufolder.js をブログのディレクトリ（ブログのメインページとなる index.html があるディレクトリ）にアップロードしてください。

２．テンプレートの修正

ブログ管理画面より「デザイン」→「テンプレート」をクリックし、「HTMLヘッダー」テンプレートモジュールを選択して、下記の青色部分を追加します。

<meta http-equiv="Content-Type" content="text/html; charset=<$mt:PublishCharset$>" />
<meta name="generator" content="<$mt:ProductName version="1"$>" />
<link rel="stylesheet" href="<$mt:Link template="styles"$>" type="text/css" />
<link rel="start" href="<$mt:BlogURL$>" title="Home" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="<$mt:Link template="feed_recent"$>" />
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
<script type="text/javascript" src="<$mt:BlogURL$>menufolder.js"></script>
<$mt:CCLicenseRDF$>

３．ウィジェットの修正

ブログ管理画面より「デザイン」→「ウィジェット」をクリックし、折りたたみたいウィジェットを選択します。「最近のブログ記事」の場合、次の青色部分を追加します。

<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="10">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header fold-header" id="entryname">最近のブログ記事</h3>
    <div class="widget-content" id="entrylist">
        <ul>
        </mt:EntriesHeader>
            <li><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
<script type="text/javascript">
<!--
FoldNavigation('entry','off',false);
//-->
</script>
</mt:If>

赤色部分は追加したときに、ウィジェットによって書き換える部分です。FoldNavigation の第2パラメータの off は、ページを表示したときに、リストを閉じた状態で表示します。リストを開いた状態で表示したい場合は、on を設定してください。

id 属性値とFoldNavigation の第1パラメータは、ウィジェットによって変更します。「最近のコメント」の場合は次のようになります。

<mt:If tag="BlogCommentCount">
    <mt:Comments lastn="10" sort_order="descend">
        <mt:CommentsHeader>
<div class="widget-recent-comments widget">
    <h3 class="widget-header fold-header" id="commentname">最近のコメント</h3>
    <div class="widget-content" id="commentlist">
        <ul>
        </mt:CommentsHeader>
            <li><strong><$mt:CommentAuthor$>:</strong> <$mt:CommentBody remove_html="1" words="10"$> <a href="<$mt:CommentLink$>" title="<mt:CommentEntry><$mt:EntryTitle$></mt:CommentEntry>へのコメント">続きを読む</a></li>
        <mt:CommentsFooter>
        </ul>
    </div>
</div>
        </mt:CommentsFooter>
    </mt:Comments>
<script type="text/javascript">
<!--
FoldNavigation('comment','off',false);
//-->
</script>
</mt:If>

id 属性値は、ページ内に同じ値を設定してはいけない（例えば、id="hoge" という記述がページ内に2ヶ所以上あってはいけない）ので、設定するパーツによって id 属性値を変更してください。

また、「アーカイブ（月別アーカイブ）」ウィジェットを折りたたむ場合、タイトル部分（下記）から、

<h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>

リンクを削除して、class 属性と id 属性を追加してください（下記）。

<h3 class="widget-header fold-header" id="monthlyname"><$mt:ArchiveTypeLabel$> アーカイブ</h3>

４．スタイルシートの修正

ブログ管理画面より「デザイン」→「テンプレート」をクリックし、「スタイルシート」インデックステンプレートを選択して、下記を最後に追加してください。

.fold-header a {
    width: 100%;
}
.fold-header a:link,
.fold-header a:visited {
    display: block;
    padding-top: 2px;
    padding-bottom: 2px;
    text-decoration: none;
}
.fold-header a:hover {
    color:#fff;
    background: #AB0404;
    text-decoration: none!important;
}

配色は適宜修正してください。

これですべてを再構築すれば、サンプルのように折りたためるようになります。

JavaScript ライブラリ Accordion によるサイドメニューの折りたたみです。

Accordion は、いくつかのメニューをグループ化し、あるメニュータイトルをクリックすることで、グループ内の特定のメニューリストだけを表示し、他のメニューリストを閉じるライブラリです。下のサンプルへのリンクをクリックして、表示されたサンプルのサイドメニューをクリックしてみてください。

サンプル

ここでは配布テンプレートのサイドバーを例にカスタマイズ方法を紹介します。Movable Type を例にしていますが、JavaScript 外部ファイルのアップロードが可能なブログサービスやブログツールであれば他のテンプレートでも適用可能です。

なお、Accordion は縦方向の折りたたみ以外に、横方向の折りたたみや入れ子にした折りたたみも可能です。

１．ライブラリのダウンロード

Accrodion のサイトにアクセスして、「Download the code!」をクリック。

「Get it here Accordion v2.0」の部分のリンクをクリックすればダウンロードが開始します。必要に応じてドネーションをしてください。

２．ライブラリのアップロード

ダウンロードしたアーカイブを展開し、accordion\javascript 配下にある、次の3つのファイルをブログディレクトリにアップロードします。ここでは javascript フォルダごとアップロードします。

• javascript/prototype.js
• javascript/effects.js
• javascript/accordion.js

３．テンプレートの設定（ヘッダー）

ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「ヘッダー」を選択し、head の終了タグ直前に下記の script 要素を追加します。prototype.js をすでに使用している場合は、一番上の1行は不要です。

<script type="text/javascript" src="<mt:BlogURL />javascript/prototype.js"></script>
<script type="text/javascript" src="<mt:BlogURL />javascript/effects.js"></script>
<script type="text/javascript" src="<mt:BlogURL />/javascript/accordion.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);
function loadAccordions() {
    var leftAccordion = new accordion('links-left');
    var rightAccordion = new accordion('links-right');
}
</script>
</head>

関数 loadAccordions の中に記述している 2 行のパラメータ（赤色）は、折りたたみのメニュー全体を括っている id 属性を指定します。サンプルテンプレートでは、左サイドバー全体を括っている dl 要素の id 属性 links-left と、右サイドバー全体を括っている dl 要素の id 属性 links-right を、それぞれ指定しています（青色部分）。

<div id="links-left-box">
<dl id="links-left">
...中略...
</dl>
</div>
 
<div id="links-right-box">
<dl id="links-right">
...中略...
</dl>
</div>

４．テンプレートの設定（サイドバー）

ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「サイドバー（またはサイドバー2）」を選択し、折りたたみを行いたいサイドバーの class 属性値に accordion_toggle と accordion_content を追加します。
下は「最近のエントリー」に設定した例です。

変更前

<MTIf name="module_recent_entries">
<dt class="sidetitle">
Recent Entries
</dt>
 
<dd class="side">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>

変更後

<MTIf name="module_recent_entries">
<dt class="sidetitle accordion_toggle">
Recent Entries
</dt>
 
<dd class="side accordion_content">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>

５．スタイルシートの変更

ブログ管理画面より、「デザイン」-「テンプレート」-「スタイルシート」を選択し、次の内容を追加します。

.accordion_toggle {
    display: block;
    margin-bottom: 5px;
}
.accordion_toggle_active {}
.accordion_content {
    overflow: hidden;
    padding-bottom: 10px;
}

なお、サンプルでは、次の既存のセレクタから赤色部分を削除して、上記セレクタの設定値の競合を回避しています。

.sidetitle {
    margin-top: 3px;
    border: 1px solid  #666666;
    color: #333;
    background: #f6f6f6;
    text-align: center;
    font-size: 75%;
    line-height: 2.0;
}
 
/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    background: none;
    color: #333;
    font-size: 75%;
    line-height: 1.5;
}

これでブログ全体を再構築して、Accordion による折りたたみが動作すれば完成です。

６．特定のメニューをデフォルトで表示する

特定のメニューをデフォルトで表示する方法は、下記の記事を参照してください。

Accordion で特定のメニューをデフォルト表示する

2008.08.03
loadAccordions の設定を一部見直しました。

2008.09.02
６項を追加しました。

当サイトで公開している「サイドメニューの折りたたみ」について、配布テンプレート（XHTML 1.0 Strict 版）のサイドバーに定義リスト（dl/dt/dd）を使用している場合のカスタマイズについてご質問を頂きましたので、本エントリーにて説明致します。

div 要素の場合の設定例

これまでの、div を使用した場合の設定（青色部分を追加）は下記の通りです。

<div class="sidetitle" id="categoryname">
Categories
</div>
 
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a> [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
 
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>

MT4(またはMT3.x XHTML1.0 Strict 版)の設定例

カテゴリーリスト

ここではカテゴリーリストを例に挙げてますが、どのリストについても、script 要素を dd 要素で括ってください。これを行わないと valid な XHTML になりません。

また、script 要素はリストに示す通り、MTIfArchiveTypeEnabled の内側に設定してください。外側でも問題ありませんが、内側の方がより妥当です。

<MTIf name="module_category_archives">
<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle" id="categoryname">
Categories
</dt>
 
<dd class="side" id="categorylist">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>

アーカイブリスト

デフォルトテンプレートのサイドバーにあるアーカイブリストの構造（+定義リスト）を適用している場合、script 要素を dd 要素で括ることに加え、各アーカイブリスト（月別アーカイブリスト・月別カテゴリアーカイブリスト・ユーザーアーカイブリスト・月別ユーザーアーカイブリスト）の id 属性はすべて同じものを使用して構いません。これは各アーカイブ（またはメインページ）で表示されるリストがいずれかひとつであるためです。

<MTIf name="module_monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle" id="archivename">
Monthly Archives
</dt>
 
<dd class="side" id="archivelist">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_category-monthly_archives">
   <MTIfArchiveTypeEnabled archive_type="Category-Monthly">
   <dt class="sidetitle" id="archivename"><$MTArchiveTitle$>: Monthly Archives</dt>
   <dd class="side" id="archivelist">
   <MTArchiveList archive_type="Category-Monthly">
      <MTArchiveListHeader>
      <ul>
      </MTArchiveListHeader>
         <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
      <MTArchiveListFooter>
      </ul>
      </MTArchiveListFooter>
   </MTArchiveList>
   </dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
   </MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_author-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Author-Monthly">
   <dt class="sidetitle" id="archivename"><$MTAuthorDisplayName$>: Monthly Archives</dt>
   <dd class="side" id="archivelist">
   <MTArchiveList archive_type="Author-Monthly">
      <MTArchiveListHeader>
      <ul>
      </MTArchiveListHeader>
         <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
      <MTArchiveListFooter>
      </ul>
      </MTArchiveListFooter>
   </MTArchiveList>
   </dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>
 
<MTIf name="module_author_archives">
<MTIfArchiveTypeEnabled archive_type="Author">
   <dt class="sidetitle" id="archivename">Author Archives</dt>
   <dd class="side" id="archivelist">
   <MTArchiveList archive_type="Author">
      <MTArchiveListHeader>
      <ul>
      </MTArchiveListHeader>
         <li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
      <MTArchiveListFooter>
      </ul>
      </MTArchiveListFooter>
   </MTArchiveList>
   </dd>
<dd>
<script type="text/javascript">
<!--
FoldNavigation('archive','on',true);
//-->
</script>
</dd>
</MTIfArchiveTypeEnabled>
</MTIf>

上記の例では script 要素がやや冗長なので、リストの一番最後（MTIf の外側）にひとつだけ設置しても良いでしょう。
その場合、何らかのページでアーカイブリストがひとつも表示されなくても、JavaScript エラーは出ないはずです。

Movable Type 3.x のデフォルトテンプレートにサブカテゴリーリストの折りたたみを適用する場合のカスタマイズを紹介します。
このエントリーではツリー化する場合としない場合の2通りを説明します。スクリーンショットはツリー化した場合の完成例です。

１．スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

２．menufolder.js の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認（または修正）してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
 
　　　　　　　：
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
  
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▼';
var closeMarkForSubCategories = '▲';
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

設定内容の詳細は下記の通りです。

subCategoryCount

• 名称：カテゴリーリスト数計算方法
• 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
• 設定値： true：li タグで計数／false：a タグで計数

subCategory

• 名称：サブカテゴリーの折りたたみ有効フラグ
• 用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
• 設定値： true：有効／false：無効

openMarkForSubCategories/closeMarkForSubCategories

• 名称：サブカテゴリーの折りたたみマーク
• 用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
• 設定値：任意の文字（設定したマークを''で括るように）

offsetForTitleAndMarkOfSubcategory

• サブカテゴリーのタイトルとマークのスペース
• 用途：サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
• 設定値：0以上

３．スクリプトのアップロード

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

４．テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください（分からなければとりあえずサンプルのまま貼り付けてください）。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

５．テンプレートにサブカテゴリーリスト表示用タグを追加

ツリー化しない場合は１．１項、ツリー化する場合は１．２項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。

５．１ ツリー化しない場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

５．２ ツリー化する場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色部分は下記を参照して適宜変更してください。

initState

• 名称：初期状態
• 用途：ページを最初に表示した時の折りたたみ状態を指定します
• 設定値： on：開いた状態／off：閉じた状態

またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。

６．スタイルシート変更

ツリー化しない場合は２．１項、ツリー化する場合は２．２項の CSS をスタイルシートに追加してください。

６．１ ツリー化しない場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}

６．２ ツリー化する場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}
ul.tree {
    margin: 0 0 10px 0; /* 全体マージン */
    padding: 0;
    list-style: none;
}
ul.tree ul {
    margin: 0px 0; /* 間隔を空ける時はここを変更 */
    padding-top: 2px; /* インデント部分のパディング */
}
ul.tree li {
    margin: 0; /* 0 以上にすると画像が切れる */
    padding: 4px 0 1px 13px; /* top を大きくすると画像とずれる */
    background-image: url(tree_lst.gif);
    background-position: 2px 0; /* 垂直方向を0以上にすると画像が切れる */
    background-repeat: no-repeat;
    list-style: none;
    line-height: 100%;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    background-position: 2px 0;
    list-style: none;
}

７．ツリー画像のダウンロード

ツリー化する場合は、７項・８項を実施してください。

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ツリー画像のファイルは６項の CSS（青色部分）で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時（またはダウンロード後）、ファイル名は tree_lst.gif に変更してください。

８．画像のアップロード

ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。

以上です。

2010.05.02
タイトルおよび本文の一部にMT3.x向けの記事である旨を追記しました。

ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ（非表示にする）ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。

本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは 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;">続きを読む &#8811;</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;">&#8810; 続きを隠す</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;">続きを読む &#8811;</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;">&#8810; 続きを隠す</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;">続きを読む &#8811;</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;">&#8810; 続きを隠す</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;">続きを読む &#8811;</a>
</div>
<div id="TextMonthly" style="display: none">
<div class="list_more"><a href="javascript:void(0)" onclick="showHide('Monthly',0,this);return false;">&#8810; 続きを隠す</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 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。

サイドメニューの折りたたみカスタマイズで、折りたたみマークに画像（img タグ）を使用できるよう、スクリプトを改変致しました。 とりあえずサンプルを作成しましたのでお試しください。表示されたページの左サイドバーにある「Recent Entries」が対象部分です。

• サンプル1（ブロック要素）
• サンプル2（折りたたみマークにリンク）

改変したスクリプト menufolder.js は下記のリンクよりダウンロードできます。バージョン 6.01（または 6.01en）以降が対応版です。

download

以下、折りたたみマークに画像を用いる場合の設定方法です。スクリプトの基本的な設定内容につきましては、マニュアルまたはサイドメニュー折りたたみの各記事を参照願います。

なお、タイトル枠全体に画像を用いるカスタマイズは「サイドメニューの折りたたみに画像を使用する」を参照ください。

１．スクリプト menufolder.js の設定

menufolder.js の中間辺りにある設定項目で、下記の赤色部分

// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';

を

// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '<img src="images/open.gif" />';
var closeMarkForSideBarMenu = '<img src="images/close.gif" />';

という具合に書き換えてください。画像ファイルを menufolder.js と同じディレクトリに配置すれば、パスの記述は不要です。

２．CSSの追加

メニュータイトルや画像サイズにもよりますが、CSS に

.sidetitle img {
    vertical-align:middle;
}

という設定を追加すれば、折りたたみマーク画像の垂直位置が、テキストタイトルとある程度揃うようになります。

ちなみにサンプルの設定はもう少しアレンジして、

.sidetitle img {
    vertical-align:middle;
    _vertical-align:bottom;
    margin-bottom:0;
    _margin-bottom:1px;
}

としています。

当サイトで公開しているサイドメニューの折りたたみを、Movable Type のデフォルトテンプレートで利用する場合、テンプレートおよびスタイルシートはこれまでのエントリーやマニュアルとは異なった修正が必要になります。
ということで、以下に修正方法を記します。menufolder.js 自体の設定は同じですが、ここではブロック指定による折りたたみのみの方法をご紹介します。

注：このエントリーは Movable Type バージョン 3 の内容です

Windows + IE6.0/Firefox1.5/Opera8 で動作を確認しています。サンプルも用意しましたのでお試しください（最近のエントリー／カテゴリー／アーカイブが折りたためます）。

デフォルトテンプレートの折りたたみサンプル

１．各テンプレート

「最近のエントリー」を例に修正前と修正後のタグを示します。修正対象を赤色、修正後または追加部分を青色で示しています。

修正前

<div class="module-archives module">
   <h2 class="module-header">最近のエントリー</h2>
   <div class="module-content">
　　　　　　　　　　：
　　　　　　　　　（中略）
　　　　　　　　　　：
   </div>
</div>

修正後

<div class="module-archives module2">
   <h2 class="module-header2" id="entryname">最近のエントリー</h2>
   <div class="module-content" id="entrylist">
　　　　　　　　　　：
　　　　　　　　　（中略）
　　　　　　　　　　：
   </div>
</div>

アーカイブ（月別アーカイブ）に適用する場合は、タイトルのリンク

<h2 class="module-header"><a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>

を削除してください。

２．スタイルシート

下記を styles-site.css の最後に追加してください。

.module2 {
    margin: 0 0 10px 0;
    border-bottom: 1px solid #f3f6f9;
    background: #dae0e6;
    overflow: hidden;
    width: 100%;
}
 
.module-header2 {
    width: auto;
    margin: 0;
    padding: 0;
    border-left: 5px solid #36414d;
    font-weight: bold;
    background: #a3b8cc;
}
 
.module-header2 a {
    width: auto;
}
 
.module-header2 a:link,
.module-header2 a:visited {
    display: block;
    padding: 5px;
    _padding: 3px 0 3px 5px;
    color:#ffffff;
    font-size:11px;
}
 
.module-header2 a:hover {
    padding: 5px;
    _padding: 3px 0 3px 5px;
    color:#ffffff;
    background: #999999;
    font-size:11px;
}

配色は適宜修正してください。

Google Mapsや Googleサジェスト で一躍有名になった Ajax（Asynchronous JavaScript+XML：エイジャックス） ですが、Ajax用JavaScriptライブラリを利用してサイドメニューをゆっくり折りたためるようにしてみました。
公開テンプレートを用いたサンプルを作りましたので、実際の折りたたみ動作をご確認ください。固定3カラム・可変3カラムを右上のリンクで切り替えられるようにしています。

ゆっくり折りたたむサンプル

本カスタマイズで参考にさせていただいたのは下記のサイトです。ありがとうございました。

• Ogawa::Memoranda："Subscribe with Feedbringer" Bookmarklet
  （FEEDBRINGERを知るきっかけ）
• FEEDBRINGER
• nekobara カルゴルニア・ジョン：Ajaxサンプル with Google Maps

なお、本カスタマイズはサイドメニューの折りたたみ（v4.0）を前提にカスタマイズしていますので、新たにサイドメニューの折りたたみを導入される場合はサイドメニューの折りたたみ（v4.0）のカスタマイズを行ってください。
また折りたたみマークで折りたたむようにしている場合の動作は未確認ですので予めご容赦ください。

１．Ajax用JavaScriptライブラリのダウンロード

Scriptaculous のページへジャンプし（接続できない場合は２項へ進んでください）、上の方にある downloads というタブをクリックします。次ページの右側にある Archived Versions の1.1b1 の zip または tar.gz のリンクをクリックしてください。なお他のバージョンでは動作しませんのでご注意ください。
ダウンロードしたアーカイブを解凍し、src というディレクトリに

• controls.js
• effects.js
• dragdrop.js

の3つのファイルがあることを確認してください。この中から controls.js と effects.js を使います。

次に、downloads タブをクリックした次のページの本文にある Prototype JavaScript library のリンクをクリックし、次のページの Just the .js, please というリンクをクリックして prototype-1.3.1.js をダウンロードします（バージョンは2005年8月24日現在）。保存する時、または保存後、ファイル名を

prototype.js

に修正してください。

２．Ajax用JavaScriptライブラリのダウンロード

（１項が×の場合）

１項で Scriptaculous に接続できない場合は、下記のページより取得してください。

Ruby on Rails：/spinoffs/scriptaculous/

取得するのは下記の3ファイルです。

• prototype.js
• controls.js
• effects.js

prototype.js は lib/ のリンクをクリックして、次のページの prototype.js をクリックします。次ページでソースが表示されますのでマウスコピーし、任意のエディタで新規ファイルを作り、そこにペーストして prototype.js というファイル名で保存します（コピーする範囲に注意してください）。文字コードはブログと同じ文字コードが無難です。
他の3ファイルは、最初のページに戻って src/ のリンクをクリックします。後は prototype.js と同様の方法で保存してください。

３．menufolder.js のダウンロード（Ver4.00以下の方のみ）

下記の download をクリックして、次のページで menufolder.js をクリックして menufolder.js（Ver5.00） をダウンロードしてください。

download

４．スクリプトの修正

デフォルトの状態では正常に動作しない（折りたたみタイトルが変に表示される）ため、以下のいずれか片方のみを実施してください。修正方法は妥当でないかも知れませんので予めご容赦ください。

４．１ protptype.js を修正する

任意のエディタで prototype.js を開き、「show: function」で検索し、そのちょっと下の部分に青色の「block」を追加します。

show: function() {
  for (var i = 0; i < arguments.length; i++) {
    var element = $(arguments[i]);
    element.style.display = 'block';
  }
},

４．２ menufolder.js を修正する

任意のエディタで menufolder.js を開き、一番下から 50 行ほど戻ったところにある

        Element.show(effect.element); // prototype.js 修正要
//      element.style.display = 'block';

の赤色部分を削除して、その上の行の先頭に、青色のように

//        Element.show(effect.element); // prototype.js 修正要
      element.style.display = 'block';

とコメントマークを追加します。

５．スクリプトのアップロード

上記の4ファイルをローカル・サイト・パス（index.html が置かれているディレクトリ）にアップロードします。
なお、menufolder.js については６項の設定を行った後でアップロードしてください。

６．テンプレートの修正

折りたたみを行いたい各テンプレートの <head> ? </head> の部分に青色部分を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>effects.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>controls.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

７．折りたたみ速度の設定

menufolder.js では全てのメニューに対して一括してゆっくりにする方法と個別に設定する2通りの方法を用意しています。

７．１ 全てのメニューに対して一括してゆっくりにする

menufolder.js の下記の赤色部分を slow に修正してください。デフォルトは normal になっています。 テンプレートで FoldNavigation を起動している部分の変更は不要です。

//-----------------------
// 折りたたみスピード
//-----------------------
// 通常：'normal'
// 遅い：'slow'
var speed = 'slow';

７．２ 個別に設定する

ゆっくり折りたたみたいメニューリストの下に下記の記述を追加します。

<script type="text/javascript">
<!--
FoldNavigationSlowly('idName','initState',viewListNumber);
//-->
</script>

すでにご利用中の方は

FoldNavigation('idName','initState',viewListNumber);

の FoldNavigation を FoldNavigationSlowly に変更してください。
赤色部分については menufolder.js マニュアルの３項を参照してください。

設定が終わったらテンプレートを保存・再構築してください。設定が正常にできていれば折りたたみ動作が変わっているはずです。

８．折りたたみスピードを変更する

サンプルの折りたたみ速度はデフォルトよりやや速くしています。速度を変更する場合は、effect.js の下記の赤色部分を変更します。

Effect.Base.prototype = {
  setOptions: function(options) {
    this.options = Object.extend({
      transition: Effect.Transitions.sinoidal,
      duration:   1.0,   // seconds
      fps:        25.0,  // max. 100fps
      sync:       false, // true for combining
      from:       0.0,
      to:         1.0
    }, options || {});
  },

単位は「秒」で、デフォルトは「1.0」（つまり1秒）なので、これを「0.5」等に修正すれば動作が早くなります。

９．その他

公開テンプレートはサンプルでご覧の通り正常に動作します。BlogPeople 等のリンクリストを overflow 指定でスクロールさせている場合も問題ありません。
折りたたみ動作で開く瞬間と閉じる瞬間に点滅するような場合は1行目の

<?xml version="1.0" encoding="utf-8"?>

を削除してみてください（取り除くことで正常に動作することを確認しています）。

またサブカテゴリーリストの折りたたみは不具合があるようです（原因不明）。また他のCSSを用いられている場合、設定？によってスムーズに動作しない可能性があります（原因は究明できておりません）ので予めご容赦ください。
また折りたたむ動作はメニューリストの上下 margin が少ない方がスムーズに動くようです。

以上です。

2005.08.25
折りたたみ時に発生する不具合を解消するための４項を追加しました（既知の事象でしたが本文に盛り込むのを忘れておりました、すいません）。

2005.11.01
折りたたみ時にメニューリストが点滅する場合の対処を９項に追記しました。

2007.10.25
６項のソースコードについて、JavaScript エラー回避のため、controls.js と effects.js の順序を入れ替えました。

サイドメニューの折りたたみ（v4.0）でブロックレベル要素指定による折りたたみをご紹介しましたが、タイトル部分の背景やロールオーバーした時に任意の画像を配置するカスタマイズです。簡単です。

まず、タイトル部分に通常表示で使用する画像（hogehoge1.gif）とロールオーバー時に使用する画像（hogehoge2.gif）の2つを用意します。例えば下記のようなものです。

：通常表示用（hogehoge1.gif）

：ロールオーバー用（hogehoge2.gif）

これを任意のディレクトリ（images）にアップロードします。

次に、前述のエントリーにある、３項のスタイルシートの設定を下記のように変更します。

/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    background-image:url(images/hogehoge1.gif);
}
 
/* マウスポイント時 */
.sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff#666666; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    background-image:url(images/hogehoge2.gif);
}

これで下記のような動作をするようになります（サンプル表示用に設定は若干変えています）。

サンプル

上記は配置する画像のサイズがタイトル部分と同じ大きさの場合です。次のように細い縦長の画像（hogehoge3.gif：みにくくてすいません）

を繰り返し表示する場合は、

background-image:url(images/hogehoge3.gif);
background-repeat:x;

とします。これで

という表示になります。ロールオーバー用の画像も同じ方法で作れます。この方法は横方向のサイズが可変になる場合に便利です。

お知らせ：現在 Ver5.0 をリリースしています。

これまでの折りたたみスクリプト menufolder.js を大幅に改造してバージョンアップしました。今回の大きな追加機能はブロックレベル要素指定によるリンクです。つまり画像のように、メニュータイトル枠全体をリンクとして設定することができます。これまでは折りたたみマークを狙ってクリックする必要がありましたが、この設定に変更することで操作性が向上すると思われます。ブロックレベル要素指定＋折りたたみマークの表示も可能ですし、これまでの折りたたみマークのみへのリンクも可能です。 またリスト数を計算するタグは a タグのみでしたが、ご近所のサイトでメニューリストをツリー化される方が増えてこられましたので、任意のタグ（li 等）を指定して計数することも可能にしました。その他設定データを追加して表示位置を微調整できるようにしています（役立つかどうかは分かりませんが）。

スクリプトの設定内容はバージョンアップ毎にエントリーに記すと大変なので、下記のページにまとめてみることにしました。

menufolder.js マニュアル

バージョンアップに伴って新たに追加となったデータは次の通りです。

• linkType：リンク方式
• displayMark：リンクマーク表示
• modificationFlag：タイトル表示位置補正フラグ
• offsetForTitleAndLinkNumber：タイトルとリスト数のスペース
• preMarkForSubCategory：サブカテゴリー用折りたたみマーク挿入位置
• offsetForTitleAndMark：サブカテゴリーのタイトルとマークのスペース

これまでのデータはそのまま残しています。既存の折りたたみマークのリンクでタイトル表示位置を補正している場合は、新たに追加した modificationFlag を ture に設定してください。
他の設定については先のマニュアルをご覧頂くとして、ここではブロックレベル要素指定によるリンクのカスタマイズについて記したいと思います。

１．menufolder.js ダウンロード

下記のリンクをクリックするとスクリプトのページへジャンプします。そこで menufolder.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。scriptタグの設定については３項に記してますのでお試し頂ければ幸いです。

２．menufolder.js の設定

menufolder.js を更新される方は大変申し訳ありませんが現在設定されている内容を比較して再設定してください。なおこれまで用いたデータ名はそのまま使っておりますので、データ名で検索されると効率良く更新できると思います。
ブロックレベル要素指定によるリンクを有効にするには linkType を 'block' に設定してください。さらにその状態で折りたたみマークを表示させる場合は displayMark に true を設定します。なお本機能では折りたたみマークはタイトル横になります。つまり左右いずれかの端に設定することはできませんので予めご了承ください（スタイルシートを修正して左右いずれかに位置を揃えた表示にすると綺麗だと思います）。設定イメージを示しておきます。

折りたたみマークを表示しない場合

// リンク方式
// 折りたたみマークにリンク付与：'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';
　　　　：
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：true
// 表示しない：false
var displayMark = false;
 
// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSideBarMenu = '';
var closeMarkForSideBarMenu = '';

折りたたみマークを表示する場合

// リンク方式
// 折りたたみマークにリンク付与：'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';
　　　　：
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する：true
// 表示しない：false
var displayMark = true;
 
// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForSideBarMenu = '▽';
var closeMarkForSideBarMenu = '△';

なお折りたたみマークを表示しない場合は displayMark を false にすればその下のマークは無視されますが、SWEET WATER Web Server さんより頂いたコメントの通り Firefox では表示に不具合がある（スクリプトのバグ？）ようですので、その下の openMarkForSideBarMenu / closeMarkForSideBarMenu の設定もリストのように '' にしておいてください。

設定が終わったら保存してローカル・サイト・パス（index.htmlと同じ位置）にアップロードまたは配置してください。

３．スタイルシート追加

スタイルシート（styles-site.css）に下記を追加します。class 属性はとりあえず sidetitle2 としていますが、任意の名称で構いません。

.sidetitle2 {
    width: auto;
    margin:3px 0px 0px 0px;
    padding: 0px;
    text-align: center; /* テキスト配置 */
}
 
.sidetitle2 a {
    width: auto;
}
 
/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}
 
/* マウスポイント時 */
.sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}

設定が終わったら保存・再構築してください。うまくできればマウスポイント時に画像のような反転を行います。自分で言うのも何でですがポイント時は地味な配色なので、適宜お気に入りの色に修正ください（色変更に必要な箇所をコメントで示しています）。全体のスタイルもご自由に変更くださって結構です。

４．テンプレート修正

公開テンプレートの場合、折りたたみを行いたいテンプレートの各メニュータイトルの設定部分に青字の「2」を追加します（class 属性を sidetitle2 としたのはこのためです）。

<div class="sidetitle2" id="newentries">
Recent Entries
</div>

設定が終わったら保存・再構築してください。
なお折りたたみが不要なメニューについてはこの設定を行わないでください。つまり折りたたまないメニューはこれまでのスタイルを用いる必要がありますので、既存の class 属性を流用するのはやめましょう。

５．動作の不具合について

原因は不明ですが、左サイドバー上部にカレンダーが表示されていない場合、左サイドバーのメニューについては文字の部分しかリンクが適用されません。確認したところ、table タグの caption が設定されていればそれ以降の設定についてブロック全体がリンクになるようです。

以上です。それぞれの設定に矛盾があるとタイトル部分の中央に折りたたみマークだけが表示されたり、タイトル自体の表示が崩れる場合があります。そのような場合、linkType と 適用するスタイル、それから class 属性が適正であるかご確認ください。

本サイトでは2005/3/31よりこの設定に変更して運用中です。不具合等ございましたらご連絡頂けると幸いです（明快な回答はできないかもしれませんが）。

2005.04.02 追記
Firefox の場合の不具合および設定データのリストを追加しました。またスタイルシートについては色変更に必要な箇所をコメントで示しました。

折りたたみスクリプトの menufolder.js をマイナーバージョンアップしました。
今回の修正は MacIE 用の対処です。3.00での MacIE で折りたたみが正常に動作しない問題について修正致しました。MacIE をご使用の方は多くないかも知れませんが、折りたたみ可能なブラウザが拡大されますのでアップグレードされることをお勧めします。
なお今回の修正は TOY COZY MUSEUM：toycozy さんおよび、Mellout,inc.：mellout さんのご助言およびご協力によりリリースすることができました。この場をお借りしてお礼申し上げます。

アップグレードされる場合は下記のリンクでスクリプトのページ（あちこちにリンクを貼るとメンテナンスが大変なので新しく作りました）へジャンプし、そこからダウンロードしてください。

download

なお 3.00 のスクリプトから修正される場合は下記の変更を行ってください。
まず95行目あたりにある赤色部分の行を青色のものに入れ替えます。

for(var x = 0; x < list.length; x++) {
    if (list[x] != name) {
        newData.push(list[x]);
    }
}

for(var x = 0; x < list.length; x++) {
    if (list[x] != name) {
        newData[newData.length] = list[x];
    }
}

次にスクリプト冒頭に配している各設定データ（赤色部分）

//--------------------------------------------------------
// Configuration
//--------------------------------------------------------
 
// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';
　　　　　　　　：
　　　　　　（中略）
　　　　　　　　：
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▽';
var closeMarkForSubCategories = '△';
 
//--------------------------------------------------------

をごっそり切り取り、下記の位置（切り取り前の行数で言うと172行と173行の間）に移動します。

　　　　　　　　：
　　　　　　　　：
function FoldNavigation(idName,initMode,viewNum) {
 
//--------------------------------------------------------
// Configuration
//--------------------------------------------------------
 
// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';
　　　　　　　　：
　　　　　　（中略）
　　　　　　　　：
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▽';
var closeMarkForSubCategories = '△';
 
//--------------------------------------------------------
 
    var openMark;  // The mark for opening, when having closed
    var closeMark; // The mark for closing, when open
    var preMark;   // The insertion position of a mark.
　　　　　　　　：
　　　　　　　　：

具体的な修正内容は下記の通りです。

• 現状のスクリプトで用いている push 関数が MacIE では期待する動作とならないため、push 関数による処理を配列の代入処理に変更。
• グローバル変数として設定している各設定値用の変数のスコープが正常に認識できないため、ローカル変数として配置するように変更。

Movable Type ユーザー・マニュアル、いつもトップページURLの後ろに "docs" と打ち込んでジャンプしていたのですが、だんだん面倒になってきたのでサイドバーのメニューとして追加してみました。今のところ「このサイトについて」の右下トップページ左下にひっそり置いてます。 メニューは、せっかくなのでトップページへのリンクだけでなく、サブメニューの中から頻度の高そうなものをピックアップして加えました。またテンプレート系のマニュアルは見る機会が多いので、さらにサブカテゴリー化（"▽"マークで折りたたみ）して直接参照したい項目にジャンプできるようにしています。サブメニュー全体はトップのサブカテゴリーにするのが本来ですが、テキストの折り返しが煩わしいのでトップと同じレベルに配しました。

リストはサブカテゴリー表示を流用しています。ただし「id 属性は文書内で一意でなければならない」という制約があるため、サブカテゴリーリストの

<div id="categories">

が使えません。したがってサブカテゴリー表示用のスタイルシート categories の内容に別名の id 属性を付与して使用しています。

サイドメニューのサブカテゴリーリストの折りたたみカスタマイズをご紹介致します。

仕様

• サブカテゴリーが存在する親カテゴリーの右側に折りたたみマークを表示します
• 折りたたみマークは任意の文字を指定できます
• カテゴリーのエントリーの有無には依存しません
• 折りたたみ状態をcookieで保持します
• カテゴリー名が折り返されても（多分）大丈夫です。

また、サイドメニューのツリー化スクリプトとの併用が可能です。以下設定方法です。
なおV3.0にサブカテゴリー折りたたみ機能を盛り込み済ですので、サイドメニューの折りたたみを既にご利用くださっている方につきましては下記の１項および６項をスキップしてください。

１．menufolder.js ダウンロード

下記のリンクをクリックするとスクリプトのページへジャンプします。そこで menufolder.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

ファイルは UTF-8 で作成していますのでブログと同じ文字コードに合わせてください（よく分からない方はそのままで結構です）。

２．menufolder.js 設定変更

menufolder.js をテキストエディタ等を用いて、下記の青色行の赤色部分を本リストの通り（折りたたみマークは任意）に変更してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
 
　　　　　　　：
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
 
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▽';
var closeMarkForSubCategories = '△';

設定内容の詳細は下記の通りです。

subCategoryCount

• 名称：カテゴリーリスト数計算方法
• 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
• 設定値： true：li タグで計数／false：a タグで計数

subCategory

• 名称：サブカテゴリーの折りたたみ有効フラグ
• 用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
• 設定値： true：有効／false：無効

openMarkForSubCategories/closeMarkForSubCategories

• 名称：サブカテゴリーの折りたたみマーク
• 用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
• 設定値：任意の文字（設定したマークを''で括るように）

３．menufolder.js 配置

menufolder.js の修正が終わったら保存し、ローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

４．カテゴリーリスト表示用タグ修正

折りたたみを利用する各テンプレートの、カテゴリーリストを表示するタグを変更します。上は3.1x用の公開テンプレートからの抜粋ですので、この赤色部分を下のリストの青色部分と入れ替えてください。

<div class="sidetitle">
Categories
</div>
 
<!-- 全カテゴリー用 -->
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
<!-- 全カテゴリー用 -->
 
<!-- サブカテゴリー用
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
     サブカテゴリー用 -->

<div class="sidetitle">
Categories
</div>
 
<!-- サブカテゴリー用 -->
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<!-- サブカテゴリー用 -->

緑色は公開テンプレートからの変更または追加部分を示しています。また

<div class="side">

の部分に折りたたみ用の id 属性を設定されている場合は、現在の設定を反映させてください。

５．JavaScript起動用スクリプト設定

折りたたみを利用する各テンプレートに、menufoleder.js の FoldNavigation を起動するスクリプトを設定します。この設定方法には 起動スクリプトの自動生成と手動設定の2通りがあります。
menufolder.js を起動する単位は親カテゴリーです。つまり、折りたたむ親カテゴリーの増減が発生するとこの起動部分も増減、つまり変更の必要が生じます。自動生成ではMTタグを用いており、折りたたみが必要な親カテゴリーの id 属性を取得し、起動スクリプトを再構築時に自動生成ます。手動設定の場合は親カテゴリー分の起動スクリプトを文字通り手動で挿入します。
普通に考えれば前者しかありえませんが、自動生成では折りたたみの初期状態を「全て開く」または「全て閉じる」のいずれかのみしか選択できない、また子カテゴリーを持つ全ての親カテゴリーに折りたたみマークが付与されるのがデメリットです。手動設定は面倒な反面、初期状態を親カテゴリー別にきめ細かく設定できます。また折りたたむ親カテゴリーを任意に選択することができます。
という訳で自動生成を行う場合は５．１を、手動設定の場合は５．２の作業を行ってください。

５．１ 自動生成の場合

折りたたみを利用する各テンプレートに下記のタグを、４項で設定したタグの直下に挿入します。

<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','off',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色部分は５．２（２）項の initState を参照して適宜変更してください。

５．２ 手動設定の場合

（１）MTCategoryID取得

まず折りたたみマークが付与される各親カテゴリーのMTCategoryIDを取得（単なるメモ）します。繰り返しになりますが５．２項を選択された場合は、サブカテゴリーをもつ親カテゴリーが増減する度に修正が必要になります。
管理メニューの「カテゴリー」をクリックしてカテゴリー名をマウスオン（またはクリック）するとステータスバー（あるいはアドレス）に

http://～/mt.cgi?__mode=view&_type=category&blog_id=1&id=n

が表示されます。このURLの最後の n がMTCategoryIDですので、カテゴリー名とMTCategoryIDの対応を（メモする等で）記録してください。
とりあえず５．１（１）をテンプレートに設定・再構築して、そのソースを取得して５．２（２）に反映させるという手もあります。

（２）JavaScript起動用スクリプト設定

折りたたみを利用する各テンプレートで、menufolder.js を起動するためのスクリプトを４項で設定したタグの直下に挿入します。まずはサンプルをご覧ください。

<script type="text/javascript">
<!--
FoldNavigation('subcategories18','on',false);
FoldNavigation('subcategories22','on',false);
FoldNavigation('subcategories24','on',false);
FoldNavigation('subcategories31','off',false);
//-->
</script>

青色は挿入部分、赤色は適宜修正します。それぞれのフォーマット、意味および設定値は下記の通りです。

FoldNavigation('idName','initState',viewListNumber);

idName

• 名称：id属性名
• 用途：折りたたむメニューのid属性を指定します。
• 設定値：このスクリプトの直前のメニューのid属性名（"name"または"list"を除去した形）

initState

• 名称：初期状態
• 用途：ページを最初に表示した時の折りたたみ状態を指定します
• 設定値： on：開いた状態／off：閉じた状態

viewListNumber

• 名称：リスト数表示
• 用途：メニュータイトル横にリスト数の表示・非表示を設定します
• 設定値： true：表示／false：非表示（本カスタマイズでは false 固定）

この例ではMTCategoryIDが18、22、24、31を折りたたむ親カテゴリーとして4行記述しています。18、22、24の3つは開いた状態、31は閉じた状態で表示されます。
折りたたむカテゴリー数は各サイトで異なりますので折りたたみが必要なカテゴリー数分を上記の例にならって記述し、５．２（１）で記録したMTCategoryIDは赤色部分に

subcategories + MTCategoryID

という文字列で設定してください（「複数形になっている」とかいうツッコミはなし）。スクリプトはこの文字列「subcategories」を判別してサブカテゴリーの折りたたみ処理を実行していますのでお間違えのないように気をつけてください。

６．menufolder.js インクルード文挿入

折りたたみを利用する各テンプレートの <head>～</head> の間に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

７．スタイルシート設定

スタイルシート（styles-site.css）に下記の位置（.side #categories li の下）に、折りたたみマーク装飾用のスタイル（青色部分）を追加してください。

.side #categories li {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: circle;
 
.subcategories a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

設定はデザインに応じて適宜変更ください。

８．注意事項

・本カスタマイズを行う場合、他の折りたたみメニューで "subcategories" という id 属性は使用しないで下さい。
・カテゴリーリスト自体を折りたたむ場合、リスト数の計数を適正に行うためにカテゴリーリストの id 属性名を「category」にしてください。id 属性名を変更したい場合は、menufolder.js の下記の赤色部分を使用する id 属性名に修正してください。

if (subCategoryCount) {
    if (idName == 'category') {
        objItems = objLists.getElementsByTagName('li');
    } else {
        objItems = objLists.getElementsByTagName('a');
    }
} else {
    objItems = objLists.getElementsByTagName('a');
}

９．FAQ

Q：折りたたみマークが表示されません
A：menufolder.js 起動スクリプトの設定（５．２（２）項）が誤っている、６項が設定されていない、６項で設定したパスに menufolder.js がない、２項のサブカテゴリーフラグが true になっていない、ブログと menufolder.js の文字コードが一致していない等が考えられます。

Q：カテゴリーリストのリスト数が表示されているカテゴリー数と一致しません
A：２項の subCategoryCount および８項の２番目の内容を再度ご確認ください。

Q：折りたたみマークをクリックするとマークが変わってしまいます
A：テンプレート内のどこかで不要な menufolder.js をインクルードしています。私はこれで2日ほど悩みました（バカ）

Q：他のアーカイブページにジャンプすると折りたたみマークや表示位置が変わってしまいます
A：ジャンプしたアーカイブのテンプレートで誤った menufolder.js をインクルードしている可能性があります（これも私）。

2004.12.13 追記
カテゴリーリスト数表示の注意事項がもれてましたので、記事引用くださっている方は８項の記述も追加してやってください。また５．２（２）のリストに冗長な部分がありましたので削除致しました。

2005.03.31 追記
サイドメニューツリー化スクリプトへのリンクを文中に追加しました。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

サイドメニュー折りたたみスクリプトを改版致しました。
現在公開中のサイドメニュー折りたたみスクリプト（menufolder.js）は、

• cookie消費が大きい
• カスタマイズ性がよくない

という問題がありました。cookieは「1つのコンピュータに対し最大20までしか保持できない」という仕様です。現状の折りたたみスクリプトでは1メニューに対して1cookieを利用しているため、20近いメニューに折りたたみを設定している場合、同一コンピュータで使用している他のcookieが無効になる可能性があります。
今回は cookie を最大2個しか使用しない方式に変更致しました。なお本方式は日頃お世話になっている facet-divers さんよりアドバイス頂きました。この場をお借りしてお礼申し上げます。ありがとうございました。

またカスタマイズ性については、例えばBlogPeople等のメニューでリンク数を表示する場合、aタグを数えてからバナー等の不要なリンク数分をスクリプト内で減算するようにしています（下リスト参照）。

if (idName == "link1") {
    counter = objItems.length - 3;
} else if (idName == "link2") {
　　　　　　　　　：

が、複数のリンクを追加する場合、ここに id 属性分のプログラムを新たに実装しなければならないため、この設定方法はJavaScriptを書けない方には障壁になります。またその他の設定についてもプログラムを変更しなければならない実装になっており、その部分のカスタマイズについては説明を省いていました。さらに途中で状態保持や動作遅延対処の機能追加を行った関係で、最初からエントリーを追ってカスタマイズを進めて頂くのも非効率的に感じておりました。今回の改版では他の設定も含めてプログラムの先頭で提供する機能のカスタマイズが可能な方式に改善しております。
そういう訳で手順を含めてこのエントリーにまとめました。はじめてご利用になる方もこちらを参照頂ければ幸いです。

折りたたみスクリプトの主な仕様は下記の通りです。

• サイドバーのメニューを折りたたむことができます。
• 折りたたみマークをメニュータイトル部分に表示します。折りたたみマークはタイトルの左右または左端・右端のいずれかに表示します。表示位置は設定により切り替えられます。また折りたたみマークは任意の文字に変更できます。
• メニュー内のリスト数をタイトル部分に表示することができます。リスト数表示・非表示は設定によりメニュー単位で切り替えられます。リスト数はタイトルの左右に表示します。表示位置は設定により切り替えられます。またリスト数を"（）"や"[]"等の任意の文字で括ることができます。
• cookieを利用して折りたたみ状態を保持することができます。また状態保持の有効・無効を設定により切り替えられます。
• サブカテゴリーのリスト数表示を li タグ数で収集します。また従来の一括表示での収集方法を設定により切り替えられます。

以下設定手順です。なおこれまでの menufolder.js をご利用下さっている方でご利用になる場合、基本的に必要な作業としては新しい menufolder.js への差し替えと２項の設定です。ただし文字コードや id 属性名によっては他の項目についても変更が必要になります。また念のためこれまでの js ファイルもバックアップとして保存しておいてください。

１．menufolder.js ダウンロード

下記のリンクをクリックするとスクリプトのページへジャンプします。そこで menufolder.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。scriptタグの設定については３項に記してますのでお試し頂ければ幸いです。

２．menufolder.js の設定内容を修正

ブログの設定内容に合わせてファイルの先頭にある下記の赤字部分を修正します。

// サイドメニュー用折りたたみマーク
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';
 
// 折りたたみマーク挿入位置
// タイトル前に折りたたみマークを配置：true
// タイトル後に折りたたみマークを配置：false
// 左端または右端に折りたたみマークを配置(スタイルシートの設定が必要です)：true
var preMarkForSideBarMenu = true;
 
// リスト数表示位置
// タイトル前にリスト数を表示：true
// タイトル後にリスト数を表示：false
var listNumberPosition = true;
 
// リスト数表示を括るマーク
var leftMarkForListNumber = '';
var rightMarkForListNumber = '';
 
// タイトル表示位置補正方向（スタイルシートで左端または右端に配置した場合）
// タイトルを右方向に移動：true
// タイトルを左方向に移動：false
var centeringPosition = true;
 
// タイトル表示位置補正オフセット（スタイルシートで左端または右端に配置した場合）
var offsetForCentering = 2;
 
// リンクメニュー数
// 他にリンク数を減算する必要があるメニューもここに含めてください
var linkNumber = 2;
 
// 各リンクメニューのオフセット値
// 注：id属性名は「linkx(xは数字)」であること
var offsetValue = new Array(linkNumber);
offsetValue[0] = 3;
offsetValue[1] = 2;
 
// トラックバック数の除数
// 注：id属性名は「trackback」であること
var trackbackNumber = 2;
 
// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = false;
 
// 状態保持フラグ
// 状態保持を有効にする：true
// 状態保持を無効にする：false
var holdState = true;

設定方法の詳細は下記の通りです。上記リストの青字部分が該当行、赤字が設定値を示しています。

openMarkForSideBarMenu/closeMarkForSideBarMenu

• 名称：サイドメニュー用折りたたみマーク
• 用途：サイドメニューのタイトル横に表示する折りたたみ用リンクのマーク
• 設定値：任意の文字（設定したマークを''で括るように）

preMarkForSideBarMenu

• 名称：マーク挿入位置
• 用途：折りたたみマークをタイトルの前後どちらに表示するかを設定します。
• 設定値： true：タイトルの前に表示／false：タイトルの後に表示。ただしメニューの左端または右端に表示する場合は true を設定（スタイルシートで位置を調整します）

listNumberPosition

• 名称：リスト数表示位置
• 用途：リスト数表示位置をタイトルの前後どちらに表示するかを設定します
• 設定値： true：タイトルの前に表示／false：タイトルの後に表示

leftMarkForListNumber/rightMarkForListNumber

• 名称：リスト数表示を括るマーク
• 用途：「left?」には左側の文字（'('、'['等）、「right?」には右側の文字（')'、']'等）を設定します。何も設定しない場合はいずれも '' という状態にしてください。また片方だけの設定も可能です。
• 設定値：任意の文字

centeringPosition

• 名称：タイトル表示位置補正方向
• 用途：スタイルシートで折りたたみマークを左端または右端に配置する場合、タイトルがメニュー中央から外れるので、タイトル位置を補正するための方向を設定します。補正する必要がない場合は本項目はそのままの状態にして、次の offsetForCentering の値に「0」を設定してください。
• 設定値： true：タイトルを左方向に移動／false：タイトルを右方向に移動

offsetForCentering

• 名称：タイトル表示位置補正オフセット
• 用途：上記の centeringPosition で補正する方向のオフセットを半角数字で指定します。なお「1」は半角1文字に相当します。
• 設定値：任意の値。不要な場合は「0」を設定。

linkNumber

• 名称：リンクメニュー数
• 用途：BlogPeople・MyBlogList等のリンクリストの数を半角数字で設定します。
• 設定値：任意の数字（1つであれば「1」）。リンクリストがない場合は「0」。

setValue[x]

• 名称：各リンクのオフセット数
• 用途：タイトル左にリスト数を表示する際、a タグの数の合計を表示するのですが、リンクリストの場合はバナー等の計数に不要な a タグが含まれている場合があります。この不要な a タグの数をメニュー毎に設定します。また [x] の部分にはそのメニューが（リンクの中で）何番目に表示されるかを指定します。 1番目に表示されるものはプログラムの都合上 [0] 、2番目に表示されるものは [1] …という具合に設定してください。メニューが表示される順番は画面の左上から右下です。エントリーやカテゴリー等の他のメニューは数に含みません。先に指定した linkNumber で何番目に表示されるかを計算します。linkNumber を「0」に設定した場合はこの設定を変更する必要はありませんので、そのままにしておいてください。
• 設定値：任意の数字（1つ減算する場合は「1」）

trackbackNumber

• 名称：トラックバック数の除数
• 用途：トラックバックのリスト数を表示する場合、aタグの数の合計を表示するのですが、トラックバック先のリンクとトラックバック元のリンクを同時に表示しているとリスト数が倍になってしまいます。この値はその除数を指定するものです。「2」となっている場合はリスト数の合計を2で割ります。
• 設定値：除数を半角数字で設定

subCategoryCount

• 名称：カテゴリーリスト数計算方法
• 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
• 設定値： true：li タグで計数／false：a タグで計数

holdState

• 名称：状態保持フラグ
• 用途：折りたたみ状態を cookie に保持する／しないを設定します。「保持」を設定した場合、最後に変更した折りたたみ状態が他のページへのジャンプ時やブラウザ起動時、および更新時に反映されます。
• 設定値： true：有効／false：無効

設定内容の変更に自信のない方はそのままお使いください（右端に折りたたみマークを設定・リスト数をタイトル前に表示する設定になっています）。その際、６項のスタイルシートは一番最初のものをお使いくださいますようお願い致します。
修正の際にはカスタマイズ箇所以外の部分に全角文字（全角空白）を含まないようお気をつけください。

３．menufolder.js 配置

menufolder.js の修正が終わったら保存し、ローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

４．テンプレートの設定１（menufolder.js のインクルード文追加）

折りたたみを利用する各テンプレートの <head>～</head> の間に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

５．テンプレートの設定２（各メニューに id 属性追加）

下記の要領で、折りたたみたいサイドメニューのタイトルに「id="xxname"」、リストの方に「id="xxlist"」を付与します。"name"と"list"は固定名称です。"xx"の部分にはメニュー毎に異なる名称を付与します（例えばカテゴリーリストは"category"、エントリーは"entry"等）。同じ名称が存在すると正常に動作しませんのでご注意ください。
下記は設定例です。この例と同じように各メニューに青色部分の id 属性を追加してください。

<div class="sidetitle" id="categoryname">
Categories
</div>
 
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>

なおリスト数表示を補正する必要がある BlogPeople や MyBlogList 等のリンクメニューにつきましてはid属性を "linkx?"（xは半角数字）で統一してください。その場合のタイトル部は「id="link1name"」、リスト部は「id="link1list"」という具合になります（複数存在する場合は数字の部分が増えていきます）。

６．テンプレートの設定３（menufolder.js 実行スクリプトを追加）

折りたたみたい各メニューの下（サンプルは５項のカテゴリーリスト）に青色部分のスクリプトを追加します。

<div class="sidetitle" id="categoryname">
Categories
</div>
 
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>
 
<script type="text/javascript">
<!--
FoldNavigation('idName','initState',viewListNumber);
//-->
</script>

赤字部分は適宜変更します。それぞれの意味と設定値は下記の通りです。

idName

• 名称：id属性名
• 用途：折りたたむメニューのid属性を指定します。
• 設定値：このスクリプトの直前のメニューのid属性名（"name"または"list"を除去した形）

initState

• 名称：初期状態
• 用途：ページを最初に表示した時の折りたたみ状態を指定します
• 設定値： on：開いた状態／off：閉じた状態

viewListNumber

• 名称：リスト数表示
• 用途：メニュータイトル横にリスト数の表示・非表示を設定します
• 設定値： true：表示／false：非表示

例えば、カテゴリーリストメニュー用のid属性に"category"を指定、初期状態は「開く」、リスト数を表示する場合、カテゴリリストメニューの直下に、

<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>

という内容で配置します。

７．スタイルシート設定

スタイルシート（styles-site.css）の .sidetitle の下に下記（注：青色部分のみ）を内容を追加します。以前のものと異なりますが動作的には同じです（多分）。２項の設定パターンによってスタイルシートの設定内容が若干異なりますので該当するものをお選びください。

右端にマークを表示
.sidetitle a.foldmark {
    float: right; /* マークを右端に配置 */
    font-size:9px; /* マークのフォントサイズ */
    padding-right:3px; /* 右端からのパディング */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

左端にマークを表示
.sidetitle a.foldmark {
    float: left; /* マークを左端に配置 */
    font-size:9px; /* マークのフォントサイズ */
    padding-left:3px; /* 左端からのパディング */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

タイトル前にマークを表示
.sidetitle a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    padding-right:3px; /* タイトルとマーク間のパディング */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

タイトル後にマークを表示
.sidetitle a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    padding-left:3px; /* タイトルとマーク間のパディング */
    text-decoration: none; /* マークの文字装飾（何も表示しない） */
}

上記サンプルはそのままでも使える値に設定していますがデザインに応じて適宜変更ください。

2005.06.08 追記
６項の記述を修正しました。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

公開中のサイドバー折りたたみスクリプトですが、cookie保持の改善版をただいま鋭意作成中です。本当は土曜日中にエントリーを公開したかったのですが、他の改善も含めて色々と修正していたら間に合わなくなってしまいました。カスタマイズ手順もこれまでのものをまとめて、新たに作り直す予定です。

ということで、かなりゴージャスなスクリプトに生まれ変わって登場する予定です（設定がかえってややこしくなるという噂も…）。乞うご期待ください！

2004.12.06 追記
サイドメニュー折りたたみのエントリーを書き直しましたので

サイドメニュー折りたたみスクリプト（cookie等改善版）

を参照ください。

---

以前公開したサイドメニュー折りたたみ（改）でリンクリスト等の表示までに時間がかかるメニューがあると、一時的にメニューが開いた状態になってしまいます。これは折りたたみ状態保持スクリプトを適用している場合も同様で、HTML表示を実行した一番最後に折りたたみ用のJavaScriptを起動し、メニューの折りたたみ状態を追加しているためです。
これを解消するため、HTMLの最後にJavaScriptを実行するのではなく、HTMLの任意の位置で数回に分けてこのJavaScriptを実行するように変更しました。このサイトで更新ボタンをクリックして頂ければ実際の折りたたみ動作をご覧いただけます（メニューが全て閉じた状態であればさらに○）。

これはfacet-diversさんのサイドバー折り畳み２：動作遅延対策のアイデアを元に修正させて頂きました。個人的にはこの記事のおかげでサイドメニュー折りたたみがほぼ完成型になったと思っています。
この場をお借りして改めてお礼申し上げます。本当にありがとうございました。

以下、上記エントリーからの変更手順です。なお万が一に備えて以前の状態に戻せるようmenufolder.jsおよび各テンプレートのバックアップは保存してから作業を行われることをお勧めします。

１．menufolder.jsより下記の赤字部分（InitFlodNaviとその起動箇所）を削除

function InitFoldNavi() {
    FoldNavigation('newentry','off',true);    // 最新エントリー
    FoldNavigation('monthly','off',true);     // 月別アーカイブ
    FoldNavigation('category','on',true);     // カテゴリー別アーカイブ
    FoldNavigation('comment','on',true);      // 最新コメント
    FoldNavigation('trackback','on',true);    // 最新トラックバック
    FoldNavigation('link','on',true);         // リンク
}
function FoldNavigation(idName,initMode,viewNum) {
    var openMark = '[＋]'; /* 閉じている場合に開くためのマーク */
    var closeMark = '[?]'; /* 開いている場合に閉じるためのマーク */
　　　　　　　　　　　　：
　　　　　　　　　　（省略）
　　　　　　　　　　　　：
}
InitFoldNavi(); // ナビゲーションの折り畳み

削除部分のFoldNavigation…という行は後でそのまま使います。またファイルを保存する際には文字コードにお気をつけください。

２．各テンプレートの一番下に配置していた

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>

を <head>～</head> の間に移動

３．各テンプレートの、折りたたみを指定している各メニューの下に下記のスクリプトを追加

<script type="text/javascript">
<!--
FoldNavigation('xxxxx','on',true);
//-->
</script>

真中の FoldNavogation? は１項で削除した行をそのまま使います。"xxxxx"の部分に直前のメニューに指定したid属性のものが割り当てられるようにします。例えば、カテゴリーリストメニュー用のid属性に"category"を指定している場合、カテゴリリストメニューの直下には、

<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
//-->
</script>

を配置してください。
なお上記のスクリプトはメニュー対し1対1に細かく分割しなくても構いません。要するに遅延しないメニュー用と遅延するメニュー用のJavaScriptに分割できればよいので、例えばBlogPeople等のリンクリストの直前までの（遅延しない）メニュー分をまとめてリンクリスト（タイトル）の直前に、

<script type="text/javascript">
<!--
FoldNavigation('category','on',true);
FoldNavigation('monthly','on',true);
FoldNavigation('newentry','off',true);
//-->
</script>

と記述して配置し、BlogPeopleやMyBlogList等のリンクリスト用のJavaScriptのみを

<script type="text/javascript">
<!--
FoldNavigation('link1','on',true);
//-->
</script>

と書いてリンクリストの直下にそれぞれ配置してもOKです。

この対処はメニューの途中に遅延するメニューが存在する場合はあまり効果的でありません（遅延するメニュー以降のメニューは遅延します）ので予めご了承ください。

2004.12.06 追記
サイドメニュー折りたたみのエントリーを書き直しましたので

サイドメニュー折りたたみスクリプト（cookie等改善版）

を参照ください。

---

このblogではサイドバーメニューの折りたたみ機能を利用させて頂いてますが、折りたたみ状態を変更した後で他のページに移動して戻ってきたり、新たにブラウザを起動するとblog管理者（つまり私）が予め設定しているデフォルトの折りたたみ状態に戻ってしまいます。このようにせっかくカスタマイズした折りたたみ状態が一瞬にして水の泡となってしまうのは何となく不便に感じていました。

そういう訳で折りたたみ状態を保持できるようにスクリプトを改造してみました。これにより折りたたみ状態をカスタマイズした訪問者はページを移動しても、別の日にブラウザを起動した時でも、常に直前に行った折りたたみ状態でblogを閲覧することができます。つまりblog管理者が設定したデフォルトの折りたたみ状態に縛られる必要がなくなる訳です。
具体的にどのような動作になるかは、このサイトでメニューの折りたたみ状態を変更して更新ボタンをクリックするか、他のページへ移動して戻ってきてみられるとお分かり頂けると思います（動作の都合上一瞬デフォルト状態になります）。

この機能を有効にするためにはブラウザのcookieが有効になっていること、折りたたみスクリプトは当方が利用させて頂いているJUGEMカスタマイズ講座：ナビゲーションの折り畳みを使われていることが前提です。

2004.09.20追記
この機能はcookieを利用しています。id属性名（"?name"や"?list"を除いた文字列）がそのままcookie名となりますので他のcookie名と重複しないようなユニークな名称を使用してください。重複している場合、cookieを用いたスクリプトの動作に不具合が生じる場合があります。
またプレビュー画面では正常に動作していません（原因未確認です）。
動作確認済ブラウザはIE6.0およびNC7.1です。

2004.09.24追記
下記のサイトで公開中の折りたたみ用スクリプトに状態保持機能を採用くださいました。ありがとうございます。

• facet-divers：サイドバー折り畳み２：状態保持機能について

以下、スクリプトの修正方法です。

１．cookie取得・設定用スクリプトの追加
メニュー毎の折りたたみ状態をcookieに保持およびcookieから読み出すスクリプトを<head>～</head>の間に追加します。ちなみにこのスクリプトはスタイルシート切り替えのstyleswitcher.jsのcookie用関数の一部を流用しておりますので、そちらを既に使われている方はこの項目をスキップしてください。
注：styleswitcher.jsを利用する場合、状態を保持したいテンプレートに全て指定されている必要があります。

<script type="text/javascript">
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
</script>

２．折りたたみ用スクリプトにcookie保持・読み出しスクリプト追加
折りたたみ用スクリプトを設定している各テンプレート（注：サイドバーメニューの折りたたみからの修正であればmenufolder.js）に下記の青色部分を追加します。

function FoldNavigation(idName,initMode,viewNum) {
    :
  if (!dispMode) {
    var cookie_initMode = readCookie(idName);
    if(cookie_initMode){
      initMode = cookie_initMode;
    }
    createCookie(idName, initMode, 365);
  var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
    :
  } else if (initMode == 'chng') {
    :
    objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
    if (dispMode == 'none') {
      createCookie(idName, 'on', 365);
    } else {
      createCookie(idName, 'off', 365);
    }
  }
}
InitFoldNavi();

以上です。

メニューの折りたたみ状態をページ毎に制御したい場合（例えばメインページでたたんでいる「月別アーカイブ一覧」を月別アーカイブのページでは開いた状態にしたい等）は、id属性の名称をそれぞれ異なる名称で設定すればOKです。同じid属性名にしておけばページが変わっても同じ折りたたみ状態が引き継がれます。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

2004.12.06 追記
サイドメニュー折りたたみのエントリーを書き直しましたので

サイドメニュー折りたたみスクリプト（cookie等改善版）

を参照ください。

---

我楽さんのサイトにあるサイドメニューの折りたたみが気に入り、あらかたできたので、ぼちぼちエントリー追加。経由で

JUGEMカスタマイズ講座：ナビゲーションの折り畳み

に随分前から取りかかってましたがようやく陽の目を見ることになりました。苦労した点はあとで書くとして、とりあえずメモ。
なお関連記事もございますのでよろしければ後ほど参照ください。

• サイドメニュー折りたたみ状態保持スクリプト
• サイドメニュー折りたたみの動作遅延対処

この機能は文字のごとくサイドメニューの折りたたみです。メニューのタイトル部分は常時表示で、タイトル横にある[+]/[-]でメニューリストの表示・非表示を切り替えられます。またメニュー単位に表示・非表示の初期状態を設定できます。
私の場合はリストが長いものに折りたたみをつけ、さらに利用度が低いと思われる「Monthly Archives」と「Recent Entries」を折りたたんだ状態にしてみました。またメニューのリスト合計数をタイトル横に表示できます。そのままの流用では正常に表示されませんでしたが若干のスクリプト修正で有効になりました。以下設定方法です。

１．テンプレートのサイドメニューにid属性を付与
下記の要領で折りたたみたいサイドメニューのタイトルに「id=xxname」、リストの方に「id=xxlist」を付与します。"name"と"list"は固定、"xx"の部分はメニュー毎に異なる名称を付与します（例えばカテゴリーリストは"category"、エントリーは"entry"等）。

<div class="sidetitle">
Categories
</div>
 
<div class="side">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>

<div class="sidetitle" id="categoryname">
Categories
</div>
 
<div class="side" id="categorylist">
<MTCategories>
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br />
</MTCategories>
</div>

２．JavaScriptファイルの作成
下記の内容を丸ごとコピーして"menufolder.js"という名前のファイルを作成します。作成したファイルはここではmt.cgiが配置されているディレクトリに配置することにします。赤および青字はオリジナルのスクリプトとの差分を示しています。
オリジナルではスクリプトをテンプレートに直接記述されていますが、他のテンプレートで同機能を持ちまわることを考え、ここでは独立したファイルにしてみました。注：ファイルの文字コードはBlogの文字コードと一致させてください。またMac+IEの場合は、後述の「テンプレートにJavaScriptファイル読み込みの設定」で示された位置に、本スクリプトを直接埋め込むようにしてください（jsファイルを正常に読み込めない報告を頂いております）。

function InitFoldNavi() {
  FoldNavigation('newentry','off',false); // new entry
  FoldNavigation('entry'   ,'on' ,true);  // entry
  FoldNavigation('comment' ,'on' ,false); // comment
  FoldNavigation('tb'      ,'on' ,false); // trackback
  FoldNavigation('archive' ,'off',true);  // archive
  FoldNavigation('link'    ,'on' ,true);  // link
  FoldNavigation('profile' ,'off',false); // profile
}
function FoldNavigation(idName,initMode,viewNum) {
  var openMark = '[＋]'; // open mark
  var closeMark = '[?]'; // close mark
  var preMark = true; // position of mark
  var idTitle = Array(idName,'name').join('');
  var idList = Array(idName,'list').join('');
  var objTitle = this.document.getElementById(idTitle);
  var objLists = this.document.getElementById(idList);
  if (!objTitle || !objLists) return;
  var dispMode = objLists.style.display;
  if (!dispMode) {
    var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
    var insMark = new Array();
    var insText = new Array();
    insMark[insMark.length] = Array('<a class="foldmark" href="#" onclick="',tmpText,'" onkeypress="',tmpText,'">').join('');
    insMark[insMark.length] = (initMode == 'off') ? openMark : closeMark;
    insMark[insMark.length] = '</a>';
    if (preMark) insText[insText.length] = insMark.join('');
    //    insText[insText.length] = objTitle.innerHTML;
    if (viewNum) {
      var objItems;
      objItems = objLists.getElementsByTagName('a');
      var counter;
      if (idName == "link") { // delete 3Link
        counter = objItems.length - 3;
      } else {
        counter = objItems.length;
      }
      insText[insText.length] = '&nbsp;&nbsp;' + Array(' <span>',counter,'</span>').join('') + ' ' + objTitle.innerHTML;
    } else {
      insText[insText.length] = '&nbsp;&nbsp;' + objTitle.innerHTML; 
    }
    if (!preMark) insText[insText.length] = insMark.join('');
    objLists.style.display = (initMode == 'off') ? 'none' : 'block';
    objTitle.innerHTML = insText.join('');
  } else if (initMode == 'chng') {
    var objMarks = objTitle.getElementsByTagName('a');
    for (i=0;i<objMarks.length;i++) {
      if (objMarks[i].className == 'foldmark') {
        objMarks[i].firstChild.nodeValue = (dispMode == 'none') ? closeMark : openMark;
      }
    }
    objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
  }
}
InitFoldNavi();

以下スクリプトの説明です。上部にある

FoldNavigation('newentry','off',false); 

ですが、（）内のパラメータの意味はそれぞれ

FoldNavigation('id属性名','初期状態',リスト数表示);

です。id属性名が先の"category"や"entry"に対応します。つまり折りたたみをしたいメニュー分、この行を作ります（注：全角文字（空白など）が混入しないように気をつけてください）。その右の初期状態はページを開いた時の折りたたみ状態です。onは開いた上体、offは閉じた状態です。最後のリスト数表示はタイトル横にそのメニュー内のリスト数（例えばカテゴリーメニューにカテゴリーが10あれば"10"）を表示します。'true'と記述すれば表示、'false'は非表示です。

青色部分はオリジナルから変更した部分です。以下主な変更内容です。
まず、"[＋]"、"[?]"はメニュータイトル横に表示される折りたたみ切り替え用のリンク文字です（好きな文字を設定できます）。
このスクリプトは前述の通りタイトル横にリストの合計数を表示してくれます。オリジナルは"li"のタグ数を計算して表示していますが改造版では<a href="?">タグの数を計算するようにしています（リスト表示に<li>タグを使っていないため）。またオリジナルではリストの合計数をタイトル右側に"（）"で表示していますが、このスクリプトではタイトルの左側に表示するようにしてみました。BlogPeopleのリンク数についてはバナーと登録用リンクの計3つが余分なので、その分を減算しています（エレガントさに欠けますが…）。
さらに折りたたみ用マークをつけることでタイトルの位置が若干左にずれるため、タイトル左に全角空白を1文字挿入して微妙に位置調整しています（ただしマークをタイトル右側に挿入することが前提）。

３．テンプレートにJavaScriptファイル読み込みの設定
テンプレートの一番最後の方（</body>の直前等）に、先に作成したJavaScriptファイルを読み込むためのタグをを挿入します。

<script type="text/javascript" src="http://xxx/menufolder.js"></script>

"xxx"の部分には任意のURLを設定してください。JavaScriptファイルをmt.cgiと同じディレクトリに配置した場合、私のblogを例にとるとxxxの部分は"www.koikikukan.com"になります。

４．スタイルシートの追加
styles-site.css の .sidetitle の下に下記を追加します。

.sidetitle a {
    float: right; /* マークを右側に配置 */
    width: 1.8em;
    text-decoration: none;
}
.sidetitle a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    padding-right:3px; /* マークの位置調整 */
}

このスタイルシートは適切な指定でないかも知れませんがとりあえず正常に動作しています。

設定方法は以上です。当初マークが右側に配置されなくて悩みましたがオリジナルのサイトにかなりの質問コメントが寄せられており、そちらを参照しました（スタイルシートのfloat: rightの設定とJavaScript上部にある「マークの挿入位置」がきちんと指定できていれば大丈夫みたいです）。
マークは右側に無事配置されたのですが今度はタイトル右端にくっついてしまうのが気になるので、これはpaddingで調整しました。blogの中にblogを作っている気分です。この時スタイルシートを変更しても変更が反映されずまたしても悩みましたが、ブラウザのキャッシュに古いデータが残っているのが原因のようでした。IEであればブラウザの「更新」をクリックするかキャッシュを削除しましょう。

ちなみに「Recent Comments」等もリスト数を取得できる筈なのですが動作確認できていないので保留にしています。できるようになりました。↓追記参照ください。

2004.08.31追記
上記2.の青色部分を下記のスクリプトの青色部分と入れ替えれば「最近のコメント」も件数表示が可能になります。これは「最近のコメント」にあるURLのaタグの"#"を計数しています。

if (viewNum) {
  var objItems;
  var href;
  var commentCounter = 0;
  objItems = objLists.getElementsByTagName('a');
  if (idName == 'comment') {
    for (i = 0; i < objItems.length; i++) {
      href = objItems[i].getAttribute("href");
      if(href.indexOf("#") == -1){
        commentCounter++;
      }
    }
  }
  var counter;
  if (idName == "link") {
    counter = objItems.length - 3;
  } else {
    counter = objItems.length - commentCounter;
  }
  insText[insText.length] = '&nbsp;&nbsp;' + Array(' <span>',counter,'</span>').join('') + ' ' +　objTitle.innerHTML;
} else {
  insText[insText.length] = '&nbsp;&nbsp;' + objTitle.innerHTML;
}

2004.09.20追記
BlogPeople以外にリンクを増やす場合は

if (idName == "link") { // Linkは不要な3リンク分を減算
  counter = objItems.length - 3;
} else {
  counter = objItems.length;
}

の部分を

if (idName == "link1") {
  counter = objItems.length - 3;
} else if (idName == "link2") {
  counter = objItems.length - 2;
} else {
  counter = objItems.length;
}

のように、link名を適宜対応した属性名のものに変更して条件文を必要な分だけ追加してください。追加するのは減算が必要な場合だけです。

2004.10.01追記
コピー後、";"のある行は途中で折り返しがないかご確認ください（折り返しがあるとsafariで正常に表示されないようです）

2004.11.01追記
サイドメニュー折りたたみ状態保持スクリプトおよびサイドメニュー折りたたみの動作遅延対処へのリンクを本文に追加しました。

2004.11.02追記
JavaScriptの日本語コメントを半角英数に修正しました。またMac+IEの場合はmenufolder.jsを正常に読み込めないようですので、スクリプトを直接テンプレート内に埋め込む記述を追加しました。