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

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

Posted at November 24,2006 1:30 AM
Tag:[Customize, SereneBach, Tree]
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」を同時に利用する場合の注意書きを追加しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

頑張ってツリー化をやってみた☆その? from *day after day...*
その?に引き続きJavaScript不要なサイドメニューのツリー化for Serene Bachを実行。このカスタマイズは,コメントとトラックバックに対し... [続きを読む]

Tracked on March 27, 2007 2:59 PM
コメント

こんばんは!
またしても教えて欲しい事が出てきたので質問させてください。

「サイドメニューのツリー化スクリプト for Serene Bach」を使用しているのですが、このスクリプトを使用しながら、「コメント・トラックバック指定ジャンプ」のツリー化を使用したい場合はどのように設定をすれば上手くいくのでしょうか??

サイドメニュースクリプトの

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;
}

このあたりでひっかかっているような気もするのですが…

すみませんが宜しくお願いします。

[1] Posted by : January 19, 2007 10:21 PM

>魁さん
こんばんは。
ご質問の件ですが、別途エントリー致しますのでお待ちください。
あと貴サイトで不具合が確認できませんでしたので、ご質問の内容は不具合の状況をダイレクトに書いて頂けると助かります。例:「Aの記事とBの記事のカスタマイズを同時に行うと、××のツリー表示がおかしくなりました」等。
カスタマイズご利用頂き有難いのですが、コメント稼動の削減にご協力ください。
それではよろしくお願い致します。

[2] Posted by yujiro : January 21, 2007 12:12 AM

お返事ありがとうございます。
エントリーを待つ事にします!
ツリー化表示のままにしていると、再構築でエラーが出てしまったためツリー化をオフにしていました。
お手数をおかけして申し訳ありませんでした…

[3] Posted by : January 21, 2007 2:03 AM

先ほどサイドメニューのツリー化スクリプトに質問させていただいたんですが,こちらのほうが良かったかも;;すいません。
サイドメニューの折りたたみのエントリーのほうにも後で質問しておきますのでそちらのほうもよろしくお願いします。

[4] Posted by kana : March 27, 2007 1:15 PM

いつもお世話になっています。

今回、JavaScript 不要なサイドメニューのツリー化 for Serene Bachと
サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
を導入させいてただきました。
・・・で、コメントの部分にまで親カテゴリー用の画像がついていて、
ツリーの所が出てきてくれません・・・。
これは、どうしたらちゃんとなるでしょうか?

それと、ここで聞いていいのかわからないのですが、
カテゴリーのプルダウン化プラグイン for Serene Bachを使って出てきた記号の『+』『?』を、ちゃんと▲▼にしたいのですが、
私はどこを間違っているのか教えていただけないでしょうか?
質問ばかりで申し訳ありません・・・。
お願いします・・・。

[5] Posted by xax : March 30, 2007 2:07 PM

xaxさんへ。
ちょっと気になった事があるので確認してみてください。
コメントの部分にまで・・・・という質問なのですが、「コメント・トラックバック指定ジャンプ 」の「ツリー設定」の部分の「ツリーの開きタグ」という部分を確認してみてください。
<ul class="tree">となっているでしょうか?
<ul class="tree○">のように○の場所に他の文字が入っているように思うのですが…

次の質問ですが、menufolder.js内の「サブカテゴリーリスト用設定データ」にあるvar openMarkForSubCategoriesのマークが、+や?になっているように思うのですがどうでしょうか?
あと、文字コードをEUC-JPをお使いのように思いますが、javascriptのcharset設定でutf-8になっているので、EUC-JPに変更した方が…
間違っていたらごめんなさい。

yujiroさんでしゃばってコメントしてごめんなさい。

[6] Posted by : March 30, 2007 9:50 PM

魁 さん、コメントありがとうございます。
「ツリーの開きタグ」の部分を見てみたんですが<ul>でした・・・。
それと次に教えていただいたmenufolder.js内のvar openMarkForSubCategoriesの
マークが+と?だったので▲と▼に変えてみたところ・・・
??って表示されるようになってしまいました・・・
・・あ、javascriptのcharset設定は、EUC-JPに変更しました。

せっかく助けていただいてるのにちゃんと直せなくてなんだか申し訳ないです・・。
でもでも本当にありがとうございました♪

[7] Posted by xax : March 31, 2007 7:23 PM

すみません。変になっちゃったのでもう一度打ちます。
コメント欄を汚してすみません・・。

魁 さん、コメントありがとうございます。
「ツリーの開きタグ」の部分を見てみたんですが
<ul class="tree">でした・・・。
それと次に教えていただいたmenufolder.js内のvar openMarkForSubCategoriesの
マークが+と?だったので▲と▼に変えてみたところ・・・
??って表示されるようになってしまいました・・・
・・あ、javascriptのcharset設定は、EUC-JPに変更しました。

せっかく助けていただいてるのにちゃんと直せなくてなんだか申し訳ないです・・。
でもでも本当にありがとうございました♪

[8] Posted by xax : March 31, 2007 7:31 PM

ツリーの開きタグを聞いたのはFirebugでソースを見てみると、
dd id="commentlist"
ul class="tree1" classname="tree1"
となっていたからからです。
でも違っていたとなるとなんでなんだろ?(汗

あとmenufolder.jsが文字化けしているみたいです…
menufolder.jsを入れ替えると望んでいる動作になっていましたので、
もう1度入れ替えて▲等の修正をしてみてはいかがでしょうか?

[9] Posted by : April 1, 2007 4:35 AM

>xaxさん
こんばんは。
ご返事遅くなってすいません。
頂いているURLが 404 not found になりますので、もしサイトを移転されたようでしたら改めてご連絡頂けますでしょうか。
それではよろしくお願い致します。

>魁さん
こんばんは。
フォローありがとうございました!

[10] Posted by yujiro : April 5, 2007 6:01 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)