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

月別アーカイブリストの年別表示（ツリー化＋折りたたみ）

Movable Type の「月別アーカイブリストの年別表示」に、ツリー化および年別の折りたたみを加えるカスタマイズです。このカスタマイズにはプラグインを使いません。

公開テンプレート（変更前）

公開テンプレート（変更後・折りたたんだ状態）

公開テンプレート（変更後・開いた状態）

デフォルトテンプレート（変更前）

デフォルトテンプレート（変更後・折りたたんだ状態）

デフォルトテンプレート（変更後・開いた状態）

このエントリーは「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」を改良したものです。

このカスタマイズは、Movable Type 4.1以降で有効です。

以下、カスタマイズ手順を紹介します。

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

下記のリンクより menufolder.js をダウンロードしてください。

download

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

menufolder.js を、ブログのメインページ（index.html）と同じディレクトリにアップロードします。

３．テンプレートモジュールの修正（script タグ追加）

テンプレートモジュールに下記の script 要素を追加します。利用しているテンプレートによって追加するテンプレートモジュールが次のように異なりますので注意してください。

• 公開テンプレート：「ヘッダー」テンプレートモジュールの</head> の直前
• デフォルトテンプレート（4.1x）：「ヘッダー」テンプレートモジュールの </head> の直前
• デフォルトテンプレート（4.2x）：「HTMLヘッダー」テンプレートモジュールの <$mt:CCLicenseRDF$> の直前

<script type="text/javascript" src="<$mt:BlogURL$>menufolder.js"></script>

４．ツリー画像のダウンロード・アップロード

下記のツリー画像をダウンロードしてください。画像は、実線表示用（solid）・点線表示用（dotted）の2種類を用意していますので、お好きな方をダウンロードしてください。

実線表示用：tree_lst_solid.gif / tree_end_solid.gif

点線表示用：tree_lst_dotted.gif / tree_end_dotted.gif

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

ダウンロードした画像ファイルのファイル名をそれぞれ、

tree_lst.gif

tree_end.gif

に変更し、ブログのメインページ（index.html）と同じディレクトリにアップロードします。

５．月別アーカイブの年別ツリー化表示＋折りたたみ用タグの設定

ブログ管理画面の「デザイン」→「ウィジェット」で「月別アーカイブ」を下記の内容に入れ替えてください。

５．１ 公開テンプレート

<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">Monthly Archives</dt>
<dd class="side">
  <mt:archiveList archive_type="Monthly" sort_order="descend">
    <mt:archiveListHeader>
  <ul>
    <li><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:archiveDate format="%Y&#24180;" /></span></div>
      <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
      <mt:setVarBlock name="monthly_fold_script">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
      </mt:setVarBlock>
    </mt:archiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
        <li class="tree tree_end"><mt:getVar name="month_title" /></li>
      </ul>
    </li>
    <li><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:getVar name="current_year" /></span></div>
      <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      <mt:setVarBlock name="monthly_fold_script" prepend="1">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off');
      </mt:setVarBlock>
    <mt:else>
      <mt:unless name="__first__">
        <li class="tree"><mt:getVar name="month_title" /></li>
      </mt:unless>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
    <mt:setVarBlock name="month_title">
      <a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /></a> [<mt:archiveCount />]
    </mt:setVarBlock>
    <mt:archiveListFooter>
        <li class="tree tree_end"><mt:getVar name="month_title" /></li>
      </ul>
    </li>
  </ul>
    </mt:archiveListFooter>
  </mt:archiveList>
</dd>
<dd>
<script type="text/javascript">
//<![CDATA[
<mt:getVar name="monthly_fold_script" />
//]]>
</script>
</dd>
</mt:ifArchiveTypeEnabled>

５．２ デフォルトテンプレート（MT4.1x）

<mt:IfArchiveTypeEnabled archive_type="Monthly">
  <mt:ArchiveList archive_type="Monthly">
    <mt:ArchiveListHeader>
<div class="widget-archive-monthly widget-archive widget">
  <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
  <div class="widget-content">
    <ul class="widget-list">
      <li class="widget-list-item"><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:archiveDate format="%Y&#24180;" /></span></div>
        <ul id="archive<mt:archiveDate format="%Y" />list" class="widget-list tree">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
      <mt:setVarBlock name="monthly_fold_script">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
      </mt:setVarBlock>
    </mt:ArchiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
          <li class="widget-list-item tree tree_end"><mt:getVar name="month_title" /></li>
        </ul>
      </li>
      <li class="widget-list-item"><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:getVar name="current_year" /></span></div>
        <ul id="archive<mt:archiveDate format="%Y" />list" class="widget-list tree">
      <mt:setVarBlock name="monthly_fold_script" prepend="1">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off');
      </mt:setVarBlock>
    <mt:else>
      <mt:unless name="__first__">
          <li class="widget-list-item tree"><mt:getVar name="month_title" /></li>
      </mt:unless>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
    <mt:setVarBlock name="month_title">
      <a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /> (<mt:archiveCount />)</a>
    </mt:setVarBlock>
    <mt:ArchiveListFooter>
          <li class="widget-list-item tree tree_end"><mt:getVar name="month_title" /></li>
        </ul>
      </li>
    </ul>
  </div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<mt:getVar name="monthly_fold_script" />
//]]>
</script>
</mt:IfArchiveTypeEnabled>

５．３ デフォルトテンプレート（MT4.2x）

<mt:IfArchiveTypeEnabled archive_type="Monthly">
  <mt:ArchiveList archive_type="Monthly">
    <mt:ArchiveListHeader>
<div class="widget-archive-monthly widget-archive widget">
  <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
  <div class="widget-content">
    <ul>
      <li><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:archiveDate format="%Y&#24180;" /></span></div>
        <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
      <mt:setVarBlock name="monthly_fold_script">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off',false);
      </mt:setVarBlock>
    </mt:ArchiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
          <li class="tree tree_end"><mt:getVar name="month_title" /></li>
        </ul>
      </li>
      <li><div id="archive<mt:archiveDate format="%Y" />name"><span><mt:getVar name="current_year" /></span></div>
        <ul id="archive<mt:archiveDate format="%Y" />list" class="tree">
      <mt:setVarBlock name="monthly_fold_script" prepend="1">
        FoldNavigation('archive<mt:archiveDate format="%Y" />','off');
      </mt:setVarBlock>
    <mt:else>
      <mt:unless name="__first__">
          <li class="tree"><mt:getVar name="month_title" /></li>
      </mt:unless>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
    <mt:setVarBlock name="month_title">
      <a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /> (<mt:archiveCount />)</a>
    </mt:setVarBlock>
    <mt:ArchiveListFooter>
          <li class="tree tree_end"><mt:getVar name="month_title" /></li>
        </ul>
      </li>
    </ul>
  </div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<mt:getVar name="monthly_fold_script" />
//]]>
</script>
</mt:IfArchiveTypeEnabled>

６．CSS

スタイルシートに以下の内容を追加してください。

ul.tree {
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;
}
ul.tree ul {
    margin: 0 0 0 10px;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 11px;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat;
    list-style: none;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    list-style: none;
}

すべてを再構築をすれば、月別アーカイブのツリー化と折りたたみが行なえます。

７．ツリー化のみ行いたい場合

１～３項の作業を取り消してください。

８．折りたたみのみ行いたい場合

６項の作業を取り消してください。