早速、説明に入ります。

まず下準備ですが、すでにツリー化スクリプトを導入されている方はそのツリー化スクリプト部分をごっそり削除してください。

スクリプト部分だけです。各リストに付けたidはそのまま残します。

初めて設置する方は各リストの独自タグを以下のように変更します。

また、リンクリストのツリー化に関しては、前段階としてリンクのカテゴリ分けが必要になります。

カテゴリ分けをしていない場合はツリー化は行われません。

もし、ナビゲーションの折り畳みなどをすでに導入されていてリストに対してid属性を付けていれば、上記の操作は必要ありません。

続いて、スクリプト本体を記述します。例によって</body>の直前(つまり、htmlテンプレートの最後の方になります)に以下のようなJavaScriptを挿入します。

<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
  if (!objList.innerHTML) return;
  var objLink = objList.getElementsByTagName('a')[0];
  var linkUrl = objLink.getAttribute('href');
  if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
    var tmpText = objList.innerHTML.split("⇒");
    tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
    this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
    this.elem = objLink.innerHTML;
  } else if (idName.indexOf('entry') > -1) {
    var tmpText = objList.innerHTML;
    tmpText.match(/\((\d\d\/\d\d)\)/);
    this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
    this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
  } else if (idName.indexOf('link') > -1) {
    var tmpText = objList.innerHTML;
    if ( tmpText.match(/\[(.+)\](.+)/) ) {
      this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
      this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
    }
  }
  return this;
}
function createTreeList(idName,option) { // version 2.2
  var objFocus = this.document.getElementById(idName);
  if (!objFocus) return;
  if (!objFocus.innerHTML) return;
  var objLists = objFocus.getElementsByTagName('li');
  var linkList = new Array();
  var outText = new Array();
  if (objLists.length > 0) {
    for (i=0;i<objLists.length;i++) {
      var chckFlag = true;
      var elemText = new makeTreeElements(idName,objLists[i]);
      if (!elemText.base || !elemText.elem) return;
      for (j=0;j<linkList.length;j++) {
        if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
          chckFlag = false;
          linkList[j][linkList[j].length] = elemText.elem;
        }
      }
      if (chckFlag) {
        var tmpNum = linkList.length;
        linkList[tmpNum] = new Array();
        linkList[tmpNum][0] = elemText.elem;
        linkList[tmpNum].base = elemText.base;
      }
    }
    if (linkList.length > 0) {
      outText[outText.length] = '<ul>\n';
      for (i=0;i<linkList.length;i++) {
        outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
        if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
        for (j=0;j<linkList[i].length;j++) {
          outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
          outText[outText.length] = Array(linkList[i][j],option.leef).join('');
        }
        outText[outText.length] = Array(option.btm,'</li>').join('');
      }
      outText[outText.length] = '</ul>\n';
      objFocus.innerHTML = outText.join('');
    }
  }
}
var gTreeOption = new Array;
gTreeOption['sort'] = false;      /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '⇒ ';      /* ツリー用マーク(通常) */
gTreeOption['end']  = '⇒ ';      /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top']  = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm']  = '';         /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption);     // リンクリストのツリー化
// -->
</script>

ツリー化シリーズはver 2で統合されているので、上記のスクリプトを置くだけで、エントリーリストのツリー化、コメント・トラックバックリストのツリー化、リンクリストのツリー化が行われます。

createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption);     // リンクリストのツリー化

の部分が各リストに対してツリー化を実行している部分です。もしツリー化したくないリストがあれば、その部分を削除してください。

例えば、リンクリストと最新エントリーリストをツリー化しない場合は、

createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化

のようになります。

より柔軟なカスタマイズに対応するため、設定項目が以前よりも増えています。上記のスクリプトではこれまでのデフォルトと同じ表現方法になります。具体的には、

gTreeOption['sort'] = false;      /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '⇒ ';      /* ツリー用マーク(通常) */
gTreeOption['end']  = '⇒ ';      /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top']  = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm']  = '';         /* ツリー本体の最後 */

の部分が設定になります。/* 〜 */の部分が各設定項目の簡易説明になっています。

gTreeOption['sort']は、ツリー内部の表示順番の設定です。trueに設定すると表示順番を入れ替えます。表示順番を入れ替えると、コメントリストなどでは新しいコメントが下に来るようになります。falseだとそのままの表示です。

残りの設定はツリーのマークなどの表示そのものに関わる設定です。これは具体例を挙げて説明した方が分かりやすいと思います。概要図を示すと以下の通りになります。

gTreeOption['list']は概要図で「1.」と記載されている部分です。ツリーの枝になります。概要図ではひとつしか示していませんが、途中に挿入される枝にはこのマークが利用されます(ただし、ツリーの枝が一本しかない場合は利用されません)。

gTreeOption['end']は概要図で「2.」と記載されている部分です。ツリーの一番下の枝になります。これは各ツリーでひとつしか存在しません。

gTreeOption['leef']は概要図で「3.」と記載されている部分です。ツリーの各枝の末尾につきます。概要図では何もないように見えますが、改行<br />が入っています。

gTreeOption['top']は概要図で「4.」と記載されている部分です。ツリー本体の最初につきます。ここでは改行<br />が入っています。

gTreeOption['btm']は概要図で「5.」と記載されている部分です。ツリー本体の最後につきます。ここでは何も付いていませんが、カスタマイズによっては必要になるでしょう。

gTreeOption['list']とgTreeOption['end']を同じマークにすれば、枝の位置によってマークの変化はなくなります。

具体的なカスタマイズ例として、ツリーを罫線で表現してみると以下のようになります(強調部分が変更した箇所です)。

gTreeOption['list'] = '├ ';      /* ツリー用マーク(通常) */
gTreeOption['end']  = '└ ';      /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top']  = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm']  = '';         /* ツリー本体の最後 */

また、スタイルシートも併用してよりツリーらしい表現も可能です。これはツリー化カスタマイズ応用編で触れたいと思います。