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

YouTube

YouTubeのアイコン

この記事では、「YouTube」のライブチャットにある絵文字欄を高くするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を使います。

「YouTube」のライブチャットの絵文字欄を好きな高さに変更する前と後の比較画像1

本記事で紹介するCSSを使えば、「YouTube」のライブチャット絵文字欄(スタンプ)を拡張できます。広げることで、1ページに表示される数が増えて、スクロール量が減ります。

絵文字を頻繁に利用する方におすすめです。いつでも元に戻せます。

「Stylebot(スタイルボット)」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

「Stylebot」のインストール手順画像

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

ライブチャットの絵文字欄を拡張するCSS

YouTube」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*ライブチャット絵文字欄を拡張*/
yt-emoji-picker-renderer.yt-live-chat-message-input-renderer {
  height: 300px !important;
  max-height: 300px !important;
}

「height」と「max-height」の数値を調整することで、高さを変更できます。デフォルトでは、130px~220pxになっているので、上記コード(300px)を、そのままコピペするだけでも拡張されます。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:www.youtube.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

「YouTube」をリロードします。一旦リロードしないと反映されないと思います。チャット欄が解放されているライブ配信を開きます。導入前は、チャット欄の半分くらいのサイズでしたが、導入後は全体の80%ほどの高さになります。

「YouTube」のライブチャットの絵文字欄を好きな高さに変更する前と後の比較画像2

数行しか表示されていなかった絵文字が、5~6行になって、スクロール量が減ります。

一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、「YouTube(ユーチューブ)」のライブチャット内にある絵文字欄を、好きな高さに変更するCSSでした。

本記事は、読者の方から教えていただきました。僕は、ライブ配信をあまり見ませんが、便利だと思ったので、記事にさせていただきました。

YouTube