【Blogger】コメントを新着順に並び替える

Blogger の記事ページや固定ページのコメントは、デフォルトでは上から投稿順（古い順）に並んでいます。

しかしこの並び順だと、新しいコメントを読むのにわざわざコメント欄の下の方までスクロールしなければならないのが地味に面倒です。

そこでこの記事では、Blogger でコメントを新着順に並び替える方法について書いていきます。

【Blogger】コメント欄のアバター画像の変更（JavaScript 不要）

注意事項

まず注意点として、次項以降のその1、その2 の方法は、スレッド式の場合コメントがうまく並びません。

フルページやポップアップウィンドウにおいても、特別な理由がない限りはその3 の方法をおすすめします。

また、Blogger で 1ページに表示できるコメントは 200件までで、それ以上のコメントが付くとページが分割されてしまいます。

Bloggerのコメント欄を標準jsなしで返信可能にする | バグ取りの日々

そのため、コメントが意図した通りの並び順にならない可能性があります。

そんなにたくさんのコメントが付くことはあまりないかもしれませんが、念のため。

最後に、記事で紹介するコメント欄の HTML は、ウィジェットバージョン1 の <b:includable id='comments' var='post'> ... </b:includable> 内でデフォルトで出力されるものを例に挙げています。

カスタマイズ済みのテンプレートやウィジェットバージョン2 のテンプレートでは、操作に若干の違いが出ることをご了承ください。

コメントを新着順に並び替える方法

ここからコメントを新着順に並び替える方法を 3つ紹介していきます。

先述の通り、3つ目の方法がおすすめです。

その1：CSS を使う

まず、Blogger テンプレートの HTML から <b:loop values='data:post.comments' var='comment'> を探し出し、以下の部分を

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>
    コメント表示ブロック
  </b:loop>
</dl>

こちらのコードのように b:loop の中身を div で囲った形に置き換えます。

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  <b:loop values='data:post.comments' var='comment'>
    <div class='comment-block'>
      コメント表示ブロック
    </div>
  </b:loop>
</dl>

以上の操作は次項のその2 でも行います。

ちなみに、dl の子要素に div ってありなの？と思い調べてみましたが、dt と dd をグループにまとめるために使う場合は問題ないようです。

<dl>: 説明リスト要素 - HTML: HyperText Markup Language | MDN

HTML の変更が終わったら、次は <b:skin><![CDATA[ ... ]]></b:skin> 内に以下の CSS を追加します。

#comments-block{
  display: flex;
  flex-direction: column-reverse;
}

テンプレートを保存して、コメントが新着順に並んでいたら成功です。

さて、こうやって紹介しておいてなんですが、コメントの並び替えにこの方法を使うのはおすすめしません。

flex-direction で見た目の順序は変わっても HTML 上の要素の順番は変わらないため、以下の記事に書かれているようなアクセシビリティ上の問題が生じてしまうからです。

flex-direction - CSS: カスケーディングスタイルシート | MDN

今回は注意喚起も兼ねてあえてこの方法を紹介してみました。

その2：JavaScript を使う

まず、前項の「その1：CSS を使う」と同様にb:loop 直下に div を追加します。

次に、こちらを参考にテンプレートに JavaScript を追加します。

Reverse the Order Of Comments In Google Blogger（Google Blogger でコメントの順序を逆にする）

上の記事で紹介されているものとは別に自力でもコードを書いたので、あわせて紹介します（やっていることはほぼ一緒です）。

<script>//<![CDATA[
window.addEventListener('DOMContentLoaded', function (){
  const block = document.querySelector('#comments-block');
  const comment = block.querySelectorAll('.comment-block');
  for(let i = comment.length - 1; i => 0; i--){
    block.appendChild(comment[i]);
  }
})
//]]></script>

DOMContentLoaded を付けているので、コードの設置位置がある程度上のほうでも動くはずですが、心配な場合は </body> 直前がおすすめです。

この方法のメリットは、要素の見た目の順番とHTML 上の順番が一致しているため、前項で挙げたアクセシビリティの問題が生じないところです。

ただし、当然 JavaScript が無効の場合はコメントが投稿順に並んでしまいます。

コメントの表示順をボタンなどで切り替えるスクリプトは、おそらくこのように JavaScript を使わないと実装できないのではと思います。

その3：Blogger の独自タグを使う（おすすめ！）

最後に紹介するのは、CSS も JavaScript も使わずに、Blogger の独自タグだけでコメントを並び替える方法です。

操作はとっても簡単。

Blogger テンプレートから以下のコードを見つけ出し、

<b:loop values='data:post.comments' var='comment'>
  コメント表示ブロック
</b:loop>

b:loop タグに reverse='true' を追加するだけで、コメントを新着順に並べることができます。

<b:loop reverse='true' values='data:post.comments' var='comment'>
  コメント表示ブロック
</b:loop>

La balise de boucles / The loop tag : <b:loop> - Blogger Code PE（ループタグ：<b:loop> )

この方法なら JavaScript が無効の場合でも使えますし、b:loop の中身をわざわざ div で囲まなくてもいいのでとても楽です。

さらに Blogger 独自タグの b:with と組み合わせると、条件によってコメントの並び順を変更することができます。

Alias de variable / The variable alias : <b:with> - Blogger Code PE（変数エイリアス：<b:with> ）

例えば下の例では、記事ページ data:view.isPost の場合には新着順、それ以外（固定ページ）の場合には投稿順にコメントを並べられます。

<b:with value='data:view.isPost ? true : false' var='order'>
  <b:loop reverse='data:order' values='data:post.comments' var='comment'>
    コメント表示ブロック
  </b:loop>
</b:with>

コメント欄を掲示板のように利用する場合は、投稿順のままのほうが掲示板らしくて個人的にはいいと思います。

あとがき

Blogger のコメントを新着順に並び替える方法を紹介しました。

記事を書いていくなかで 3つ目の方法だけ紹介すればいいのではと思うことは多々ありましたが、せっかく思いついたので全部書きました。

コメントの表示順で悩んでいる方の参考になれば幸いです。

【Blogger】コメント欄のアバター画像の変更（JavaScript 不要）