Movable Type 備忘録

 MovableTypeのカテゴリ一覧などをツリー表示する

  • Jan282006
  • Vote:
    http://bizcaz.com/archives/2006/01/28-025148.php
  • Categories: Customize
  • Tags:
  • Social Bookmark

カテゴリ一覧やあるエントリの最新コメント一覧などをツリー表示にするととても見やすいですよね
わたしのサイトでもカテゴリ一覧をツリー表示してみました。

ということで、今回はカテゴリ一覧などをツリー表示するカスタマイズの紹介です。

カスタマイズ方法

カテゴリ一覧などをツリー表示させるには、maketree.js JavaScriptで行います。
このJavaScriptは、リストタグ( <ul> ～ </ul> )の構造を解析して、ツリー画像に割り当ててくれています。

▼maketree.js JAVAスクリプトの入手はこちらから▼
http://www.koikikukan.com/scripts.php

ツリー画像をアップロードします。
ツリー画像は、小粋空間さんから頂きます。
スクロールしていくと、「5.画像のダウンロード」という項目があります。ツリーの線には、実線と点線が用意されていますので、好みによって入手してください。

  1. 実線表示したい人：
  2. tree_lst_solid.gif
  3. tree_end_solid.gif
  4.  
  5. 点線表示したい人：
  6. tree_lst_dotted.gif
  7. tree_end_dotted.gif

ダウンロードしたら、サーバに2つのツリー画像をアップロードしてください。

入手したJavaScriptをアップロードします。
アップロード先はどこでも構いません。

メインページのテンプレートを変更します。
カテゴリ一覧表示しているコードを以下のツリー表示するコードと差し替えます。

  1. <div id="category-tree">
  2.   <MTTopLevelCategories>
  3.     <MTSubCatIsFirst><ul></MTSubCatIsFirst>
  4.     <li>
  5.  
  6.     <MTIfNonZero tag="MTCategoryCount">
  7.         <a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel$>"><$MTCategoryLabel$></a> [<$MTArchiveCount$>]
  8.       <MTElse>
  9.         <$MTCategoryLabel$>
  10.       </MTElse>
  11.     </MTIfNonZero>
  12.  
  13.     <MTSubCatsRecurse max_depth="3">
  14.     </li>
  15.     <MTSubCatIsLast></ul></MTSubCatIsLast>
  16.   </MTTopLevelCategories>
  17.   <br />
  18. </div><!-- category tree -->
  20. <script type="text/javascript">
  21. <!--
  22. generateTreeForTreeStructure("category-tree");
  23. //-->
  24. </script>

青い字の<div>～</div>までのリスト構造を解析してツリー表示されます。
そのすぐ下に、赤い字のJavaScriptを組み込みます。 その際、緑のID名を必ず合わせてください。

ヘッダ部にJavaScriptの宣言を定義します。
ヘッダ部( <head> ～ </head> )の間に以下のコードを追加してください。

  1.  <script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="<$MTPublishCharset$>"></script>

青い字の部分を、JavaScriptをアップロードしたパスに変更します。
追加したら、保存して再構築します。

スタイルシートにツリー表示用のスタイルを追加します。
以下は、ツリー表示用のコードです。

  1. ul.tree {
  2.     margin: 0px!important;
  3.     padding: 0px!important;
  4.     font-size: 9px;
  5.     list-style: none!important;
  6. }
  7. ul.tree ul {
  8.     margin: 0px!important;
  9.     padding: 0px!important;
  10. }
  11. ul.tree li {
  12.     margin: 0px!important;
  13.     padding: 0px 0px 0px 16px!important;
  14.     background-image: url(../images/tree_lst.gif);
  15.     background-repeat: no-repeat!important;
  16.     list-style: none!important;
  17. }
  18. ul.tree li.end {
  19.     background-image: url(../images/tree_end.gif);
  20.     list-style: none;
  21. }

青い字のツリー画像イメージのパスを、自分の環境に合わせて変更してください。
また、a:link、a:active、a:hover のそれぞれに background:none;を指定している場合は、その属性を削除してください。
変更したら、保存して再構築します。

以上で、カテゴリ一覧をツリー表示することができました。

 Trackback Pings(1)

from 無料ネット生活友の会～ブログ編

サイドバーのカテゴリーリストをツリー表示させてみました。 今回参考にさせていただ...

Tracked on May 7, 2006

 Comments(0)

No comments found.

 Post a Comment

 

コメント用フィード