TopJavaScriptツリー化 > 2006年12月
2006年12月18日

JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ

December 18,2006 12:39 AM
Tag:[, , ]
Permalink

JavaScript 不要な月別アーカイブの年別ツリー化+折りたたみ月別アーカイブのリスト表示は、Movable Type のデフォルト機能では全ての年月を連続で表示することしかできませんが、プラグインを利用することで年毎の表示が可能になり、これを利用して、以前「月別アーカイブリストのツリー化 for Movable Type」を紹介致しました。

さらに、年毎のツリー化リストに折りたたみマークを与えるために「月別アーカイブリストの年毎の折りたたみ for Movable Type」もエントリーしました。この複合技が左のスクリーンショットになります。

上記とは別に、ツリー化をより簡単に実現するテクニックとして、「JavaScript 不要なサイドメニューのツリー化 for Movable Type」をエントリーしました。
ですが、これまでの「月別アーカイブのツリー化+折りたたみ」に「JavaScript 不要なサイドメニューのツリー化 for Movable Type」を適用する場合のタグの構成が不明になっておりました。記事を跨って参照すれば不可能ではありませんが、やや分かりにくいです。

ということで、本エントリーで、月別アーカイブリストの

  • 年別ツリー化
  • 年別折りたたみ
  • 全体の折りたたみ

について、まとめてカスタマイズする手順を紹介致します。

以前、ご質問を頂いていた回答ですが、公開が遅くなり申し訳ございませんでした。この場をお借りしてお詫び申し上げます。

1.プラグインのダウンロード・アップロード

下記のリンクよりプラグインをそれぞれダウンロードしてください。

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

ダウンロードしたアーカイブを解凍し、中にあるファイルを、Movable Type の plugins ディレクトリにアップロードします(詳細はそれぞれのエントリーを参照ください)。
管理メニューの

メイン・メニュー > システム・メニュー > プラグイン

で、それぞれのプラグイン名が表示されればOKです。

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

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

download

3.スクリプトの修正

menufolder.js の中間辺りにアーカイブリスト表示用の設定項目がありますので、赤色部分 *1 を必要に応じて適宜変更してください。デフォルトの状態では各年の最後尾に折りたたみマークが表示される設定になっています。

リスト3.1 menufolder.js の修正箇所

// アーカイブリスト用折りたたみマーク
// 上:閉じている状態で表示されるマーク
// 下:開いている状態で表示されるマーク
var openMarkForArchives  = '';
var closeMarkForArchives = '';
 
// アーカイブリスト用折りたたみマーク挿入位置
// カテゴリー前に折りたたみマークを配置:true
// カテゴリー後に折りたたみマークを配置:false
var preMarkForArchives = false;
 
// アーカイブリストのタイトルとマークのスペース
var offsetForTitleAndMarkOfArchives = 1;

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

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

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

月別アーカイブリストを表示したいテンプレートに、 </head> の直前にリスト5.1 のタグを追加します(すでに他の折りたたみで設定済の方はこの項をスキップしてください)。

リスト5.1 script タグの追加

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

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

下記のツリー画像をダウンロードしてください。画像は、実線・点線の2種類を用意しています。それぞれ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 と同じディレクトリにアップロードしてください。

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

月別アーカイブの年別ツリー化表示+折りたたみができるタグ(リスト7.1)を、表示させたいテンプレートのサイドバー部分に貼り付けます。div 要素は当サイトで公開しているテンプレートに合わせたものですので、設定は任意です。お好みに応じて修正してください。

リスト7.1-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-2 月別アーカイブの年別ツリー化表示+折りたたみ用タグ(dl/dt/dd要素を利用)

<dt class="sidetitle">
Monthly Archives
</dt>
 
<dd 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>
</dd>
 
<dd> 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>
</dd>

メニューリスト全体を折りたたみたい場合は、リスト7.1-1 または7.1-2 に、下記の青色部分 *1 を追加してください。

リスト7.2-1 月別アーカイブの年別ツリー化表示+折りたたみ用タグ2(div要素を利用)

<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 月別アーカイブの年別ツリー化表示+折りたたみ用タグ2(dl/dt/dd要素を利用)

<dt class="sidetitle" id="monthlyname">
Monthly Archives
</dt>
 
<dd 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>
</dd>
 
<dd> 
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
FoldNavigation('monthly','off',false);
//]]>
</script>
</dd>

8.CSS

リスト8.1 をスタイルシートに追加してください。

リスト8.1 CSS

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

*1:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Comments [37] | Trackbacks [6]
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