【YouTube】ライブチャットの絵文字欄の高さを広げるCSS

この記事では、「YouTube」のライブチャットにある絵文字欄を高くするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を使います。
本記事で紹介するCSSを使えば、「YouTube」のライブチャット絵文字欄(スタンプ)を拡張できます。広げることで、1ページに表示される数が増えて、スクロール量が減ります。
絵文字を頻繁に利用する方におすすめです。いつでも元に戻せます。
「Stylebot(スタイルボット)」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
ライブチャットの絵文字欄を拡張する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でした。
本記事は、読者の方から教えていただきました。僕は、ライブ配信をあまり見ませんが、便利だと思ったので、記事にさせていただきました。