【YouTube】ライブ動画のチャット欄の高さを広げるCSS
本記事で使うCSSを使うことで、任意の高さにYouTubeライブチャット欄を拡張できます。
読者の方から「広げることはできませんか？」と質問をいただいたので、記事にします。任意の高さに変更できます。「4Kモニターを使っていて、チャット欄が狭くて気になる！」という方、参考にしてみてください。
広げることで、目に入るコメントの数が増えます。モニターのスペースを有効活用できます。
おまけで、「トップチャット」という文字がある場所の高さも変更します。いつでもオンオフできます。
「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/チャット欄の高さを広げるCSS
「YouTube」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*チャット欄を広げる*/
ytd-live-chat-frame#chat {
height: 900px !important;
}
/*チャット欄ヘッダーの「トップチャット」の高さ*/
.style-scope.yt-live-chat-renderer:has([aria-label="チャットのモードの選択"]) {
height: 25px !important;
}「height」が高さです。ここの数値を調整することで、任意の高さに変更できます。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、チャット欄が指定した高さになります。関連動画がその分、下にずれます。自身のモニターに合うサイズにしてみましょう。
おまけで、「トップチャット」の部分も高さを変更しています。数値を小さくしすぎると、文字がコンテンツからはみ出るので注意です。
一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、「YouTube」のライブチャット欄の高さを変更するCSSでした。
絵文字欄を拡張するCSSも紹介しています。気になった方は参考にしてみてください。
