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

2022年5月23日2022年5月28日Stylebot&Stylus

この記事では、YouTubeの右上の通知ボタンをクリックした時の通知欄の横幅と高さを広げるCSSについて書きます。

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

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

「YouTubeの通知欄を広くしたい！」という方、ぜひ試してみてください。いつでもオンオフできます。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

こちらの記事もおすすめ！

通知欄やプロフィールアイコンをクリックした時のポップアップメニューを、すりガラスレイアウトにすることも可能です。詳しくは、下記記事を参考にしてみてください。ガラスのタイルが浮いているようで美しいです。

YouTubeの通知、設定ポップアップをすりガラスにするCSS

この記事では、YouTubeの通知欄をはじめとしたポップアップメニューをすりガラスにして、スタイリッシ ...

https://www.naporitansushi.com/youtube-popup-frosted-glass/

1. インストール方法
2. CSS
3. 感想

インストール方法

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

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

Stylebot - Chrome Web Store

Change the appearance of the web instantly

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

Firefox・Edgeをご利用の場合

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

「Chromeに追加」でインストールできます。

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

【Stylebot】サイトにCSSを適用できるChrome拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

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;
}

通知欄が高くなります。