小粋空間: ツリー化アーカイブ

Top ＞ Movable Type ＞カスタマイズ＞ツリー化 [全て開く]

2007年3月 1日

サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する

March 1,2007 12:17 AM
Tag：[Category, CSS, Tree]
Permalink

先日エントリーした「CSS 変更（2007.02.11）」でお知らせした通り、サブカテゴリーリストの親カテゴリーだけ異なる画像を表示させるカスタマイズをご紹介致します。

サブカテゴリーリストで親カテゴリー以外をツリー化する

この変更を行なえば、ツリー画像が各親カテゴリー内に閉じた形で表示されるようになります。またカテゴリー表示が長大になる場合、従来の表示では親カテゴリーのツリー画像が途切れる可能性が高かったのですが、この方法であればある程度問題なく表示されると思います。

変更方法は、CSS の修正と親カテゴリー用の画像の用意です。

元のサンプルは「サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type」を利用していますが、CSS についてはブログツール・ブログサービスに依存しませんので、変更箇所を確認しながら修正してください。

スクリーンショットの完成例で使用している親カテゴリーのリストマークは、下記から頂きました。

Stylegala：Bullet Madness

全く同じマークは下から 30 番目あたりにあります。

下記にスクリーンショットと同じ変更をした CSS を示します。変更箇所は赤、追加は青で示していますが、お好みに応じて適宜修正してください。

変更前

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 13px;
    background: url(tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}
ul.tree li.tree_end {
    background: url(tree_end.gif) no-repeat 2px 0;
    list-style: none;
}

変更後

ul.tree {
    margin: 0 0 0 3px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0px;
    padding: 0 0 0 17px;
    background: url([親カテゴリー用画像ファイル]) no-repeat 1px 0.15em;
    list-style: none;
}
ul.tree li li {
    margin: 0;
    padding: 0 0 0 15px;
    background: url(tree_lst.gif) no-repeat 4px 0;
    list-style: none;
}
ul.tree li li.tree_end {
    background: url(tree_end.gif) no-repeat 4px 0;
    list-style: none;
}

ご覧の通り、親カテゴリー用の li 要素セレクタと、子カテゴリー用の li 要素セレクタを分割しています。子カテゴリーは、li 要素セレクタを重ねて指定し、li 要素が再帰的に出現する場合のみ、ツリー画像を表示するようにしています。

参考までにサンプルのHTMLマークアップも掲載しておきます。折りたたみ用の div 要素が含まれてやや複雑になってますが予めご了承ください。

<ul class="tree">
  <li class="tree">
    <div class="subcategories" id="subcategories9name"><a href="..." title="9">ブログ</a> [1]</div>
    <div id="subcategories9list">
      <ul class="tree">
        <li class="tree_end">
          <div class="subcategories" id="subcategories10name"><a href="..." title="10">Movable Type</a> [1]</div>
          <div id="subcategories10list">
            <ul class="tree">
              <li class="tree"><a href="..." title="11">カスタマイズ</a> [1]</li>
              <li class="tree_end"><a href="..." title="12">テンプレート</a> [2]</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="tree">
    <div class="subcategories" id="subcategories1name"><a href="..." title="1">日記</a> [1]</div>
    <div id="subcategories1list">
      <ul class="tree">
        <li class="tree_end"><a href="..." title="2">食事</a> [1]</li>
      </ul>
    </div>
  </li>
  <li class="tree_end">
    <div class="subcategories" id="subcategories3name"><a href="..." title="3">趣味</a> [1]</div>
    <div id="subcategories3list">
      <ul class="tree">
        <li class="tree">
          <div class="subcategories" id="subcategories5name"><a href="..." title="5">パソコン</a> [1]</div>
          <div id="subcategories5list">
            <ul class="tree">
              <li class="tree"><a href="..." title="7">Linux</a> [1]</li>
              <li class="tree_end"><a href="..." title="8">Windows</a> [1]</li>
            </ul>
          </div>
        </li>
        <li class="tree_end">
          <div class="subcategories" id="subcategories4name"><a href="..." title="4">車</a> [1]</div>
          <div id="subcategories4list">
            <ul class="tree">
              <li class="tree_end"><a href="..." title="6">VW</a> [1]</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

Comments [29] | Trackbacks [2]

2007年2月18日

サブカテゴリーリストの折りたたみ（デフォルトテンプレート版）

February 18,2007 1:03 AM
Tag：[Category, MovableType, Tree]
Permalink

サブカテゴリーリストの折りたたみ（デフォルトテンプレート版） Movable Type デフォルトテンプレートにサブカテゴリーリストの折りたたみを適用する場合のカスタマイズを紹介します。
このエントリーではツリー化する場合としない場合の2通りを説明します。スクリーンショットはツリー化した場合の完成例です。

１．スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

２．`menufolder.js` の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認（または修正）してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
 
　　　　　　　：
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
  
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▼';
var closeMarkForSubCategories = '▲';
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

設定内容の詳細は下記の通りです。

subCategoryCount

名称：カテゴリーリスト数計算方法
用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
設定値： true：li タグで計数／false：a タグで計数

subCategory

名称：サブカテゴリーの折りたたみ有効フラグ
用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
設定値： true：有効／false：無効

openMarkForSubCategories/closeMarkForSubCategories

名称：サブカテゴリーの折りたたみマーク
用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
設定値：任意の文字（設定したマークを''で括るように）

offsetForTitleAndMarkOfSubcategory

サブカテゴリーのタイトルとマークのスペース
用途：サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
設定値：0以上

３．スクリプトのアップロード

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

４．テンプレートに script 要素追加

サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください（分からなければとりあえずサンプルのまま貼り付けてください）。

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

５．テンプレートにサブカテゴリーリスト表示用タグを追加

ツリー化しない場合は１．１項、ツリー化する場合は１．２項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。

５．１ツリー化しない場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

５．２ツリー化する場合

<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

赤色部分は下記を参照して適宜変更してください。

initState

名称：初期状態
用途：ページを最初に表示した時の折りたたみ状態を指定します
設定値： on：開いた状態／off：閉じた状態

またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。

６．スタイルシート変更

ツリー化しない場合は２．１項、ツリー化する場合は２．２項の CSS をスタイルシートに追加してください。

６．１ツリー化しない場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}

６．２ツリー化する場合

.subcategories a.foldmark {
    font-size:7px; /* マークのフォントサイズ */
    text-decoration: none; /* マーク装飾 */
}
ul.tree {
    margin: 0 0 10px 0; /* 全体マージン */
    padding: 0;
    list-style: none;
}
ul.tree ul {
    margin: 0px 0; /* 間隔を空ける時はここを変更 */
    padding-top: 2px; /* インデント部分のパディング */
}
ul.tree li {
    margin: 0; /* 0 以上にすると画像が切れる */
    padding: 4px 0 1px 13px; /* top を大きくすると画像とずれる */
    background-image: url(tree_lst.gif);
    background-position: 2px 0; /* 垂直方向を0以上にすると画像が切れる */
    background-repeat: no-repeat;
    list-style: none;
    line-height: 100%;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    background-position: 2px 0;
    list-style: none;
}

７．ツリー画像のダウンロード

ツリー化する場合は、７項・８項を実施してください。

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。

ツリー画像のファイルは６項の CSS（青色部分）で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時（またはダウンロード後）、ファイル名は tree_lst.gif に変更してください。

８．画像のアップロード

ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。

以上です。

Comments [11] | Trackbacks [2]

2007年2月 9日

サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type

February 9,2007 12:50 AM
Tag：[Customize, MovableType, SubCategory, Tree]
Permalink

JavaScript不要なサブカテゴリーリストのツリー化+折りたたみ for Movable Type 以前、Movable Type のツリー化記事で「JavaScript 不要なサイドメニューのツリー化 for Movable Type」を紹介しましたが、当サイトで定番カスタマイズとなっている「サブカテゴリーリストの折りたたみ」と併用する場合の設定方法についてご質問を頂きましたので、本エントリーにて改めてご紹介致します。

このエントリーのカスタマイズを行うことで、スクリーンショットのようにサブカテゴリーリストを折りたたみ+ツリー化することができます。
なお、JavaScript が不要なのはツリー化のみで、折りたたみ動作には必要です。

１．スクリプトのダウンロード

下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。

download

２．`menufolder.js` の設定変更

ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認（または修正）してください。

// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
 
　　　　　　　：
 
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
  
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories  = '▼';
var closeMarkForSubCategories = '▲';
 
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;

設定内容の詳細は下記の通りです。

subCategoryCount

名称：カテゴリーリスト数計算方法
用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
設定値： true：li タグで計数／false：a タグで計数

subCategory

名称：サブカテゴリーの折りたたみ有効フラグ
用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
設定値： true：有効／false：無効

openMarkForSubCategories/closeMarkForSubCategories

名称：サブカテゴリーの折りたたみマーク
用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
設定値：任意の文字（設定したマークを''で括るように）

offsetForTitleAndMarkOfSubcategory

サブカテゴリーのタイトルとマークのスペース
用途：サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
設定値：0以上

３．スクリプトのアップロード

menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。

４．テンプレートに script 要素追加

<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>

５．テンプレートにサブカテゴリーリスト表示用タグを追加

折りたたみ+ツリー化用のサブカテゴリーリスト表示用タグ（下記）をテンプレートの任意の位置に設定します。

<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryID$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel><MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
 
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>

青色は「JavaScript 不要なサイドメニューのツリー化 for Movable Type」のサブカテゴリーリストとの差分を参考までに示しています。

赤色部分は下記を参照して適宜変更してください。

initState

名称：初期状態
用途：ページを最初に表示した時の折りたたみ状態を指定します
設定値： on：開いた状態／off：閉じた状態

６．CSS追加

下記を styles-site.css に追加してください。

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree ul {
    margin: 0;
    padding: 0;
}
ul.tree li {
    margin: 0;
    padding: 0 0 0 13px;
    background: url(tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}
ul.tree li.tree_end {
    background: url(tree_end.gif) no-repeat 2px 0;
    list-style: none;
}
.subcategories a.foldmark {
    font-size:9px; /* マークのフォントサイズ */
    text-decoration: none; /* マークの文字装飾（装飾なし） */
}

７．ツリー画像のダウンロード

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

８．画像のアップロード

ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。

以上です。
これでサブカテゴリーリストに折りたたみマークとツリーが表示されればOKです。

2008.10.14
リストの MTSubCategories タグを MTTopLevelCategories タグに変更しました。

Comments [29] | Trackbacks [3]

2006年11月13日

JavaScript 不要なサイドメニューのツリー化 for Movable Type（MTCollate編）

November 13,2006 1:20 AM
Tag：[Customize, MovableType, MTCollate, Tree]
Permalink

Movable Type で JavaScript を用いずにサイドメニューのリストをツリー化するカスタマイズで、「JavaScript 不要なサイドメニューのツリー化 for Movable Type」で公開していなかった、MTCollate プラグイン *1 を利用して「最近のコメント」「最近のトラックバック」を表示している場合の方法です（関連記事：MTCollate を使って「最近のコメント」を表示する）。

JavaScript 不要なサイドメニューのツリー化の記事より概要部分を再掲しておきます。

以前、「サイドメニューのツリー化スクリプト（改）」という記事で Movable Type の各リストを JavaScript を用いてツリー化するカスタマイズを紹介しておりますが、3.2 以降で新しいMTタグ *2 が追加されたことで、ほとんど全てのリストについて、JavaScript を使用せずにツリー化が可能であることが判明しました。

この方法は JavaScript を用いたカスタマイズと比較して、下記のメリットがあります。

ブラウザで JavaScript を OFF にしている場合でもツリー表示が可能
JavaScript 起動による表示遅延がなし
JavaScript 関連のカスタマイズが不要

ということで、Movable Type のツリー化については本エントリーの方法を推奨します。

１．最近のコメント

下記のリストをサイドバーの任意の位置に設定してください。ポイントとなる部分を青色で示しています。

<MTCollateCollect>
<MTComments lastn="20">
<MTCollateRecord>
<MTCollateSetField name="comment_id"><$MTCommentID$></MTCollateSetField>
<MTCollateSetField name="comment_author"><$MTCommentAuthor encode_html="1"$></MTCollateSetField>
<MTCollateSetField name="comment_date"><$MTCommentDate format="%m/%d"$></MTCollateSetField>
<MTCommentEntry>
<MTCollateSetField name="entry_key"><MTComments lastn="1"><$MTCommentDate format="%y%m%d%H%M%S"$></MTComments></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle encode_html="1"$></MTCollateSetField>
</MTCommentEntry>
</MTCollateRecord>
</MTComments>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Comments
</div>
<div class="side">
<MTCollateList sort="entry_key:#:- comment_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>"><$MTCollateField name="entry_title"$></a><ul class="tree"></MTCollateIfHeader><li class="tree<MTCollateIfFooter name="entry_key">_end</MTCollateIfFooter>"><a href="<$MTCollateField name="entry_link"$>#c<$MTCollateField name="comment_id"$>"><$MTCollateField name="comment_author"$></a> <$MTCollateField name="comment_date"$></li><MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

リスト1　最近のコメント表示用リスト

２．最近のトラックバック

下記のリストをサイドバーの任意の位置に設定してください。ポイントとなる部分を青色で示しています。

<MTCollateCollect>
<MTPings lastn="20">
<MTCollateRecord>
<MTCollateSetField name="ping_id"><$MTPingID$></MTCollateSetField>
<MTCollateSetField name="ping_url"><$MTPingURL$></MTCollateSetField>
<MTCollateSetField name="ping_blog_name"><$MTPingBlogName encode_html="1"$></MTCollateSetField>
<MTCollateSetField name="ping_date"><$MTPingDate format="%m/%d"$></MTCollateSetField>
<MTPingEntry>
<MTCollateSetField name="entry_key"><MTPings lastn="1"><$MTPingDate format="%y%m%d%H%M%S"$></MTPings></MTCollateSetField>
<MTCollateSetField name="entry_link"><$MTEntryPermalink$></MTCollateSetField>
<MTCollateSetField name="entry_title"><$MTEntryTitle$></MTCollateSetField>
</MTPingEntry>
</MTCollateRecord>
</MTPings>
</MTCollateCollect>
 
<div class="sidetitle">
Recent Trackbacks
</div>
<div class="side">
<MTCollateList sort="entry_key:#:- ping_id:#:+">
<MTCollateIfHeader name="entry_key">
<a href="<$MTCollateField name="entry_link"$>"><$MTCollateField name="entry_title"$></a><ul class="tree"></MTCollateIfHeader><li class="tree<MTCollateIfFooter name="entry_key">_end</MTCollateIfFooter>"><a href="<$MTCollateField name="ping_url"$>"><$MTCollateField name="ping_blog_name"$></a> <$MTCollateField name="ping_date"$></li><MTCollateIfFooter name="entry_key"></ul></MTCollateIfFooter>
</MTCollateList>
</div>

リスト2　最近のトラックバック表示用リスト

３．CSS

下記をスタイルシートに追加してください。すでに他のリストのツリー化で設定されている場合は不要です。

ul.tree {
    margin: 0!important;
    padding: 0!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 16px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    list-style: none;
}

リスト3　ツリー化用CSS

JavaScript を用いる場合のCSSとほぼ同じですが、一番最後のセレクタ名（tree_end）だけが異なっています。

４．ツリー画像のダウンロード

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
実線につきましては我楽さんより提供いただきました。ありがとうございました。

５．画像の配置

ダウンロードした画像を、スタイルシートと同じディレクトリにアップロードしてください。リスト3の赤色部分がアップロードしたファイル名と一致するように修正してください。
これでブラウザを更新して、ツリーが表示されればOKです。

６．参考：ツリー表示の仕組み

ツリー化を行うために、「順序無しリスト（ul - li）」を利用します。通常の順序無しリストは左側にリストマークが表示されますが、ツリー化ではリストマークを非表示にし、その代わりにツリー画像（"├" または "└"）を、CSS の background-image プロパティを利用して表示します。

全てのリストに同じ画像を表示するのであれば簡単なのですが、ツリーの最後に "└" を表示するため、下記のように最後の li 要素に class 属性の指定が必要になります。

<ul>
<li>aaa</li>
<li>bbb</li>
<li class="tree">ccc</li>
</ul>

リスト6　サンプルHTML

この class 属性によりどちらのツリー画像を表示するか判別します。
例えば class 属性がない li 要素には途中の画像 "├" を表示し、class 属性がある場合は最後の画像 "└" を表示します。なお本カスタマイズでは、途中の li 要素に class="tree"、最後の li 要素に class="tree_end" を与えています。

JavaScript を利用したツリー化のカスタマイズでは、JavaScript 実行により class 属性を付与しています（したがってブラウザの「ソースの表示」では class 属性が設定されていないようにみえます）。

*1：本カスタマイズは MTCollate プラグインを利用されていることが前提です。
*2：MTArchiveListFooter/MTCommentsFooter/MTPingsFooter

Comments [6] | Trackbacks [6]

2006年8月22日

JavaScript 不要なサイドメニューのツリー化 for Movable Type

August 22,2006 12:50 AM
Tag：[Customize, MovableType, Tree]
Permalink

サイドメニューのツリー化 Movable Type で JavaScript を用いずにサイドメニューのリストをツリー化するカスタマイズです。

以前、「サイドメニューのツリー化スクリプト（改）」という記事で Movable Type の各リストを JavaScript を用いてツリー化するカスタマイズを紹介しておりますが、3.2 以降で新しいMTタグ *1 が追加されたことで、ほとんど全てのリストについて、JavaScript を使用せずにツリー化が可能であることが判明しました。

この方法は JavaScript を用いたカスタマイズと比較して、下記のメリットがあります。

ブラウザで JavaScript を OFF にしている場合でもツリー表示が可能
JavaScript 起動による表示遅延がなし
JavaScript 関連のカスタマイズが不要

ということで、Movable Type のツリー化については本エントリーの方法を推奨します。

１．基本的な設定方法

JavaScript を用いないため、ul 要素、li 要素に class 属性を記述します。

ul 要素：class="tree" を追加
li 要素：class="tree[MT開始タグ]_end[MT終了タグ]" を追加

「最近のエントリー」の設定例

<ul class="tree">
<MTEntries lastn="10">
<li class="tree<MTEntriesFooter>_end</MTEntriesFooter>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

[MT開始タグ] と [MT終了タグ] は、各リストの最後を示すMTタグです。リストによって用いるMTタグは異なります。具体的な設定内容については２項を参照してください。

ul 要素の class 属性に "tree" を設定しているのは、通常の ul 要素とスタイルを切り分けることを前提にしているためです。ul 要素を一律ツリー表示として使用する場合は、下記の方法でも大丈夫と思います。

ul 要素：何も設定しない
li 要素：[MT開始タグ]class="end"[MT終了タグ] を追加

「最近のエントリー」の設定例

<ul>
<MTEntries lastn="10">
<li<MTEntriesFooter> class="end"</MTEntriesFooter>><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>

２．MTタグにツリー表示用 class 属性追加

ツリー表示用の class 属性を追加した各リストのMTタグを以下に掲載します。マウスコピーして表示したいテンプレートにペーストしてお使いください。

青色は１項（前半）の設定部分を示しています。必要最小限のタグを掲載してますので、ツリー化以外のHTMLマークアップは適宜追加してください。

Recent Trackbacks（最近のトラックバック）

<ul class="tree">
<MTPings lastn="10">
<li class="tree<MTPingsFooter>_end</MTPingsFooter>"><a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br/>
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>

Categories（カテゴリーリスト：サブカテゴリー表示）

<MTSubCategories>
<MTSubCatIsFirst><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>

Monthly Archives（月別アーカイブリスト）

<ul class="tree">
<MTArchiveList archive_type="Monthly">
<li class="tree<MTArchiveListFooter>_end</MTArchiveListFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>

Monthly Archives（月別アーカイブリスト：年別表示）

*プラグインが必要です

<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><span><$MTArchiveDate format="%Y年"$></span><ul class="tree"></MTArchiveDateHeader>
<li class="tree<MTArchiveDateFooter>_end</MTArchiveDateFooter>"><a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B月"$></a> [<$MTArchiveCount$>]</li>
<MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>

３．CSS（全リスト共通）

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

ul.tree {
    margin: 0!important;
    padding: 0!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 16px!important;
    background-image: url(tree_lst.gif);
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.tree_end {
    background-image: url(tree_end.gif);
    list-style: none;
}

JavaScript を用いる場合のCSSとほぼ同じですが、一番最後のセレクタ名（tree_end）だけが異なっています。

４．ツリー画像のダウンロード

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては我楽さんより提供いただきました。ありがとうございました。
なお実線を公開テンプレートに適用した場合、Mozzila系ブラウザ（Netscape/Firefox）で線が途切れる事象が確認されています。スタイルシートの設定で解消されるかもしれませんが予めご了承ください。

５．画像の配置

ダウンロードした画像をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

これでツリーが表示されればOKです。

６．参考：ツリー表示の仕組み

<ul>
<li>aaa</li>
<li>bbb</li>
<li class="tree">ccc</li>
</ul>

この class 属性によりどちらのツリー画像を表示するか判別します。
例えば class 属性がない li 要素には途中の画像 "├" を表示し、class 属性がある場合は最後の画像 "└" を表示します。

*1：MTArchiveListFooter/MTCommentsFooter/MTPingsFooter

Comments [67] | Trackbacks [12]

2006年6月20日

月別アーカイブリストのツリー化 for Movable Type

June 20,2006 12:55 AM
Tag：[Customize, MovableType, Tree]
Permalink

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 属性を追加して、他の設定と干渉しないようにしてください。

Comments [25] | Trackbacks [4]

2005年2月13日

maketree.js 1.01 リリース

February 13,2005 8:00 PM
Tag：[Customize, MovableType, Tree]
Permalink

ツリー化スクリプトの maketree.js をマイナーバージョンアップしました。
今回の修正はツリー状のリスト（ul-li-ul-liという構造）に対する対処です。1.00ではサブカテゴリーリストにしか対応していなかったため、これを他のツリー状リストに対応させるように修正致しました。端的に申し上げますとユーザー・マニュアルメニューリストに対する対処です。
ユーザー・マニュアルを表示していない、またはツリー化表示しない場合、アップグレードの必要はありません。またアップグレードされても既存の動作には影響ありません。

アップグレードされる場合は下記のリンクでスクリプトのページへジャンプし、そこからダウンロードしてください。

download

以下、ユーザー・マニュアルで利用する場合のカスタマイズ方法を記します。

１．id 属性の変更

ユーザー・マニュアル表示用タグの id 属性（赤字部分）を、同ページの他の id 属性と重複しない任意の文字列に修正してください。ここでは hogehoge という id 属性にした例です。

<div class="sidetitle" id="manualname">
Official User's Manual
</div>
 
<div class="side" id="manuallist">
<div id="categorieshogehoge">

２．スタイルシートの追加

サブカテゴリー用のスタイル定義をコピー＆ペーストして同じスタイルシートの任意の位置に追加し、id 属性（赤字部分）を１項で付与した名称に変更します。

.side #categorieshogehoge ul {
    padding-left: 15px;
    margin: 0px;
    margin-bottom: 0px;
}
 
.side #categorieshogehoge ul ul {
    margin-bottom: 0px;
}
 
.side #categorieshogehoge li {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: circle;
}

３．maketree.js起動スクリプト追加

ユーザー・マニュアル表示用タグの下に下記を追加します。

<script type="text/javascript">
<!--
generateTreeForTreeStructure('hogehoge');
//-->
</script>

以上です。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

Comments [6] | Trackbacks [3]

2005年2月 9日

サイドメニューのツリー化スクリプト（改）

February 9,2005 11:59 PM
Tag：[Customize, MovableType, Tree]
Permalink

サイドメニューのツリー化サイドバーのメニューリストをツリー化するスクリプトです。このスクリプトの特徴は通常のリストだけでなく、画像のようにサブカテゴリーについてもツリー化が可能です（サブカテゴリーリストの折りたたみとの組み合わせも可能です）。本サイトのサブカテゴリーリストをツリー化しておりますので興味のある方はお試しになってみてください。
本カスタマイズに関してはsbのインストールページをヒントにさせて頂きました。ありがとうございました。
ツリー化スクリプトはJUGEMカスタマイズ講座が著名なのでここでは「改」と命名させて頂きましたが、JavaScriptにつきましてはDOMや再帰呼び出し（サブカテゴリーリスト用）を利用した全く異なる実装です。
以下カスタマイズ方法です。

１．maketree.js ダウンロード
下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。
scriptタグの設定については３項に記してますのでお試し頂ければ幸いです。

２．maketree.js 配置
maketree.js をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

３．リスト表示用タグ修正およびJavaScript起動用スクリプト設定
ツリー化を行いたい各テンプレートのサイドバーのメニューリストのMTタグを修正します。注：MTタグは ul と li を用いたリスト形式になっていることが前提です。一部のリストは公開テンプレートのタグを入れ替える必要があります。
下記に主要なツリー化用メニューリストのMTタグサンプルおよびJavaScriptを掲載します。黒字部分がMTタグ（公開テンプレートからの変更イメージ）で、青字部分が新たに追加するid属性およびJavaScript起動スクリプトです。

Recent Entries（最近のエントリー）

<div class="side" id="entrylist">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Recent Entries（最近のエントリー：日別表示用）

<div class="side" id="entrylist">
<MTEntries lastn="10">
<MTDateHeader>
<ul><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTEntries>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Recent Comments（最近のコメント）

<div class="side" id="commentlist">
<MTEntries recently_commented_on="5">
<a href="<$MTEntryLink$>"><MTEntryTitle></a>
<ul>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments>
</ul>
</MTEntries>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>

Recent Trackbacks（最近のトラックバック）

<div class="side" id="trackbacklist">
<ul>
<MTPings lastn="10">
<li><a href="<$MTPingURL$>" target="_blank"><$MTPingTitle$></a><br/>
from <$MTPingBlogName$> <$MTPingDate format="%m/%d %X"$></li>
</MTPings>
</ul>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("trackbacklist");
//-->
</script>

Categories（カテゴリーリスト：一括表示用）

<div class="side" id="categorylist">
<ul>
<MTCategories>
<li><a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>  [<$MTCategoryCount$>]<br /></li>
</MTCategories>
</ul>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("categorylist");
//-->
</script>

Categories（カテゴリーリスト：サブカテゴリー表示用） *MTタグは修正不要です

<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>
 
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>

注：サブカテゴリーのツリー化ではdivタグにある"categories"というデフォルトの id 属性をスクリプトで使用しています。もしこの名称を変更されている場合は maketree.js で categories という文字を検索（2ヶ所~~1ヶ所しかありません~~）し、その部分を使用されている文字と置き換えてください。

Monthly Archives（月別アーカイブリスト）

<div class="side" id="monthlylist">
<ul>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a> [<$MTArchiveCount$>]</li>
</MTArchiveList>
</ul>
</div>
 
<script type="text/javascript">
<!--
generateNormalTree("monthlylist");
//-->
</script>

赤字部分は名称がそれぞれ一致するように指定してください。id 属性はサイドメニューの折りたたみ等で設定済であればそのままご利用ください。サブカテゴリーリストはMTタグの下にスクリプトを追加するのみで大丈夫です。またサブカテゴリーリストの折りたたみを利用されている場合は

<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','on',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse max_depth="3">
</MTTopLevelCategories>
//-->
</script>

の前後どちらに起動スクリプトを挿入してくださってもかまいません。

ツリー構造リスト（ユーザー・マニュアル等）

<div class="sidetitle" id="manualname">
Official User's Manual
</div>
 
<div class="side" id="manuallist">
<div id="manual">
　　　：
　　（中略）
　　　：
</div>
</div>
 
<script type="text/javascript">
<!--
generateTreeForTreeStructure('manual');
//-->
</script>

４．maketree.js インクルード文挿入
ツリー化スクリプトを利用する各テンプレートの <head>～</head> の間に下記のタグを追加してください。charset 属性は maketree.js の文字コードを指定してください。

<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>

５．画像のダウンロード
下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

６．画像の配置
ダウンロードした画像をローカル・サイト・パスに配置してください。「配置」とはレンタルサーバの場合はFTPツール等によるアップロード、自宅サーバの場合は単なるコピーを示します。

７．スタイルシート追加
スタイルシート（styles-site.css）の.sideの下辺りに下記のクラス指定を追加します。

ul.tree {
    margin: 0!important;
    padding: 0!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 16px!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;
}

赤字部分については、先ほどダウンロードした画像のファイル名にそれぞれ変更するか、画像のファイル名をスタイルシートに設定されているファイル名に修正してください。また上の設定はスタイルシートと同じディレクトリ（=ローカル・サイト・パス）に画像を配置した場合です。異なるディレクトリに配置する場合は http://? のようにURLで画像を指定してください。

８．スタイルシート修正（必要な場合のみ）
ツリー化するリストに改行されたリンクが存在する場合、IE系のブラウザではリンクをポイントした時、あるいはポイントを外した時に横にあるツリー画像が消えるという不具合が確認されています（これで3日ほど悩みました）。
その場合はスタイルシート（styles-site.css）の先頭の方にあるリンクの設定で

/* リンク文字設定 */
　　　　：
a:link {
    color: #8FABBE;
    background: none;
}
a:visited {
    color: #8FABBE;
    background: none;
}
a:active {
    color: #8FABBE;
    background: none;
}
a:hover {
    color: #006699;
    background: none;
}

の赤字部分をコメントアウトまたは削除してください。

以上です。

９．FAQ
Q：ツリーが表示されません
A：主に下記の原因が考えられます。

maketree.js 起動スクリプトの設定（５項）が誤っている
ツリーを表示するリストが ul - li の形式になっていない、あるいは ul - li タグが正常に閉じられていない。
画像がアップロードされていない（６項の設定もれ）
４項が設定されていない
４項で設定したパスに maketree.js が存在しない（トップページからHTMLソースを参照し、maketree.js をインクルードしている script 要素の src 属性（URL）をマウスコピーして、ブラウザで直接指定して実行し、ダウンロード等ができればOK）
ブログと maketree.js の文字コードが一致していない
６項で指定した位置に画像が存在しない（スタイルシートで指定した画像ファイルのURLを指定してダウンロードできればOKです。http://?という形式で指定していない場合はスタイルシートと同じディレクトリに配置されていることが必要です）
公開テンプレートでサブカテゴリーリストが表示されない場合、リスト全体がコメントアウトされている（詳細はカテゴリーリストをサブカテゴリー表示に切り替えるをご覧ください）
HTMLまたはスタイルシートのフォーマットが誤っている。Another HTML-lint gateway や W3C CSS 検証サービスで致命的なエラーがないかご確認ください
３項で追加したスクリプトのフォーマット誤り（「"」が抜けている、HTMLタグが「<<?」になってしまっている等）
３項で設定した id 属性値とスクリプトを起動する時のパラメータが一致していない（要するに赤色の名称が不一致）

Q：ツリーの終端が閉じません（途中に表示されるものと同じものが表示される）
A：サブカテゴリーのツリー化で generateSubcategoryTree(); が使われていない可能性があります。言い換えると、サブカテゴリーのツリー化で generateNormalTree("～") を使うと質問の症状になります。

ここで解決しない場合、コメント欄に他の解決内容がありますのでご一読頂ければ幸いです。

2005.02.11 追記
「最近のエントリー」の日別表示用タグを追加しました。

2005.02.12 追記
サブカテゴリーリストのツリー化での注意書きを追記しました。

2005.02.13 追記
ツリー構造リストのツリー化について記述を追記しました。

2005.08.02 追記
FAQを追加しました。

2005.09.05 追記
Recent Comments のソースを XHTML valid になるよう修正しました。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。また９項のFAQを修正しました。

2006.04.21 追記
９項のFAQを追加しました。

Comments [245] | Trackbacks [94]

小粋空間 - a cheap joke and a play on words site

サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する

サブカテゴリーリストの折りたたみ（デフォルトテンプレート版）

１．スクリプトのダウンロード

２．menufolder.js の設定変更

３．スクリプトのアップロード

４．テンプレートに script 要素追加

５．テンプレートにサブカテゴリーリスト表示用タグを追加

５．１ ツリー化しない場合

５．２ ツリー化する場合

６．スタイルシート変更

６．１ ツリー化しない場合

６．２ ツリー化する場合

７．ツリー画像のダウンロード

８．画像のアップロード

サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type

１．スクリプトのダウンロード

２．menufolder.js の設定変更

３．スクリプトのアップロード

４．テンプレートに script 要素追加

５．テンプレートにサブカテゴリーリスト表示用タグを追加

６．CSS追加

７．ツリー画像のダウンロード

８．画像のアップロード

JavaScript 不要なサイドメニューのツリー化 for Movable Type（MTCollate編）

１．最近のコメント

２．最近のトラックバック

３．CSS

４．ツリー画像のダウンロード

５．画像の配置

６．参考：ツリー表示の仕組み

JavaScript 不要なサイドメニューのツリー化 for Movable Type

１．基本的な設定方法

「最近のエントリー」の設定例

「最近のエントリー」の設定例

２．MTタグにツリー表示用 class 属性追加

Recent Entries（最近のエントリー）

Recent Entries（最近のエントリー：日別表示用）

Recent Comments（最近のコメント）

Recent Trackbacks（最近のトラックバック）

Categories（カテゴリーリスト：サブカテゴリー表示）

Monthly Archives（月別アーカイブリスト）

Monthly Archives（月別アーカイブリスト：年別表示）

３．CSS（全リスト共通）

４．ツリー画像のダウンロード

５．画像の配置

６．参考：ツリー表示の仕組み

月別アーカイブリストのツリー化 for Movable Type

１．各年の月をツリー化

１．１ テンプレートの修正

１．２ スタイルシートの修正

２．年と各年の月をツリー化

２．１ テンプレートの修正

２．２ スタイルシートの修正

３．その他

maketree.js 1.01 リリース

１．id 属性の変更

２．スタイルシートの追加

３．maketree.js起動スクリプト追加

サイドメニューのツリー化スクリプト（改）

２．`menufolder.js` の設定変更

５．１ツリー化しない場合

５．２ツリー化する場合

６．１ツリー化しない場合

６．２ツリー化する場合

２．`menufolder.js` の設定変更

１．１テンプレートの修正

１．２スタイルシートの修正

２．１テンプレートの修正

２．２スタイルシートの修正