【YouTube】ライブチャットの絵文字欄の高さを広げるCSS
この記事では、「YouTube」のライブチャットにある絵文字欄を高くするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使います。
本記事で紹介するCSSを使えば、「YouTube」のライブチャット絵文字欄（スタンプ）を拡張できます。広げることで、1ページに表示される数が増えて、スクロール量が減ります。
絵文字を頻繁に利用する方におすすめです。いつでも元に戻せます。
「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を開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*ライブチャット絵文字欄を拡張*/
yt-emoji-picker-renderer.yt-live-chat-message-input-renderer {
height: 300px !important;
max-height: 300px !important;
}「height」と「max-height」の数値を調整することで、高さを変更できます。デフォルトでは、130px～220pxになっているので、上記コード（300px）を、そのままコピペするだけでも拡張されます。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
「YouTube」をリロードします。一旦リロードしないと反映されないと思います。チャット欄が解放されているライブ配信を開きます。導入前は、チャット欄の半分くらいのサイズでしたが、導入後は全体の80%ほどの高さになります。
数行しか表示されていなかった絵文字が、5～6行になって、スクロール量が減ります。
一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、「YouTube（ユーチューブ）」のライブチャット内にある絵文字欄を、好きな高さに変更するCSSでした。
本記事は、読者の方から教えていただきました。僕は、ライブ配信をあまり見ませんが、便利だと思ったので、記事にさせていただきました。