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

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

ブログツールのひとつとして有名な 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」を同時に利用する場合の注意書きを追加しました。