ツリー化スクリプト不具合対処（Serene Bach / sb）
Serene Bach / sb でツリー化スクリプトを利用した場合、個別エントリー用HTMLでスクリーンショットのようにサブカテゴリーリストのツリーが正常に表示されない（リストマークが二重で表示される）という情報を頂きました。
Serene Bach / sb の個別エントリー用HTMLではサブカテゴリーツリーにJavaScriptを使っておりまして、ツリー化スクリプトがそのJavaScriptをうまく解析できていなかった、というのが原因です。具体的には、サブカテゴリーリストで初回に出現する要素が ul であればツリー表示用の class 属性を追加していますが、個別エントリー用HTMLのサブカテゴリーツリー表示スクリプトでは script 属性が初回に出現し、そのケースでの処理がもれていました（つまりツリーが表示されない）。
修正したスクリプトに差し替えましたので、下記のリンク先にある maketree.js をダウンロードしてください。
なお修正箇所は下記の通りです。
--- 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ページでも左のように正常に表示されるようになります。 |
サイドメニューのツリー化スクリプト for Serene Bach
Movable Type 用に公開しているサイドメニューのツリー化スクリプト（改）をSerene Bach / sb で適用する方法です。
なお当サイトで公開しているツリー化スクリプトを適用すると、ツリーがきれいにつながって表示されないという情報を頂いておりますので、その点に関しましては８項を参照ください。
注：本カスタマイズと「JavaScript 不要なサイドメニューのツリー化 for Serene Bach」を同時に利用する場合は、「Serene Bach で異なるツリー化カスタマイズを同時に利用する」の設定を行ってください。
１．maketree.js ダウンロード
下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。
本スクリプトは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つの画像がありますのでご注意ください。
保存方法は、（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」を同時に利用する場合の注意書きを追加しました。
