月別アーカイブリストの年毎の折りたたみ for Movable Type

月別アーカイブリストの年毎の折りたたみ for Movable Type

Posted at July 10,2006 8:03 AM
Tag:[Customize, MovableType]

月別アーカイブリストの年毎の折りたたみアーカイブリストを年毎に折りたたむカスタマイズです。
アーカイブリストはカテゴリーリストと異なり、エントリーの増加に比例して増えていきますが、このカスタマイズを行うことでアーカイブリストをコンパクトに表示することができます。

ここではスクリーンショットのように、月別アーカイブリストで年毎に折りたたみマークを付与する方法をご紹介します。当サイトの右サイドバーに設定していますので、動作をご確認ください。

なおアーカイブリストのツリー化については「月別アーカイブリストのツリー化 for Movable Type」のカスタマイズを行ってください(本記事と内容が一部重複しています)。

折りたたみとツリー化を同時に行ないたい場合は「JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ」をご覧ください。

1.事前準備

このカスタマイズを行うには下記のプラグインをインストールし、MTArchiveDateHeader および MTArchiveDateFooter タグが動作するようにしてください。

ArchiveDateHeader プラグイン
ArchiveDateFooter プラグイン

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

下記のリンクより menufolder.js をダウンロードしてください。今回のアーカイブリスト折りたたみ用にバージョンアップしていますので、すでに menufolder.js をお使いの方も再度ダウンロードしてください。

download

3.スクリプトの修正

menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を適宜修正してください。デフォルトの状態では各年の後方に折りたたみマークが表示されるようになっていますので、そのままでもお使いになれます。

// アーカイブリストフラグ
// サブカテゴリーの折りたたみを有効にする(別途テンプレート設定が必要)
// 有効にする:true
// 無効にする:false
var archives = true;
 
// アーカイブリスト用折りたたみマーク
// 上:閉じている状態で表示されるマーク
// 下:開いている状態で表示されるマーク
var openMarkForArchives  = '';
var closeMarkForArchives = '';
 
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置:true
// カテゴリー後に折りたたみマークを配置:false
var preMarkForArchives = false;
 
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;

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

menufolder.js を index.html のあるディレクトリにアップロードします。

5.テンプレートの修正(script タグ追加)

アーカイブリストを表示したいテンプレートの <head> ? </head> の間に下記のタグを追加します(すでに設定済の方はこの項をスキップしてください)。

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

6.テンプレートの修正(折りたたみつき月別アーカイブリスト追加)

月別アーカイブリストを表示したいテンプレートに下記のタグを設定します。サンプルは公開テンプレートに設定したものです。

青色で示した部分が月別アーカイブリストの表示で使用するタグになります。タグの構造がお分かりでない場合はこの部分に修正を加えたり改行を挿入しないでください。
その他の部分はご自身のテンプレートに併せて適宜修正してください。

<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 ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

月別アーカイブリストの折りたたみ from SWEET WATER Web Server
例によって、小粋空間さんのプラグイン&スクリプトを利用し、月別アーカイブリンクの年毎の折りたたみに挑戦してみました 月別アーカイブリストの年毎の折りたたみ... [続きを読む]

Tracked on July 13, 2006 11:52 AM

カテゴリーとアーカイブの折りたたみ from Hybrid Style Design. BLOG
先週末からカテゴリの整理のためFlashカテゴリを追加し、 それに伴い関連コンテ... [続きを読む]

Tracked on December 17, 2006 6:52 PM

Movable Type導入記(その3:他の日記CGIログからの移行などなど) from いるすか
リンクページができあがったので,今度は,他のカテゴリのカテゴリー・アーカイブとエ... [続きを読む]

Tracked on December 20, 2006 8:44 PM

月別アーカイブの折りたたみ from 気ままなコメント
月別アーカイブを折りたたみできるようにしました。 [続きを読む]

Tracked on January 22, 2007 12:02 AM

Firefoxの要素を調査→3D表示がとてつもなく便利! from R0cK_80y-1vv4'5_8l05_t3mpl3
本ブログの右側のメニューの「Archives」が非常に見づらかったので変更しまし... [続きを読む]

Tracked on April 28, 2012 11:26 PM
コメント

こんにちは。

月別アーカイブリスト折りたたみに挑戦しました^^
うちのツリー表示がちょっとだけ特殊なので悩んでましたが、なんとか上手くできたようですw

ところで、このエントリーにTBしたのですが反映されないみたいです^^;

[1] Posted by WIND : July 12, 2006 3:12 PM

すみません、反映されました^^;

もしやと思ってブラウザー(Firefox2.0Beta1)を疑ったんですが、その確立が高くなりました・・・
もう一件反映されないところがあるのでそちらにも送ってみます。

お騒がせしてすみませんm(._.)m

[2] Posted by WIND : July 13, 2006 11:58 AM

何度もすみません。

ブラウザーのせいなわけありませんよね・・・
どうもうちのMTがどこかでバグってるのかもしれません。

シックスアパート(日本)にも昨日TBしたのですが、「成功」とログに出ているのに先方には反映されていませんでした。で、今日再びブラウザーを変えて送ってみたのですが、今度は「失敗」で反映されません。

MT3.31の新たなバグかなぁ?
それともうちのMTがおかしいのか(´;ω;`)

もう少し調べてみます。

[3] Posted by WIND : July 13, 2006 12:23 PM

>WINDさん
こんばんは。
記事参照&トラックバックありがとうございました。
うまくできて良かったです。

なおトラックバックのエラー原因は不明です。お手数かけて申し訳ございませんでした。
ではでは!

[4] Posted by yujiro : July 14, 2006 1:45 AM

いつもお世話になっております。1、の事前準備の意味が理解できないのでもう少しわかりやすく説明宜しくお願いします。

[5] Posted by panser : July 17, 2006 4:24 AM

いつもお世話になっております。1、の事前準備でArchiveDateHeader プラグインとArchiveDateFooter プラグインをpluginsへフォルダごとUPして記事説明通りに修正しましたが月別折りたたみができません。そこで、少し気になるのがシステムメニューでArchiveDateHeader/ArchiveDateHeader.plと表示されています。ArchiveDateFooter については、そのままで表示されています。また、メインメニューの設定、プラグインでは、ArchiveDateHeader が表示されていません。ArchiveDateFooter と同じようにUPしたのですがArchiveDateFooterは、設定、プラグインで表示されています。この件が少しきになるのですがこれで宜しいのでしょうか?お手数ですがサポート宜しくお願いします。

[6] Posted by panser : July 17, 2006 4:34 PM

いつもお世話になっております。ツリー化がどうしてもわかりません。未熟ものですみません。お手数ですがアドバイス頂けないでしょうか?宜しくお願いします。

[7] Posted by panser : July 18, 2006 1:20 AM

いつもお世話になっております。なんとかツリー化まではできましたがどうしても折りたたみが未だにできません。何度も他の折りたたみも見ながら色々しますけどどうしてもできません。お忙しいところ大変申し訳ないのですがどうかサポートして頂けないでしょうか?宜しくお願いします。

[8] Posted by panser : July 19, 2006 3:48 AM

>panserさん
こんばんは。
ご返事遅くなってすいません。
HTMLを拝見させて頂いたところ、折りたたみを起動するスクリプトが表示されてないようです。原因は調べきれていませんが、6項の

<script type="text/javascript"> //<![CDATA[ <MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader> </MTArchiveList> //]]> </script>

の部分を下記に修正して頂ければ、折りたたみマークが表示されると思います。

<script type="text/javascript"> //<![CDATA[ FoldNavigation('archive2006','off',false); //]]> </script>

それではよろしくお願い致します。

[9] Posted by yujiro : July 20, 2006 1:06 AM

サポートありがとございます。ご指示頂いたようにして後、サイドバーの折りたたみができていなかったのでそれもscriptを挿入して意味かわずままどうにかできております。ありがとございました。今回は、記事を読んでもどうしても理解できませんでした。 なんとか動いてるので助かりました。そこで、これは別件なのですが、当BlogのBBS-1のフォーラムなのですがカラム全体中央に表示させたいのですがどのようにすれば良いでしょうか?(左右サイドメニューは、表示せ
ずに) また、アドバイス宜しくお願いします。

[10] Posted by panser : July 20, 2006 1:50 AM

>panserさん
こんばんは。
ご質問の件ですが、カラム全体は中央に表示されているように見えます。
勘違いでしたら具体的にどの部分がお知らせください。
それではよろしくお願い致します。

[11] Posted by yujiro : July 20, 2006 10:29 PM

説明がうまくなくてすみません。当Blogのnavigationバー内のBBS-1なのですが、現在、iframeタグで指定しているのでカテゴリー及びフォーラムが増えるとcontainer内でスクロールされてしまいます。そこで、MTエントリー記事のようにしたいとしたいと思います。具体的には、「SWEET WATER Web Server」のようにしたいと思います。ソース内を見ながら色々考えているのですがindex.phpだけになかなかどうしていいのか?わかりません。恐れ入りますが、具体的にどのようにタグ指定すればいいのかサポートしていただけないでしょうか。宜しくお願いします。

[12] Posted by panser : July 21, 2006 5:52 PM

>panserさん
こんばんは。
ご質問の件について、phpBB の勉強から始めますのでしばらくお時間ください。
それではよろしくお願い致します。

[13] Posted by yujiro : July 24, 2006 12:21 AM

Smarty errorとなります

このたびテンプレートを利用させていただくこととなりました。月別アーカイブの折りたたみで頓挫しています。
現在、Movable Type 3.31-jpを使用中で、アーカイブのみダイナミックに指定すると、トップは正常ですが各アーカイブ表示で以下のメッセージが出ます。ダイナミックでは使用できないのでしょうか。スタテックにすれば正常に表示されます。

Smarty error: [in mt:35 line 107]: syntax error: unrecognized tag 'MTArchiveDateHeader' (Smarty_Compiler.class.php, line 580)

[14] Posted by 天草太郎 : July 28, 2006 10:01 PM

>天草太郎さん
はじめまして。
テンプレートご利用ありがとうございます。
ご質問の件ですが、MTArchiveDateHeaderプラグイン(MTArchiveDateFooterも同様)がPHPプラグインとして提供されていないのが原因のようです。
ユーザ側で解消する手段としては、PHPモジュール化が考えられますが、ダイナミックパブリッシングでは未確認ですので予めご容赦ください。
それではよろしくお願い致します。

[15] Posted by yujiro : July 29, 2006 8:25 PM

>MTArchiveDateHeaderプラグイン(MTArchiveDateFooterも同様)がPHPプラグインとして提供されていないのが原因のようです。

お世話様になります。やっぱりダメでしたか。
了解しました。

[16] Posted by 天草太郎 : July 29, 2006 9:18 PM

>天草太郎さん
こんばんは。
ご連絡ありがとうございます。
すいませんがPHPモジュール化をお試しください。

[17] Posted by yujiro : July 30, 2006 12:53 AM

yujiroさん、はじめまして。

bzbellさんのところから、いろいろめぐってたどりつきました。

月別アーカイブリストの年毎の折りたたみを使用させていただきました。

とても、参考になります。
ありがとうございました。

また、お世話になるかもしれませんが
よろしくお願いします。

[18] Posted by Reiko : September 10, 2006 7:44 PM

>Reikoさん
はじめまして。
カスタマイズご利用&ご連絡ありがとうございました。
他にも色々ご用意しておりますので、機会がございましたらお越しください。
こちらこそ今後ともよろしくお願い致します。
ではでは!

[19] Posted by yujiro : September 10, 2006 10:54 PM

何時もテンプレートを参考にさせて頂いております。
質問なのですが、「月別アーカイブリストの年毎の折りたたみ」と通常の
「折りたたみスクリプト」を同時に使用する事は可能なのでしょうか?

色々自分でも試して見たのですが、上手く行きそうな所で何故か月別アーカイブリスト
以降のサイドメニューが全て月別アーカイブに折りたたまれてしまい困っています;;

上手く動作させられる方法がありましたらご教示お願い致します。

[20] Posted by sasanagi : September 27, 2006 3:39 PM

>sasanagiさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、タグを拝見させて頂いたところ

<div class="side" id="montlist">

に対応する

</div>

が抜けているようです。div の終了タグは青色の

   :
</MTArchiveList>
</ul>
</div>
<script type="text/javascript">
   :

の位置に挿入してください。
それではよろしくお願い致します。

[21] Posted by yujiro : September 27, 2006 10:29 PM

ご返答有難う御座います。
アドバイス通りにタグを追加した所、無事きちんと動くようになりました^^;

初歩的ミスでお恥ずかしい限りです。
本当に有難う御座いました!

[22] Posted by sasanagi : September 27, 2006 11:07 PM

>sasanagiさん
こんにちは。
ご連絡ありがとうございました。
解消されたようで良かったです。
ではでは!

[23] Posted by yujiro : September 28, 2006 2:53 PM

yujiroさん、大変御無沙汰しております。
どうにかこうにか(笑、スローペースながらも、
ブログを一年続けることができました。
それで今回、月別アーカイブをツリー化、年毎の折りたたみスクリプトを利用させていただきました。
どうもありがとうございました。

[24] Posted by るびー : October 18, 2006 1:35 AM

>るびーさん
こんばんは。
ご無沙汰してます。
カスタマイズご利用&ご連絡ありがとうございます。
ブログは是非マイペースでお続けになってください!

[25] Posted by yujiro : October 19, 2006 12:45 AM

いつも参考にさせていただいてます。
ありがとうございます。

今回アーカイブリストの折りたたみを導入出来たおかげで、とても便利で見やすいようになりましたが▼アイコンで月を表示できるようになっているのをその隣の”200×年”の部分もクリックしても月表示出来るようにすることは出来ますか?

[26] Posted by りゅう : December 24, 2006 1:27 AM

>りゅうさん
こんばんは。
ご利用ありがとうございます。
ご要望承りました。可能であれば改めてエントリーしたいと思います(いずれにしても年内は無理っぽいです)。
それではよろしくお願い致します。

[27] Posted by yujiro : December 24, 2006 2:25 AM

いつもお世話になっております。
MTのカスタマイズトピックでは、非常に参考になっております。

実はずっと前からアーカイブのツリー化をしたいと思って色々試してはいるのですが、
どうしてもうまく動作せず何が原因なのかもわかりませんでした。

メニューの折りたたみと、
アーカイブのツリー化&折りたたみを同時に実現するこつがあったら、
どうかアドバイスをお願いいたします。

[28] Posted by thomas : December 30, 2006 2:02 AM

>thomasさん
こんにちは。
ご質問の件ですが、「JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ」にアーカイブのツリー化と年別折りたたみをまとめた記事をあげていますので、参考になれば幸いです。メニューリスト全体の折りたたみがうまくできない場合は再度ご連絡ください。
それではよろしくお願い致します。

[29] Posted by yujiro : January 1, 2007 1:52 AM

アドバイスありがとう御座います。
ご指摘のエントリーを参考にして、
折りたたみができるようになりました。
スッキリしてとても気持ちがよいです。
更に欲が出てきてカテゴリーも同様にと思ったのですが、
ソースを参考にしてもカテゴリーの方はうまく動作しませんでした。
カテゴリーの場合はどうしたら良いのでしょうか?
お忙しいところアドバイスを頂いた上で、
更にご質問して申し訳ありません。

[30] Posted by thomas : January 3, 2007 5:36 AM

>thomasさん
こんばんは。
サブカテゴリーのツリー化+折りたたみは別途エントリー致します。
少々お時間ください。

[31] Posted by yujiro : January 4, 2007 2:03 AM

ありがとう御座います。
お手数をおかけしますが、よろしくお願いいたします。

ずっとカスタマイズトピックとテンプレートを参考にしていますが、
日を重ねる毎にデザインが綺麗になっていって、
才能があるって良いなーと常々思っています。

[32] Posted by thomas : January 6, 2007 9:46 PM

>thomasさん
お褒めくださりありがとうございます。
才能はありません。見よう見まねです(笑)。

[33] Posted by yujiro : January 8, 2007 2:55 AM

MT3.33で使っていたこの折りたたみをMT4.2でも使おうとしましたが、月別は全て表示されるものの日別アーカイブのページにするとサイドメニューに設置した折りたたみにはその月しか表示されません。

2008年4月04日の日別を表示すると折りたたみアーカイブには2008年4月のみしか表示しない。

MT3.33のときは記事が投稿された月が全て表示してくれていたのですが、MT4.2だとやり方がちがってくるのでしょうか?

[34] Posted by CHOBI : October 5, 2008 4:44 PM

>CHOBIさん
こんばんは。
ご返事遅くなってすいません。
不具合を確認しました。
すいませんが、当面はindexcontextプラグインとの併用が必要と思われます。
それではよろしくお願い致します。

[35] Posted by yujiro logo : October 10, 2008 1:31 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)