Top > CMS・ブログ > Serene Bach > カスタマイズ > ツリー化 > 2006年11月
2006年11月24日

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

November 24,2006 1:30 AM
Tag:[, , ]
Permalink
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 で異なるツリー化カスタマイズを同時に利用する」の設定を行ってください。

1.ツリー画像のダウンロード

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

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

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

2.ツリー画像のアップロード

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

3.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);

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

4.テンプレート修正

リストに付与された 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」を同時に利用する場合の注意書きを追加しました。

Comments [10] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3