ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - 最近のコメントのツリー化をつくりたい!

最近のコメントのツリー化をつくりたい!

最近のコメントを記事ごとにまとめてツリー化する方法を紹介します。
test最近のコメントのツリー化見本見本

コメントのツリー化の方法

【参考記事】 「ヒヨコ君増殖中 恋 FC2版」様:クリスマスツリーに肖ってツリー化の手引き
         「JUGEMカスタマイズ講座」様;ツリー化スクリプト ver 2

最初にテンプレートの設定からHTMLの編集を開きます。そして一番下までスクロールさせていって下さい。すると一番下ぐらいに</body>というのが見つかると思います。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログでは・・・
</div>
<!-- **********mabody_ED********** -->

</body>
</html>
この様になっていました。見つかったらこの</body>のすぐ上に下記のものをコピーして張りつけます。

<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d\d\/\d\d)\)/);
this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}
outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>\n';
objFocus.innerHTML = outText.join('');
}
}
}
var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '⇒ '; /* ツリー用マーク(通常) */
gTreeOption['end'] = '⇒ '; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<br />\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = ''; /* ツリー本体の最後 */
createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption); // リンクリストのツリー化
// -->
</script>

このまま使うとツリーの部分が⇒になるのでこのブログの様にしたければ、下のほうにある、
gTreeOption['list'] = ' '; /* ツリー用マーク(通常) */
gTreeOption['end'] = ''; /* ツリー用マーク(末端) */
を通常の方をに末端の方をに張り替えて下さい。

このブログを例にすると、
</div>
<!-- **********mabody_ED********** -->

<script type="text/javascript">
<!--
~~~~~~~~
// -->
</script>

</body>
</html>
この様に張りつけます。できたら保存を押して下さい。

次に管理画面の[プラグインの設定]→[最近のコメント]の[HTMLの変更]をクリックします。
<ul>
<!--rcomment-->
<li &align>
<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name>:<%rcomment_etitle> (<%rcomment_month>/<%rcomment_day>)</a>
</li>
<!--/rcomment-->
</ul>
すると、この様になっていますよね。

これを全部削除して下記のものに置き換えます。

<div id="commentlist">
<ul>
<!--rcomment-->
<li><%rcomment_etitle><br /><a href="<%rcomment_link>#comment"><%rcomment_name>(<%rcomment_month>/<%rcomment_day>)</a></li>
<!--/rcomment-->
</ul>
</div>

張り替えましたら[変更]ボタンを押して下さい。

そして自分のブログを確認してみて下さい。ツリー化ができていると思います。
この方法はプラグイン対応のテンプレートの人が対象です。もしプラグイン非対応のテンプレートを使っている人はテンプレートの設定のHTMLの編集にある最近の記事・コメント・トラックバックの該当場所に最後に紹介した物をそれぞれ挿入して下さい。
プラグインがよくわからない人はプラグインって何?を読んでみて下さい。

できたので「ヒヨコ君増殖中 恋 FC2版」のひよこさんにお礼を言に行く。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
できました!!!
コメントをツリー化したくてさがしていたらこちらにたどりつきました!
そして出来ました。
ありがとうございました!
よかったです!
ツリー化できておめでとうございます!!
うちのブログがお役に立てて僕も嬉しいです!
たどりついてくれてありがとうございました!!!
ありがとうございます!
カスタマイズの参考にさせていただいています。
手順が分かりやすく書いてあって、本当にありがたいです。
さっそくコメントをツリー化してみました。
ありがとうございます!
お役にたてて。
お役に立てたようで嬉しいです!!
ツリー化って一番やってみたいカスタマイズの1つですよね!
初めまして
コメントのツリー化がこちらを参考にして出来たのですが。
ツリー部分のコメントに飛ぶことが出来なくなりました。(クリックが出来ません)
どのようにすればいいでしょうか?
かなさんへ
はじめまして!なぜ上手くいかないかはブログを実際に見せていただかないとちょっと原因はわからないですね。ごめんなさい。
初めまして
コメントのツリー化が簡単に出来ました!
ありがとうございました!
まちゃさんへ
始めまして!コメントのツリー化できておめでとうございます!!
毎度お世話様です
るるんばさん、お陰様でまだ(笑)ブログを続けています。
しかも、コメントのツリー化もできました! ありがとうございます。
るるんばさんやヒヨコさんたちの先導のお陰ですが、ゼイゼイ言いながらついていこうとしている自分を、少し誉めてあげたい気分です(^^ゞ
シンゲルさん
シンゲルさん、お久しぶりです。立派なツリーになっていますね。
自分はシンゲルさんの様にセンスあふれるを写真が取れるようになりたいです。
是非ブログ続けてくださいね!!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/168-bd7461e6   

Template Designed by DW99