別ブログでコメントの表示方法などに不満を感じてアレンジしたため記載。
「コメントの場所」は「埋め込み」で、他の形式の場合機能するかは不明です。
また、jqueryを使用するので、導入がまだの方は以下のコードを<head> ～ </head>の中に記述してください。
jquery
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>やったことを簡単にまとめると、コメントはlist形式で出力されているため、flexの下から順に表示させるcolumn-reverseを用いてコメントを新しい順番で表示させる。
また、「コメントを投稿」の表示位置をコメント部分の一番上に移動させました。
Bloggerのコメントを新しい順番で表示させる
Bloggerの場合、コメント部分のソースコードは以下のようになっています。<ol id="top-ra">
<li class="comment" id="xxxxx"></li>
<li class="comment" id="xxxxx"></li>
<li class="comment" id="xxxxx"></li>
</ol>CSSの方でこのtop-raにflexのcolumn-reverseを付与すれば、下から順に表示されるのでコメントが新しい順番で表示されるようになります。
こんな感じ
#top-ra { display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse !important;
flex-direction: column-reverse !important;}デフォルトの古い順番で表示させる場合はこちら
#top-ra { display: -webkit-flex;
display: flex;
-webkit-flex-direction: column !important;
flex-direction: column !important;}Bloggerの「コメントを投稿」の表示位置を移動する
「コメントを投稿」部分はid="top-ce"が付与されているので、これをjqueryを用いて移動させます。自分はコメントの始まるid="top-ra"の前に移動させたので、こういったコードを追加しました。
<script>
$(function() {
$("#top-ce").insertBefore("#top-ra");
});
</script>以上です。
あまり使用頻度は高くないかもしれませんが、参考になる方がいれば嬉しいです。