ツリー化スクリプト。

【追記： 2005/02/17】私の設置環境で間違い及び不具合がありましたので一部訂正しております。

というわけで、以前、ちょろっとお願いしていたツリー化スクリプトですが、yujiroさんが仕上げられたので、導入させていただきました。ありがとうございます。

■サイドメニューのツリー化スクリプト（改） by 小粋空間

今回は、カテゴリリストとコメントリストに導入しました。以下、設置手順覚書。

スクリプト”menufolder.js”を小粋空間さんのところよりDL。自鯖へアップ。
起動用スクリプトをツリー化を行いたいところへ記述。
■カテゴリリスト

<div class="sidetitle" id="catename">
コンテンツ
</div>
<div class="side" id="catelist">
<div id="categories">
　
　
・・・省略・・・
　
　
</div>
</div>
　
<script type="text/javascript" language="javascript">
<!–
generateNormalTree("catelist");
//–>
</script>
　
<script type="text/javascript" language="javascript">
<!–
generateSubcategoryTree();
//–>
</script>

赤字部分のid名は折りたたみスクリプトを導入時に設定済み。導入したのは一括表示用の起動スクリプトです。サブカテゴリー表示用を導入したら、折りたたみスクリプトのデフォルトでの開閉設定が無効になってしまったので。

導入当初は表示されていたのですが、一括表示用とサブカテゴリ表示用の起動スクリプトをいっしょに設置していたので表示されていたようです。本来はカテゴリの内容に応じて、どちらかを選択すれば良いだけなのですが、設置テストをしたのがそのまま残っており削除し忘れてました。
なので、一括表示用の起動スクリプトを削除してみたら、今度は、頭にツリーの画像が表示されないという不具合が発生。カテゴリのソースを入れ替えたりと色々試行錯誤をしてみて、どうにもならなかったので、半ばあきらめていたのですが・・・駄目元で、カテゴリソース内の<div>タグ内に記入してある<!–　～　–>で括られたコメント文を削除してみたら無事に表示されました。
表示がうまく行かない方は、改行や空行などの余計なものが入っていないかを確認してみてください。

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

青字部分の起動用スクリプトを追加。

■コメントリスト

<div class="side" id="rclist">
<MTEntries recently_commented_on="10">
<ul>・<a href="<$MTEntryLink$>"><MTEntryTitle></a><br/>
<MTComments lastn="5">
<li><a href="<$MTEntryLink$>#c<$MTCommentID$>">
<MTCommentAuthor></a> <$MTCommentDate format="%m/%d"$></li>
</MTComments></ul>
</MTEntries>
<br />
<a href="<$MTBlogURL$>commentslist.php">…全コメントリスト</a>
<div>
　
<script type="text/javascript" language="javascript">
<!–
generateNormalTree("rclist");
//–>
</script>

赤字の id を設定し青字部分の起動用スクリプトを追加。
スクリプトを利用する各テンプレートの <head>～</head>間に下記タグを追加。charset 属性は maketree.js の文字コードを指定。

<script type="text/javascript" src="<$MTBlogURL$>maketree.js" charset="utf-8"></script>
ツリー用の画像を小粋空間さんのところよりDLして自鯖へアップ。
スタイルシートに表示用のクラス指定を追加。

ul.tree {
margin: 0px!important;
padding: 0px!important;
font-size: 9px;
list-style: none!important;
}
ul.tree ul {
margin: 0px!important;
padding: 0px!important;
}
ul.tree li {
margin: 0px!important;
padding: 0px 0px 0px 16px!important;
background-image: url(http://枝用ツリー画像をおいた場所/画像ファイル名);
background-repeat: no-repeat!important;
list-style: none!important;
}
ul.tree li.end {
background-image: url(http://末端用ツリー画像をおいた場所/画像ファイル名);
list-style: none;
}

なお、下記不具合が生じる場合があるので、スタイルシートのリンク文字設定に background: none; が設定されている場合は削除して対処。

ツリー化するリストに改行されたリンクが存在する場合、IE系のブラウザではリンクをポイントした時、あるいはポイントを外した時に横にあるツリー画像が消えるという不具合が確認されています