Top > CMS・ブログ > FC2ブログ > カスタマイズ > 最近のコメント > 2006年4月
2006年4月23日

コメントリストを記事別にまとめて表示する for FC2 ブログ

April 23,2006 1:30 AM
Tag:[, , ]
Permalink

コメントリストを記事別にツリー化するカスタマイズです。今のところFC2ブログのみで確認していますが、後述するタグの構成が同様であれば他のブログでも適用可能と思われます。またトラックバックリストにも適用可能と思いますが当方では動作未確認です。

カスタマイズを行うことで下記のスクリーンショットのように記事別にコメントをまとめ、さらにツリー化カスタマイズと組み合わせることも可能です。ここでは公開テンプレートを例に使用していますが、コメントリスト・トラックバックリストのタグ構成が同じであれば他のテンプレートにも適用可能です。

カスタマイズ前
カスタマイズ前
カスタマイズ後
カスタマイズ後

動作は Windows2000/XP の IE/Firefox/Opera で確認しています。急いで作ったのでα版という位置づけでご利用ください。

1.コメントリスト用タグの変更

下記のタグをテンプレートに貼り付けます。

<div class="sidetitle">
Recent Comments
</div>
 
<div class="side" id="commentlist">
<!--rcomment-->
<span><%rcomment_etitle></span><ul><li><a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_title></a> <%rcomment_name> <%rcomment_month>/<%rcomment_day></li></ul>
<!--/rcomment-->
</div>

貼り付けた後、タグに改行を入れないでください。改行を挿入した場合、動作の保証はできません。

また上記以外のタグを貼り付ける場合は下記の事項を守ってください(下記で全て網羅できていないかもしれません)。

  • コメントタイトルが span タグで括られていること
  • コメント投稿者情報が ul タグ および li タグで括られていること
  • span の終了タグと次の ul タグの間に改行を入れないこと

2.スクリプトの追加

コメントを記事別にまとめるためのスクリプト(下記)をテンプレートの最後の方に追加してください。

<script type="text/javascript">
function deleteTextNode(node) {
    if(node.parentNode != undefined){
//        node.parentNode.removeChild(node);
    }
}
function collateData(id) {
    var data = '';
    var counter = 0;
    var ul = new Array('');
    var li = new Array('');
    var flag;
    var elements = document.getElementById(id).getElementsByTagName('span');
    for (i = 0; i < elements.length; i++) {
        flag = false;
        for (j = 0; j < ul.length; j++) {
            if (ul[j] == elements[i].innerHTML) {
                flag = true;
                deleteTextNode(elements[i].nextSibling);
                li[j] += elements[i].nextSibling.innerHTML + '\n';
            }
        }
        if (!flag) {
            ul[counter] = elements[i].innerHTML;
            deleteTextNode(elements[i].nextSibling);
            if(li[counter] == undefined){
                li[counter] = elements[i].nextSibling.innerHTML + '\n';
            } else {
                li[counter] += elements[i].nextSibling.innerHTML + '\n';
            }
            counter++;
        }
    }
    for (i = 0; i < counter; i++) {
        data += '<span>'+ul[i]+'</span>';
        data += '<ul>'+li[i]+'</ul>';
    }
    document.getElementById(id).innerHTML = data;
}
collateData('commentlist');
</script>

赤色の部分は1項にある赤色の文字と同じものを設定してください。設定する文字は任意ですが個別ページで似たような id を使っている箇所があるので、まずは上記の設定のままお使いになってみてください。

3.ツリー化する

上記までの設定で記事別にコメントがまとまりますが、冒頭のスクリーンショットのようにツリー化する場合はサイドメニューのツリー化スクリプト for FC2 ブログを実施してください。

Comments [25] | 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