[カスタムCSS] コメントを逆の順番で表示 (ツイキャス/YouTube)

主にOBSの設定についてやツイキャス用のカスタムCSSを公開している別サイト、『kiiのメモ帳』で、配信のコメント欄のコメントを逆の順序で表示できないかという質問がありました。

ツイキャスだと新しく投稿されたコメントはコメント欄の一番上に表示されて、新しいコメントから順に上から下に表示される仕様になっています。 コメントを逆順で表示した場合、新しくコメントが頻繫に追加されてコメント欄が動いている場合はまだ良いのですが、動いていない場合だと上下にあるコメントのどちらが新しいのか紛らわしくなってしまいます。

そういう理由で『kiiのメモ帳』で公開しているカスタムCSSにはコメントの表示の順番を逆にするオプションは付けていません。

でも、これはあくまでも個人的なこだわりで、逆の順番で表示する事で個性を出したいと思う人もいるかもしれないので、上記の質問の解答をここに記事としてメモしておきます。

[目次]

• ツイキャスのコメントオーバーレイ
• YouTubeのコメントオーバーレイも逆の順番で

ツイキャスのコメントオーバーレイ

ツイキャスのコメント欄の場合は、「tw-comment-list-view__scroller」クラスのDIVタグの下にある無名のDIVタグの中にコメントが並ぶレイアウトになっています。 (👉「ツイキャスのコメント欄の構造 (メモ帳)」)

なので、既存のカスタムCSSの最後に次のCSSを加えるとコメントが逆の順番で (新しいコメントが一番下に) 表示される様になるはずです。

.tw-comment-list-view__scroller > div {
  display: flex;
  flex-direction: column-reverse;

  height: 100%; /* 最新コメントがはみ出ない様に必要 */
}

.tw-comment-list-view__scroller {
  transform: none !important; /* 下へスライドするアニメーション効果を無効化 */
}

/*
  Generated by コメントを逆の順番で表示キャスコメカスタムCSS (ツイキャス用)
  url: https://kiimemo.blogspot.com/2023/01/overlay-custome-css-reversed.html
*/

/* 縦スライドアニメーション */
@keyframes fadein-anim {
  0%   {max-height: 0;}
  100% {max-height: 3em;}
}

.tw-comment-item:first-child {
  animation-name: fadein-anim;
  animation-fill-mode: both;
  animation-duration: 0.5s; /* アニメーションの継続時間 */
  animation-iteration-count: 1;
}

#キャスコメカスタム

[12/Mar/2023 更新]

以前はコメントが表示画面いっぱいに表示されるとコメントが動かなくなってしまいましたが、上のCSSに「height: 100%;」を加えて新しいコメントがいつも画面の一番下の位置に表示される様に修正しました。

又、新しいコメントが追加される際に.tw-comment-list-view__scrollerクラスのDIVに上から下にスライドするエフェクト処理が加えられるのでそれを「!important」付きで無効化しています。

代わりに、「fadein-anim」という名前のアニメーションを最新のコメント(tw-comment-itemクラス)に加える事で、コメントが下から上にスライドして現れるエフェクトを表現しています。

YouTubeのコメントオーバーレイも逆の順番で

#items {
  display: flex;
  flex-direction: column-reverse;

  transform: none !important; /* 上へスライドするアニメーション効果を無効化 */

  position: relative !important; /* 最新コメントがはみ出ない様に必要 */
}

#item-offset { /* 最新コメントがはみ出ない様に必要 */
  min-height: unset !important;
  height: 100% !important;
}

/*
  Generated by コメントを逆の順番で表示つべコメカスタムCSS (YouTube用)
  url: https://kiimemo.blogspot.com/2023/01/overlay-custome-css-reversed.html
*/

/* 縦スライドアニメーション */
@keyframes fadein-anim {
  0%   {max-height: 0;}
  100% {max-height: 3em;}
}

yt-live-chat-text-message-renderer:last-child {
  animation-name: fadein-anim;
  animation-fill-mode: both;
  animation-duration: 0.5s; /* アニメーションの継続時間 */
  animation-iteration-count: 1;
}

#つべコメカスタム

YouTubeのコメント欄に関してはそこまで詳しくないのですが、YouTubeのコメント欄用のカスタムCSSも作ってみました。

既存のカスタムCSSの最後に次のCSSを加えるとコメントが逆の順番で (新しいコメントが一番上に) 表示される様になるはずですが、不都合がある場合はコメントで教えていただけると幸いです。

Twitchのコメントオーバーレイ