2009年6月15日

月別アーカイブリストの年別表示(ツリー化+折りたたみ)

June 15,2009 12:03 AM
Tag:[, , , , ]
Permalink

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

公開テンプレート(変更前)
公開テンプレート(変更前)

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

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

デフォルトテンプレート(変更前)
デフォルトテンプレート(変更前)

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

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

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

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

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

1.スクリプトのダウンロード

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

download

2.スクリプトのアップロード

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

3.テンプレートモジュールの修正(script タグ追加)

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

  • 公開テンプレート:「ヘッダー」テンプレートモジュールの</head> の直前
  • デフォルトテンプレート(4.1x):「ヘッダー」テンプレートモジュールの </head> の直前
  • デフォルトテンプレート(4.2x):「HTMLヘッダー」テンプレートモジュールの <$mt:CCLicenseRDF$> の直前
<script type="text/javascript" src="<$mt:BlogURL$>menufolder.js"></script>

4.ツリー画像のダウンロード・アップロード

下記のツリー画像をダウンロードしてください。画像は、実線表示用(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)と同じディレクトリにアップロードします。

5.月別アーカイブの年別ツリー化表示+折りたたみ用タグの設定

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

5.1 公開テンプレート

<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>

5.2 デフォルトテンプレート(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>

5.3 デフォルトテンプレート(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>

6.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;
}

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

7.ツリー化のみ行いたい場合

1~3項の作業を取り消してください。

8.折りたたみのみ行いたい場合

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

Comments [15] | Trackbacks [1]
2009年6月 1日

月別アーカイブリストの年別表示

June 1,2009 1:55 AM
Tag:[, , ]
Permalink

Movable Type 4.1 以降で、ネイティブタグを使って月別アーカイブリストを年別に表示するカスタマイズです。

これまで、月別アーカイブリストを年別に分割して表示させるために、ArchiveDateHeader プラグインと ArchiveDateFooter プラグインを使った方法を紹介してきましたが、MT4.1 以降ではネイティブタグのみで表示することが可能になっています。

公開テンプレート(変更前)
月別アーカイブの年別表示(変更前)

公開テンプレート(変更後)
月別アーカイブの年別表示(変更後)

デフォルトテンプレート(変更前)
月別アーカイブの年別表示(変更前)

デフォルトテンプレート(変更後)
月別アーカイブの年別表示(変更後)

ここでは公開テンプレートとデフォルトテンプレートでのサブテンプレートを紹介します。ツリー化や折りたたみなどの付加機能は別エントリーしたいと思います。

1.公開テンプレート

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

<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">Monthly Archives</dt>
<dd class="side">
  <mt:archiveList archive_type="Monthly">
    <mt:archiveListHeader>
  <ul>
    <li><mt:archiveDate format="%Y&#24180;" />
      <ul>
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
    </mt:archiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
      </ul>
    </li>
    <li><mt:getVar name="current_year" />
      <ul>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
        <li><a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /></a> [<mt:archiveCount />]</li>
    <mt:archiveListFooter>
      </ul>
    </li>
  </ul>
    </mt:archiveListFooter>
  </mt:archiveList>
</dd>
</mt:ifArchiveTypeEnabled>

2.デフォルトテンプレート(MT4.1)

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

<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"><mt:archiveDate format="%Y&#24180;" />
        <ul class="widget-list">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
    </mt:ArchiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
        </ul>
      </li>
      <li class="widget-list-item"><mt:getVar name="current_year" />
        <ul class="widget-list">
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
          <li class="widget-list-item"><a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle regex_replace="/\d+&#24180;/",""$> (<$mt:ArchiveCount$>)</a></li>
    <mt:ArchiveListFooter>
        </ul>
      </li>
    </ul>
  </div>
</div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</mt:IfArchiveTypeEnabled>

3.デフォルトテンプレート(MT4.2~)

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

<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><mt:archiveDate format="%Y&#24180;" />
        <ul>
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
    </mt:ArchiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
        </ul>
      </li>
      <li><mt:getVar name="current_year" />
        <ul>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
          <li><a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle regex_replace="/\d+&#24180;/",""$> (<$mt:ArchiveCount$>)</a></li>
    <mt:ArchiveListFooter>
        </ul>
      </li>
    </ul>
  </div>
</div>
    </mt:ArchiveListFooter>
  </mt:ArchiveList>
</mt:IfArchiveTypeEnabled>

サブテンプレートの詳細については、「Movalbe Type 4.2 パーフェクトガイド」の「6.28 月別アーカイブ一覧に年別の見出しを表示する」をご覧ください。

Movable Type 4.2 パーフェクトガイドMovable Type 4.2 パーフェクトガイド
荒木 勇次郎

毎日コミュニケーションズ 2008-07-31
売り上げランキング : 1457

Amazonで詳しく見る
by G-Tools
Comments [0] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3