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

Serene Bach のツリー化カスタマイズとして当サイトで紹介している

1. サイドメニューのツリー化スクリプト for Serene Bach
2. JavaScript 不要なサイドメニューのツリー化 for Serene Bach

がありますが、この 2 つを同時に適用すると「ツリーが正常に表示されません」というご質問を頂きました。

原因は 2. のツリーの記事タイトルに ul 要素ではなく、li 要素が使用されているので、それ専用の CSS を設定しているのですが、その設定が 1. の CSS の class 属性名とバッティングしているためです。

解消するひとつの方法として、1. で利用している maketree.js および CSS を修正する方法を紹介します。

１．maketree.js の修正

ご自身で使用されている maketree.js をサーバからダウンロードします。そのファイルを任意のエディタで開き、下記の赤色部分（tree）を検索して、すべて「tree2」に修正してください。計6ヶ所あります。

修正前

nodes[i].setAttribute('class', 'tree');

修正後

nodes[i].setAttribute('class', 'tree2');

修正したら保存して、元のディレクトリにアップロードしてください。

２．CSS 修正

「サイドメニューのツリー化スクリプト for Serene Bach」の記事にある CSS を設定していると思いますので、このセレクタ名 tree を全て tree2 に変更します。

ul.tree2 {
　　：
ul.tree2 ul {
　　：
ul.tree2 li {
　　：
ul.tree2 li.end {
　　：

以上です。

ブログツールのひとつとして有名な Serene Bach は現在 2.08D（開発途上版） がリリース中ですが、プラグインを用いて JavaScript 不要なコメント・トラックバックのツリー化を行うカスタマイズを紹介します。

Serene Bach on the Prairie：コメント・トラックバック指定ジャンプ

具体的には、「最近のコメント」「最近のトラックバック」ともに、コメントまたはトラックバック単位に表示されていたものが、記事単位およびコメント投稿日順・トラックバック受信順にまとめて表示されるようになります。

またHTMLマークアップは下記のように class 属性が追加されるようになります。また href 属性に "#"+部分識別子が付与されますので、個別記事ページの該当コメントまたは該当トラックバックの表示位置にジャンプできるようになります。

<ul class="tree">
<li><a href="http://～/eidx.html">記事タイトル1</a></li>
<li class="lst"><a href="http://～/eidx.html#com0">投稿者1 (mm/dd)</a></li>
<li class="lst"><a href="http://～/eidx.html#com1">投稿者2 (mm/dd)</a></li>
<li class="end"><a href="http://～/eidx.html#com2">投稿者3 (mm/dd)</a></li>
<li><a href="http://～/eidy.html">記事タイトル2</a></li>
<li class="lst"><a href="http://～/eidy.html#com0">投稿者1 (mm/dd)</a></li>
<li class="lst"><a href="http://～/eidy.html#com1">投稿者2 (mm/dd)</a></li>
　　　　　：
</ul>

青色部分の class 属性が追加されるので、これに対応するCSSを与えるだけでツリー表示が可能になります。

以下、カスタマイズ方法です。プラグインは配布サイトより入手し、利用可能状態にしてください。プラグインを利用可能にした後、管理画面左の「追加機能」に「コメント・トラックバック指定ジャンプ」が表示されますので、そのリンクをクリックして、表示された画面で「ツリー表示を使う」にチェックをして「変更する」をクリックしてください。

注：本カスタマイズと「サイドメニューのツリー化スクリプト for Serene Bach」を同時に利用する場合は、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の設定を行ってください。

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

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

実線：tree_lst_solid.gif / tree_end_solid.gif
点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
なおファイル名は３項の CSS で設定している tree_lst.gif および tree_end.gif に修正してください。

２．ツリー画像のアップロード

ダウンロードした画像をサーバの任意のディレクトリ（例えば img 配下）にアップロードしてください。

３．CSS設定

リスト3.1 のCSSをスタイルシートに追加します。

リスト 3.1　CSS

ul.tree {
    margin: 0 0 0 3px;
    padding: 0;
    font-size: 9px;
    list-style: none;
}
ul.tree li.lst {
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
    background-position: 1.5em 0;
    background-repeat: no-repeat;
    background-image: url(img/tree_lst.gif);
}
ul.tree li.end {
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
    background-position: 1.5em 0;
    background-repeat: no-repeat;
    background-image: url(img/tree_end.gif);
}

上記はスクリーンショットのように当サイトのテンプレートに合わせたものですが、他のテンプレートでも適用可能と思います。レイアウトについては適宜修正してください。

なお、background-image プロパティの画像ファイルは、img ディレクトリに画像をアップロードしている場合を想定しています。例えば hogehoge というディレクトリの配下にツリー画像をアップロードした場合は、

background-image: url(hogehoge/tree_lst.gif);

という風に修正してください。

４．テンプレート修正

リストに付与された href 属性の"#"＋部分識別子を有効にしたい場合、個別記事のコメントリスト（リスト 4.1）・トラックバックリスト（リスト 4.2）に id 属性（青色）を追加します。

リスト 4.1　コメントリストへ id 属性を追加

<!-- BEGIN comment -->
<div class="comment" id="{comment_id}">
<div class="comment-content">{comment_description}</div>
<p class="comment-footer">Posted by {comment_name} at {comment_time}</p>
</div>
<!-- END comment -->

リスト 4.2　トラックバックリストへ id 属性を追加

<!-- BEGIN trackback -->
<h3 class="trackbacks-header">Trackbacks</h3>
<div class="trackbacks-content">
<div class="trackback" id="{trackback_id}">
<div class="trackback-content">{trackback_excerpt}</div>
<p class="trackback-footer">
{trackback_title} | {trackback_blog_name} | {trackback_time}
</p>
</div>
</div>
<!-- END trackback -->

2007.02.06 追記
「サイドメニューのツリー化スクリプト for Serene Bach」を同時に利用する場合の注意書きを追加しました。

サイドメニューのツリー化スクリプト for Serene Bachを、他サイトで配布されているテンプレートで罫線つきのカテゴリーリストに適用する場合のカスタマイズです。スクリーンショットは罫線を表示している上にツリー化用画像を表示させた完成例です。 以下、blog*citron さんの「針ねずみのノート#003 ver2.02」の場合を例に説明致します。なお、基本的なカスタマイズについては元エントリーを参照ください。

まず、通常のサブカテゴリーリストにツリー化プラグインを設置する例です。カテゴリーリスト用の独自タグに青色のタグを追加します。

<!-- BEGIN category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{category_list}</div>
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>
</dd>
</dl>
<!-- END category -->

ポイントは、独自タグに設定するスクリプトの挿入位置を </dd> の前に配置することです。スクリプトを </dl> や <!-- END category --> の後方に配置すると、リストが正常に表示されません（IEでは表示が一部消えてしまう事象が確認されています）のでご注意ください。

また、カテゴリーのプルダウン化プラグインと併用する場合は下記のようになります。

<!-- BEGIN fold_category -->
<dl class="category">
<dt id="categoryname">CATEGORIES</dt>
<dd id="categorylist">
<div id="categories">{fold_category_list}</div>
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>
</dd>
</dl>
<!-- END fold_category -->

以上です。
CSS等の設定については元のエントリーを変更せずにできましたが、テンプレートによっては若干設定が異なるかもしれませんので予めご了承ください。

ツリーと罫線が同時に表示されない場合、 li 要素に罫線を表示する設定になっている可能性があります。ツリー化画像も li 要素に対して与えており、同じ要素に異なる画像を同時に表示することはできません。
このような場合、罫線画像を ul 要素に与えれば、異なる画像を同時に表示できると思います（冒頭のスクリーンショットはそのような設定になっています）。

2006.12.24 追記
画像が正常に表示されない場合の対処を追加しました。

Serene Bach / sb でツリー化スクリプトを利用した場合、個別エントリー用HTMLでスクリーンショットのようにサブカテゴリーリストのツリーが正常に表示されない（リストマークが二重で表示される）という情報を頂きました。

Serene Bach / sb の個別エントリー用HTMLではサブカテゴリーツリーにJavaScriptを使っておりまして、ツリー化スクリプトがそのJavaScriptをうまく解析できていなかった、というのが原因です。具体的には、サブカテゴリーリストで初回に出現する要素が ul であればツリー表示用の class 属性を追加していますが、個別エントリー用HTMLのサブカテゴリーツリー表示スクリプトでは script 属性が初回に出現し、そのケースでの処理がもれていました（つまりツリーが表示されない）。

修正したスクリプトに差し替えましたので、下記のリンク先にある maketree.js をダウンロードしてください。

download

なお修正箇所は下記の通りです。

--- maketree.js.bak     Wed Jan 25 23:54:52 2006
+++ maketree.js Wed Jan 25 23:55:49 2006
@@ -27,9 +27,12 @@
     }
 
     // 最初の要素がULの場合, class属性(tree)を設定
-    if(nodes[0].nodeName == 'UL'|| nodes[0].nodeName == 'ul'){
-        nodes[0].setAttribute('class', 'tree');
-        nodes[0].setAttribute('className', 'tree');
+    for (var i = 0; i < nodes.length; i++) {
+        if(nodes[i].nodeName == 'UL'|| nodes[i].nodeName == 'ul'){
+            nodes[i].setAttribute('class', 'tree');
+            nodes[i].setAttribute('className', 'tree');
+            break;
+        }
     }
 
     for (var i = 0; i < nodes.length; i++) {

ツリー化スクリプトをver1.05以降のものに差し替えることで、個別エントリー用HTMLページでも左のように正常に表示されるようになります。

Movable Type 用に公開しているサイドメニューのツリー化スクリプト（改）をSerene Bach / sb で適用する方法です。
なお当サイトで公開しているツリー化スクリプトを適用すると、ツリーがきれいにつながって表示されないという情報を頂いておりますので、その点に関しましては８項を参照ください。

注：本カスタマイズと「JavaScript 不要なサイドメニューのツリー化 for Serene Bach」を同時に利用する場合は、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の設定を行ってください。

１．maketree.js ダウンロード

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

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存するか、script 要素の charset 属性にスクリプトの文字コードを指定してください（scriptタグの設定方法につきましてては３項に記します）。

２．maketree.js 配置

ダウンロードした maketree.js を index.html と同じディレクトリにアップロードしてください。

３．リスト表示用タグ修正およびJavaScript起動用スクリプト設定

ベースHTMLテンプレート（個別エントリー用HTMLテンプレートを使っている方は両方）のサイドバーのメニューリストのMTタグを修正します。ここでは公開テンプレートを例に、各サイドメニューの設定例を示します。黒字部分が公開テンプレートで設定している独自タグで、青色部分が新たに追加する部分です。赤色は任意の名称を設定します（タグの id 属性とスクリプト部分の名称が一致するように設定してください）。
他のテンプレートでも適用可能ですが、ツリー化を行う場合、ul と li を用いたリスト形式になっていることが前提となります。

Latest Entries

<!-- BEGIN latest_entry -->
<div class="sidetitle">Latest Entries</div>
<div class="side" id="entrylist">{latest_entry_list}</div>
<!-- END latest_entry -->
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Recent Comments

<!-- BEGIN recent_comment -->
<div class="sidetitle">Recent Comments</div>
<div class="side" id="commentlist">{recent_comment_list}</div>
<!-- END recent_comment -->
 
<script type="text/javascript">
<!--
generateNormalTree("commentlist");
//-->
</script>

Recent Trackbacks

<!-- BEGIN recent_trackback -->
<div class="sidetitle">Recent Trackbacks</div>
<div class="side" id="trackbacklist">{recent_trackback_list}</div>
<!-- END recent_trackback -->
 
<script type="text/javascript">
<!--
generateNormalTree("trackbacklist");
//-->
</script>

Categories（他と若干設定内容が異なります）

<!-- BEGIN category -->
<div class="sidetitle">Categories</div>
<div class="side"><div id="categories">{category_list}</div></div>
<!-- END category -->
 
<script type="text/javascript">
<!--
generateSubcategoryTree();
//-->
</script>

Archives

<!-- BEGIN archives -->
<div class="sidetitle">Archives</div>
<div class="side" id="monthlylist">{archives_list}</div>
<!-- END archives -->
 
<script type="text/javascript">
<!--
generateNormalTree("monthlylist");
//-->
</script>

Links

<!-- BEGIN link -->
<div class="sidetitle">Links</div>
<div class="side" id="linklist">{link_list}</div>
<!-- END link -->
 
<script type="text/javascript">
<!--
generateNormalTree("linklist");
//-->
</script>

４．maketree.js インクルード文挿入

ベースHTMLテンプレート（個別エントリー用HTMLテンプレートを使っている方は両方）の </head> の直前に下記のタグを追加してください。スクリプトの文字コードとブログの文字コードが異なる場合は青色の charset 属性を指定する場合は maketree.js の文字コードを指定してください。

<script type="text/javascript" src="{site_top}maketree.js" charset="utf-8"></script>

５．画像のダウンロード

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

実線：tree_lst_solid.gif / tree_end_solid.gif

点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては以前我楽さんより提供いただいたものをそのまま使っています。点線バージョンはたいしたものではありませんので腕に自信のある方は作り直されることをお勧めします。

６．画像の配置

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

７．スタイルシート追加

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

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(tree_lst.gif);
    background-position: 0 0;
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(tree_end.gif);
    list-style: none;
}

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

８．不具合の修正

Movable Type の設定をそのままお使いの場合、冒頭に記した通りツリーがきれいにつながって表示されません。
これを修正するにはスタイルシートに

ul.tree li {
　　　：
    background-position: 0 0;
　　　：
}

を追加することできれいに表示されるようになります（７項のCSSには設定済です）。

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

2007.02.06 追記
４項の記述を修正しました（「<head>～</head> の間」→「</head> の直前」）。また、「JavaScript 不要なサイドメニューのツリー化 for Serene Bach」を同時に利用する場合の注意書きを追加しました。