【Stylebot】YouTubeの通知欄の横幅、高さを広げるCSS

この記事では、YouTubeの右上の通知ボタンをクリックした時の通知欄の横幅と高さを広げるCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

本記事で紹介するCSSを使えば、YouTubeの通知欄の横幅、高さを好きなように調整できます。デフォルトでは、下記画像のようになっています。人によっては、かなり狭いと感じるかもしれません。CSSを使うことで、自由自在に広げられます。

「YouTubeの通知欄を広くしたい!」という方、ぜひ試してみてください。いつでもオンオフできます。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
CSS
YouTubeにアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*右上の通知ボタンをクリックした時の通知欄の横幅*/
ytd-multi-page-menu-renderer[menu-style="multi-page-menu-style-type-notifications"] {
width: 800px !important; /*好きなサイズを入力*/
}
「width」が横幅という意味です。「800px」の数値を変更することで、好きなサイズにできます。もっと広げたい場合は、数値を大きくします。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:www.youtube.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。
YouTubeの通知欄を開きます。指定したサイズに広がります。広がらない場合は、一旦ページをリロードします。

実際に、オンオフしてみた比較GIF画像を貼っておきます。かなり見やすくなります。

上記CSSは、横幅のみです。高さも調整したい場合は、以下のようにします。「min-height」を付け足すということですね。
/*右上の通知ボタンをクリックした時の通知欄の横幅と高さ*/
ytd-multi-page-menu-renderer[menu-style="multi-page-menu-style-type-notifications"] {
width: 800px !important;
min-height: 700px !important;
}
通知欄が高くなります。

無効にしたい場合は、Stylebotの「www.youtube.com」をオフにします。
感想
以上、YouTubeの通知欄をCSSで広くする方法でした。
広くすると、見やすくなっていい感じです。僕の場合、高さの調整コードは使っていません。