小粋空間: 最近のコメント: 2006年4月アーカイブ

Top ＞ FC2ブログ＞カスタマイズ＞最近のコメント＞ 2006年4月

2006年4月23日

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

April 23,2006 1:30 AM
Tag：[Customize, FC2, Tree]
Permalink

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

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

カスタマイズ前

→

カスタマイズ後

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

１．コメントリスト用タグの変更

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

<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 タグの間に改行を入れないこと

２．スクリプトの追加

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

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

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