Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法
2日ほど前に、このブログに「月別カテゴリーアーカイブ」を追加しました。カテゴリー・アーカイブの右下に表示されている「Category Monthly Archives」から辿れます。
追加した目的は2つあり、ひとつはカテゴリーアーカイブのナビゲーションを増やしたかったこと、もうひとつは Google 検索の「小粋空間」の検索で、どの程度のページ増加があるのかを確認したかったためです。
ページ増加の結果については最後に記すことにして、ここでは、Movable Type 3 からのアップグレードによる「月別カテゴリーアーカイブ」の追加方法を紹介します。
１．日付+カテゴリー（ユーザ）アーカイブについて
カテゴリーアーカイブやユーザアーカイブは、日付アーカイブ（年別・月別等）と異なり、記事数が増加することで1ページのファイルサイズが無限に増えていきます。
Movable Type 3 まではページ分割のカスタマイズでこの問題を回避していましたが、Movable Type 4 では、カテゴリーアーカイブとユーザアーカイブをさらに日付と組み合わせたアーカイブを作成することができるようになったので、例えば、あるカテゴリーアーカイブのトップには一定の記事数を表示し、過去の記事については「日付+アーカイブ」のページへリンクすれば、ページ分割として利用することができ、カテゴリーアーカイブ／ユーザアーカイブのトップページのファイルサイズを抑えることができます。
２．月別カテゴリーアーカイブの作成
Movable Type 4 の新規インストールでは「月別カテゴリーアーカイブ」がデフォルトで用意されているので、ここでは Movable Type 3 のアップグレードで Movable Type 4 運用のケースで「月別カテゴリーアーカイブ」を追加する場合について簡単に説明します。
２．１ アーカイブテンプレートの追加
既存のカテゴリー・アーカイブを利用する場合と、アーカイブを新規作成する場合で若干手順が異なります。
２．１．１ 既存のカテゴリー・アーカイブを利用する場合
「デザイン」→「テンプレート」→「アーカイブテンプレート」→「カテゴリー・アーカイブ」を選択。
２．１．２ 新規で作成する場合
「デザイン」→「テンプレート」→「アーカイブテンプレート」で、「アーカイブテンプレートを作成」の右にある「ブログ記事リスト」をクリック。
タイトルに「月別カテゴリー」を入力し（名前は何でもいいです）、編集画面の内容にカテゴリー・アーカイブと同じ内容を設定。
２．２ アーカイブマッピングを追加
ページ下にある「アーカイブマッピング」の「新しいアーカイブマッピングを作成」をクリック。
セレクトボックスで「カテゴリー - 月別」を選択し、「追加」をクリック。
これで、再構築をすれば「月別カテゴリーアーカイブ」が生成されます。
３．月別カテゴリーアーカイブリストへのリンクを追加
カテゴリーアーカイブのサイドバーに、月別カテゴリーアーカイブリストへのリンクを追加します。下は MT3 のデフォルトテンプレートに合わせたスタイルにしています。
<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<div class="module-archives module">
<h2 class="module-header"><$MTArchiveTitle$>:月別アーカイブ</h2>
<div class="module-content">
<MTArchiveList archive_type="Category-Monthly">
<MTArchiveListHeader><ul class="module-list"></MTArchiveListHeader>
<li class="module-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>
<MTArchiveListFooter></ul></MTArchiveListFooter>
</MTArchiveList>
</div>
</div>
</MTIfArchiveTypeEnabled>
</MTIf>４．完成例
トップページにある「趣味」というカテゴリーページへのリンクをクリックすると、
「趣味」カテゴリーのサイドバーに「趣味：月別アーカイブ」というリンクが表示されます。
５．検索結果ページ数増加について
「月別カテゴリーアーカイブ」追加による増加ページ数は、約800ページです。
で、「小粋空間」というキーワードで Google 検索すると、ここ最近は160 万件位で頭打ち状態だったのですが、今日調べてみると、260 万件まで増加していました（もう少し日が経つと減少するかもしれません）。
ちなみに、著名なブログでも検索結果ページ数は当ブログより少ないケースが少なくないのですが、ここまで検索結果ページ数が稼げているのは、テンプレート利用者のサイトに設定しているクレジットバナーのおかげだと感謝しています。
月別アーカイブリストのタイトル表示の不具合を解消する
Movable Type 4 のデフォルトテンプレートで、月別カテゴリーアーカイブを表示した時、サイドバーにある月別アーカイブリストのタイトル表示を改善するカスタマイズです。
１．概要
月別カテゴリーアーカイブを表示した時、サイドバーにある「月別アーカイブリスト」は、表示されているカテゴリーだけの月別アーカイブリストが表示される仕組みになっています。
この新しい「月別カテゴリー」の出現により、カテゴリーアーカイブをプラグインでページ分割する必要がなくなります（決まった件数で分割したい場合や、カテゴリーアーカイブ自体を分割したい場合はプラグインを利用しましょう）。
そして、月別カテゴリーアーカイブのサイドバーにある、「月別アーカイブリスト」のタイトルは、
- [カテゴリー名]: 月別アーカイブ
となります。
２．問題点
そこまではいいのですが、月別カテゴリーアーカイブの「月別アーカイブリスト」のリンクをクリックすると、遷移したページにある「月別アーカイブリスト」のタイトルが
- [カテゴリー名]: [年月]: 月別アーカイブ
となってしまい、「月別アーカイブリスト」なのにタイトルに特定の月が表示されるという、妙な状態になってしまっています。
３．対処方法
月別カテゴリーアーカイブに表示されている月別アーカイブリストのリンクをクリックしても、常に
- [カテゴリー名]: 月別アーカイブ
が表示されるようにするには、「テンプレートモジュール」の「サイドバー(2カラム)」または「サイドバー(3カラム)」の下記の部分を修正します。
変更前（赤色を削除）
：
<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<div class="widget-categories widget">
<h3 class="widget-header"><$MTArchiveTitle$>: 月別アーカイブ</h3>
<div class="widget-content">
<MTArchiveList archive_type="Category-Monthly">
<MTArchiveListHeader>
<ul class="widget-list">
</MTArchiveListHeader>
<li class="widget-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
<MTArchiveListFooter>
</ul>
</MTArchiveListFooter>
</MTArchiveList>
</div>
</div>
</MTIfArchiveTypeEnabled>
</MTIf>
：変更後（青色を追加）
：
<MTIf name="module_category-monthly_archives">
<MTIfArchiveTypeEnabled archive_type="Category-Monthly">
<div class="widget-categories widget">
<MTSetVarBlock name="archivetitle"><$MTArchiveTitle$></MTSetVarBlock>
<h3 class="widget-header"><MTVar name="archivetitle" regex_replace="/\: .*/","">: 月別アーカイブ</h3>
<div class="widget-content">
<MTArchiveList archive_type="Category-Monthly">
<MTArchiveListHeader>
<ul class="widget-list">
</MTArchiveListHeader>
<li class="widget-list-item"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$> (<$MTArchiveCount$>)</a></li>
<MTArchiveListFooter>
</ul>
</MTArchiveListFooter>
</MTArchiveList>
</div>
</div>
</MTIfArchiveTypeEnabled>
</MTIf>
：４．注意事項
カテゴリーに「: 」が含まれていると期待した表示になりません。もう少し良い正規表現、あるいは改善策がありましたらご教示ください。
Movable Type の月別アーカイブリストを簡略表示する
月別アーカイブリストをスクリーンショットのように簡略表示にするカスタマイズです。ご質問を頂きましたので本エントリーにて紹介致します。
調べてみたところ、このような表示は俗に「monthchunks」と呼ばれているようです。
１．プラグインのダウンロード・アップロード
下記のリンクよりプラグインをそれぞれダウンロードしてください。
- ArchiveDateHeader プラグイン
- ArchiveDateFooter プラグイン
ダウンロードしたアーカイブを解凍し、中にあるファイルを、Movable Type の plugins ディレクトリにアップロードします（詳細はそれぞれのエントリーを参照ください）。
管理メニューの
メイン・メニュー > システム・メニュー > プラグイン
で、それぞれのプラグイン名が表示されればOKです。
２．月別アーカイブリストタグの設定
月別アーカイブリストを、表示させたいテンプレートのサイドバー部分に貼り付けます。
デフォルトテンプレートの場合
<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
<h2 class="module-header"><a href="<$MTBlogURL$>archives.html">アーカイブ</a></h2>
<div class="module-content">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader>
<dl class="module-list module-mc-archive">
<dt class="module-mc">
<$MTArchiveDate format="%Y年"$>
</dt>
</MTArchiveDateHeader>
<dd class="module-mc-item">
<a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B"$></a>
</dd>
<MTArchiveDateFooter>
</dl>
</MTArchiveDateFooter>
</MTArchiveList>
</div>
</div>
</MTIfArchiveTypeEnabled>公開テンプレートの場合
<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="sidetitle">
Monthly Archives
</div>
<div class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader>
<dl class="module-list module-mc-archive">
<dt class="module-mc">
<$MTArchiveDate format="%Y年"$>
</dt>
</MTArchiveDateHeader>
<dd class="module-mc-item">
<a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B"$></a>
</dd>
<MTArchiveDateFooter>
</dl>
</MTArchiveDateFooter>
</MTArchiveList>
</div>
</MTIfArchiveTypeEnabled>３．CSS の設定
下記の CSS をスタイルシートに追加します。
デフォルトテンプレートの場合
.module-mc-archive {
margin:0 0 8px;
padding:0;
}
.module-mc {
margin:0;
padding:0;
}
.module-mc-item {
display: inline;
margin:0 0 0 4px;
padding:0;
}公開テンプレートの場合
.module-mc-archive {
margin:0 0 5px;
padding:0;
}
.module-mc {
margin:0;
padding:0;
}
.module-mc-item {
display: inline;
margin:0 0 0 1px;
padding:0;
}月別アーカイブの折りたたみで年表示に折りたたみのリンクを与える
月別アーカイブリストの年別の折りたたみで、年表示に折りたたみ用のリンクを与えるカスタマイズです。
これまで紹介してきた「月別アーカイブリストの年別折りたたみ」では、年表示の横に折りたたみマークを表示していましたが、「年表示にリンクを設定できないでしょうか」というご質問を頂きました。たしかに月別アーカイブでは年表示部分に他のアーカイブにジャンプするリンクがある訳ではないのでごもっとです。
ということで本エントリーにてカスタマイズ方法をご紹介致します。
スクリーンショットは完成例です。ご覧の通り、年表示部分に折りたたみのリンクが表示されます。
１．「月別アーカイブリストの年別の折りたたみ」を行っていない場合
まず、月別アーカイブリストの折りたたみを設定していない方は、「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」を参照して、カスタマイズを行ってください。
設定後、２項をスキップして３項の設定を行ってください
２．「月別アーカイブリストの年別の折りたたみ」をすでに行っている場合
下記のリンクより menufolder.js（6.03 以上） をダウンロードして、３項に進んでください。
３．年表示に折りたたみのリンクを与える
ダウンロードした menufolder.js を任意のエディタで開き、アーカイブリストマーク表示の設定項目にある、下記の赤色部分
：
// アーカイブリスト用折りたたみマーク使用
// 折りたたみマークを使用しない場合は年表示にリンクを設定
// 使用する：true
// 使用しない：false
var displayArchivesMark = true;
：を「false」に変更してください。
：
// アーカイブリスト用折りたたみマーク使用
// 折りたたみマークを使用しない場合は年表示にリンクを設定
// 使用する：true
// 使用しない：false
var displayArchivesMark = false;
：折りたたみマークを表示したい場合は「true」のままで OK です。
あとは修正した menufolder.js をサーバにアップロードします。これで年表示にリンクが付与されます。
JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ
さらに、年毎のツリー化リストに折りたたみマークを与えるために「月別アーカイブリストの年毎の折りたたみ for Movable Type」もエントリーしました。この複合技が左のスクリーンショットになります。 上記とは別に、ツリー化をより簡単に実現するテクニックとして、「JavaScript 不要なサイドメニューのツリー化 for Movable Type」をエントリーしました。 |
月別アーカイブのリスト表示は、Movable Type のデフォルト機能では全ての年月を連続で表示することしかできませんが、プラグインを利用することで年毎の表示が可能になり、これを利用して、以前「ということで、本エントリーで、月別アーカイブリストの
- 年別ツリー化
- 年別折りたたみ
- 全体の折りたたみ
について、まとめてカスタマイズする手順を紹介致します。
以前、ご質問を頂いていた回答ですが、公開が遅くなり申し訳ございませんでした。この場をお借りしてお詫び申し上げます。
１．プラグインのダウンロード・アップロード
下記のリンクよりプラグインをそれぞれダウンロードしてください。
- ArchiveDateHeader プラグイン
- ArchiveDateFooter プラグイン
ダウンロードしたアーカイブを解凍し、中にあるファイルを、Movable Type の plugins ディレクトリにアップロードします（詳細はそれぞれのエントリーを参照ください）。
管理メニューの
メイン・メニュー > システム・メニュー > プラグイン
で、それぞれのプラグイン名が表示されればOKです。
２．スクリプトのダウンロード
下記のリンクより menufolder.js をダウンロードしてください。
３．スクリプトの修正
menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を必要に応じて適宜変更してください。デフォルトの状態では各年の最後尾に折りたたみマークが表示される設定になっています。
// アーカイブリスト用折りたたみマーク // 上：閉じている状態で表示されるマーク // 下：開いている状態で表示されるマーク var openMarkForArchives = '▼'; var closeMarkForArchives = '▲'; // アーカイブリスト用折りたたみマーク挿入位置 // カテゴリー前に折りたたみマークを配置：true // カテゴリー後に折りたたみマークを配置：false var preMarkForArchives = false; // アーカイブリストのタイトルとマークのスペース var offsetForTitleAndMarkOfArchives = 1;- リスト3.1 menufolder.js の修正箇所
４．スクリプトのアップロード
menufolder.js を index.html のあるディレクトリにアップロードします。
５．テンプレートの修正（script タグ追加）
月別アーカイブリストを表示したいテンプレートに、 </head> の直前にリスト5.1 のタグを追加します（すでに他の折りたたみで設定済の方はこの項をスキップしてください）。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>- リスト5.1 script タグの追加
６．ツリー画像のダウンロード・アップロード
下記のツリー画像をダウンロードしてください。画像は、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。
保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
ダウンロードした画像ファイルのファイル名をそれぞれ
- tree_lst.gif
- tree_end.gif
に変更して、サーバにアップロードします。アップロード先は任意ですが、ここでは index.html と同じディレクトリにアップロードしてください。
７．月別アーカイブの年別ツリー化表示＋折りたたみ用タグの設定
月別アーカイブの年別ツリー化表示＋折りたたみができるタグ（リスト7.1）を、表示させたいテンプレートのサイドバー部分に貼り付けます。div 要素は当サイトで公開しているテンプレートに合わせたものですので、設定は任意です。お好みに応じて修正してください。
<div class="sidetitle"> Monthly Archives </div> <div class="side"> <MTArchiveList archive_type="Monthly"> <MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader> <li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter> </MTArchiveList> </div> <script type="text/javascript"> //<![CDATA[ <MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader> </MTArchiveList> //]]> </script>- リスト7.1 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ
メニューリスト全体を折りたたみたい場合は、リスト7.1 に下記の青色部分 *1 を追加してください。
<div class="sidetitle" id="monthlyname"> Monthly Archives </div> <div class="side" id="monthlylist"> <MTArchiveList archive_type="Monthly"> <MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list" class="tree"></MTArchiveDateHeader> <li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter> </MTArchiveList> </div> <script type="text/javascript"> //<![CDATA[ <MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader> </MTArchiveList> FoldNavigation('monthly','off',false); //]]> </script>- リスト7.2 月別アーカイブの年別ツリー化表示＋折りたたみ用タグ2
８．CSS
リスト8.1 をスタイルシートに追加してください。
ul.tree { margin: 0 0 0 15px; padding: 0; font-size: 9px; 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; }- リスト8.1 CSS
*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
サイドメニューの一部を折りたたむ
ブログのオーソドックスなカスタマイズのひとつに「サイドメニューの折りたたみ」があります。これはサイドバーに表示させている「最新のエントリー」や「カテゴリーリスト」等のメニューリストが縦に長くなった場合、リストを折りたたむ（非表示にする）ことでスクロール量を少なくしたり、サイドバーをスッキリさせる効果があります。
本エントリーではメニューリスト全体を折りたたむのではなく、リストの一部を表示させておき、残りの部分を折りたたむという、いわゆる「サイドメニューの続きを読む」のカスタマイズをご紹介します。このカスタマイズに対応するブログは 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 した値を設定してください。またリスト数が折りたたみに満たない場合でも正常にマークアップするようになっています。
月別アーカイブリストの年毎の折りたたみ for Movable Type
ここではスクリーンショットのように、月別アーカイブリストで年毎に折りたたみマークを付与する方法をご紹介します。当サイトの右サイドバーに設定していますので、動作をご確認ください。 なおアーカイブリストのツリー化については「月別アーカイブリストのツリー化 for Movable Type」のカスタマイズを行ってください（本記事と内容が一部重複しています）。 |
折りたたみとツリー化を同時に行ないたい場合は「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」をご覧ください。
１．事前準備
このカスタマイズを行うには下記のプラグインをインストールし、MTArchiveDateHeader および MTArchiveDateFooter タグが動作するようにしてください。
ArchiveDateHeader プラグイン
ArchiveDateFooter プラグイン
２．スクリプトのダウンロード
下記のリンクより menufolder.js をダウンロードしてください。今回のアーカイブリスト折りたたみ用にバージョンアップしていますので、すでに menufolder.js をお使いの方も再度ダウンロードしてください。
３．スクリプトの修正
menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を適宜修正してください。デフォルトの状態では各年の後方に折りたたみマークが表示されるようになっていますので、そのままでもお使いになれます。
// アーカイブリストフラグ
// サブカテゴリーの折りたたみを有効にする(別途テンプレート設定が必要)
// 有効にする：true
// 無効にする：false
var archives = true;
// アーカイブリスト用折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
var openMarkForArchives = '▼';
var closeMarkForArchives = '▲';
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置：true
// カテゴリー後に折りたたみマークを配置：false
var preMarkForArchives = false;
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;４．スクリプトのアップロード
menufolder.js を index.html のあるディレクトリにアップロードします。
５．テンプレートの修正（script タグ追加）
アーカイブリストを表示したいテンプレートの <head> ? </head> の間に下記のタグを追加します（すでに設定済の方はこの項をスキップしてください）。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>６．テンプレートの修正（折りたたみつき月別アーカイブリスト追加）
月別アーカイブリストを表示したいテンプレートに下記のタグを設定します。サンプルは公開テンプレートに設定したものです。
青色で示した部分が月別アーカイブリストの表示で使用するタグになります。タグの構造がお分かりでない場合はこの部分に修正を加えたり改行を挿入しないでください。
その他の部分はご自身のテンプレートに併せて適宜修正してください。
<div class="sidetitle">
Monthly Archives
</div>
<div class="side">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div id="archive<$MTArchiveDate format="%Y"$>name"><span><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list"></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください（アクセシビリティ向上のため、1年ほど前からこの機能を提供していましたが、パフォーマンスの関係で停止していました）。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
月別アーカイブリストのツリー化 for Movable Type
 ArchiveDateHeader プラグインおよび、昨日公開した ArchiveDateFooter プラグインを利用した、月別アーカイブリストのツリー化カスタマイズを紹介します。 |
ツリー化にあたっては、公開テンプレートをサンプルに用いて
- 各年の月をツリー化
- 年と各年の月をツリー化
の2通りの方法を説明しています。いずれかお好きな方を選択してください。またデフォルトテンプレート等、他のテンプレートでも利用可能ですが、ツリー表示についてはスタイルシートの設定を適宜修正して調整してください。
なおツリー化の基本的なカスタマイズについてはサイドメニューのツリー化スクリプト（改）を参照してください。ここでは差分のみを記し、スクリプトおよびツリー画像の設定等については割愛しています。
さらにツリー表示を年毎に折りたたむこともできます。その場合は「月別アーカイブリストの年毎の折りたたみ for Movable Type」をご覧ください。
１．各年の月をツリー化
 １項では、左のスクリーンショットのように各年の月をツリー化する方法を紹介します。 |
１．１ テンプレートの修正
月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。<div class="side" id="archives">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><span><$MTArchiveDate format="%Y年"$></span><ul></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
<!--
generateNormalTree('archives');
//-->
</script>１．２ スタイルシートの修正
下記のスタイルを styles-site.css に追加します。ul.tree {
margin: 0 0 0 15px!important;
padding: 0px!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
margin-left: 10px!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 11px!important;
background-image: url(tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(tree_end.gif);
list-style: none;
}２．年と各年の月をツリー化
 ２項は各年の月のツリー化だけでなく、年表示部分もツリー化する方法を紹介します。 |
２．１ テンプレートの修正
月別アーカイブリスト表示したいテンプレートに、下記のタグを設定します。<div class="side" id="archives">
<ul>
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><li><$MTArchiveDate format="%Y年"$><ul></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></li></MTArchiveDateFooter>
</MTArchiveList>
</ul>
</div>
<script type="text/javascript">
<!--
generateTreeForTreeStructure('archives');
//-->
</script>２．２ スタイルシートの修正
下記のスタイルを styles-site.css に追加します。ul.tree {
margin: 0 0 0 5px!important;
padding: 0px!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0!important;
padding: 0!important;
margin-left: 10px!important;
}
ul.tree li {
margin: 0!important;
padding: 0 0 0 11px!important;
background-image: url(tree_lst.gif);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(tree_end.gif);
list-style: none;
}３．その他
すでに他でツリーの設定を行っている場合は、同じ設定を利用するか、#archives ul.tree {
：という具合に、スタイルシートの該当部分に id 属性を追加して、他の設定と干渉しないようにしてください。
