Seesaaブログのコメント表示を降順に

ブログで投稿してもらったコメント数が多いと、新しいコメントを見るのにずっと下の方までスクロールしないといけない。
サービスによってはコメントを降順に表示出来るものもあるが、残念ながら現在のところSeesaaブログではこの機能は実装されていない。

なんとかカスタマイズ出来ないかと調べてみたら、下記サイトにコメントを降順に並べる方法が紹介されていた。
JavaScriptを使用するものらしい。
コメントを降順に表示させる－－方法２－－: ブログカスタマイズ実験室３（わいずふぁくとりい）

「コンテンツPC」の「記事」で記事のHTMLを下記のように編集。

<% content.header -%>

（★★★この箇所に下記コード［１］を挿入★★★）

<!-- Content -->

（中略）

<% if:page_name eq 'article' -%>
<% if:individual_article.accept_comment_show -%>
<div id="comments">

<a name="comment"></a>

<div class="comments-head">この記事へのコメント</div>

（★★★この箇所に下記コード［２］を挿入★★★）

<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %><br /></div>
</div>
<% /loop -%>

（★★★この箇所に下記コード［３］を挿入★★★）

<!-- ↓↓コメント入力フォームここから↓↓ -->
<% if:individual_article.accept_comment_catch -%>
<div class="comments-head">コメントを書く</div>
<form action="<% blog.page_url %>pages/user/comments2/regist/input" method="post" name="comment-form">
<div class="comments-body">
お名前: <% if:blog.ignore_setting.fill_writer %>[必須入力]<% /if %><br />
<input type="text" name="article_child__writer" size="50" value="" /><br />
メールアドレス: <% if:blog.ignore_setting.fill_email %>[必須入力]<% /if %><br />
<input type="text" name="article_child__email" size="50" value="" /><br />
ホームページアドレス: <% if:blog.ignore_setting.fill_homepage %>[必須入力]<% /if %><br />
<input type="text" name="article_child__homepage" size="50" value="" /><br />
コメント: <% if:blog.ignore_setting.fill_body %>[必須入力]<% /if %><br />
<textarea name="article_child__body" rows="10" cols="45"></textarea><br />
<input type="hidden" name="article_child__article_id" value="<% individual_article.id %>" />
<input type="hidden" name="article_id" value="<% individual_article.id %>" />
<% if:blog.ignore_setting.captcha_comment -%>
認証コード: [必須入力]<br />
<img src="<% blog.ignore_setting.page_url_captcha_comment -%>" /><br />
<input type="text" name="captcha_comment" size="50" value="" /><br />
※画像の中の文字を半角で入力してください。<br />
<% /if -%>
<% if:individual_article.accept_comment_permission_mode -%>
※ブログオーナーが承認したコメントのみ表示されます。<br />
<% /if -%>
<% if:blog.ignore_setting.banascii_comment -%>
<% /if -%>
<input name="need_confirm" type="submit" class="input-submit"  value="確認する" /><input name="posted" type="submit" class="input-submit"  value="書き込む" />
</div>
</form>
<% /if -%>
<!-- ↑↑コメント入力フォームここまで↑↑ -->

</div>
<% /if -%>

<% if:individual_article.accept_tb_show -%>
<div id="trackback">

（以下略）

上記HTMLの該当箇所に下記コードを挿入。

コード［１］↓

<script type="text/javascript" language="javascript">
<!--
var lc = 0;
var sarray = new Array();

function setText(s){
    sarray[lc] = s;
    lc++;
}

function writeText(){
    var L = sarray.length;
    for(i=0;L-i>0;i++){
        document.write(sarray[L-i-1]);
    }
}

function initText(){
    lc = 0;
    sarray = new Array();
}
-->
</script>

コード［２］↓

<script type="text/javascript" language="javascript">
<!--
  initText();
  <% loop:list_individual_article_children -%>
    var s = '<div class="comments-body">';
    s += '<div class="text">';
    s += '<% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %>';
    s += '</div>';
    s += '<div class="comments-post">';
    s += 'Posted by ';
    <% if:comment.homepage %>
    s += '<a href="';
    s += '<% comment.homepage | html | tag_strip %>"';
    s += 'target="_blank" rel="nofollow">';
    s += '<% comment.writer | html | tag_strip %></a>';
    <% else %>
    s += '<% comment.writer | html | tag_strip %>';
    <% /if %>
    s += ' at ';
    s += '<% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %>';
    s += '<br /></div>';
    s += '</div>';
    setText(s);
  <% /loop -%>
  writeText();
// -->
</script>
<noscript>

コード［３］↓

</noscript>

このままだとコメントを入力する時にも下の方までスクロールしないといけないので、「コメント入力フォーム」の箇所をコード［２］の2行上<a name="comment"></a>の直上に移動さた。
このすぐ下に<br />を２、３個入れて、下に空白を空けた方がしっくり来る。

HTML編集の際、画面が小さいと見づらくてやりにくいので、エキスパートモードでやるか、テキストエディタを使ったほうが良いだろう。
失敗して今までのカスタマイズをおじゃんにしてしまったら辛いので、テキストファイルなどの形でバックアップも取っておいた方が無難だと思う。

なおJavaScriptを使用しているそうなので、閲覧者がNoScriptのようなアドオンを用いていたら表示に不具合があるのかもしれない。

表示

Seesaaブログのコメント表示を降順に

Comments