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

2022年5月23日Stylebot&Stylus

Stylebotのアイコン

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

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

YouTubeの通知欄をCSSを使って、広げてみた画像

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

通常のYouTubeの通知欄

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

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

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

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

YouTubeの通知欄をすりガラスデザインにした画像

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

CSS

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

Stylebot Stylebotを開く

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

/*右上の通知ボタンをクリックした時の通知欄の横幅*/
ytd-multi-page-menu-renderer[menu-style="multi-page-menu-style-type-notifications"] {
  width: 800px !important; /*好きなサイズを入力*/
}

「width」が横幅という意味です。「800px」の数値を変更することで、好きなサイズにできます。もっと広げたい場合は、数値を大きくします。

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

Stylebot YouTube通知欄を広げるCSSを書き込んだ画面

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

YouTubeの通知欄を開きます。指定したサイズに広がります。広がらない場合は、一旦ページをリロードします。

YouTubeの通知欄の横幅を、CSSで広くした画像

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

通知欄を広げるCSSのオンオフGIF画像

上記CSSは、横幅のみです。高さも調整したい場合は、以下のようにします。「min-height」を付け足すということですね。

/*右上の通知ボタンをクリックした時の通知欄の横幅と高さ*/
ytd-multi-page-menu-renderer[menu-style="multi-page-menu-style-type-notifications"] {
  width: 800px !important;
  min-height: 700px !important;
}

通知欄が高くなります。

YouTubeの通知欄の高さを、CSSで広くした画像

無効にしたい場合は、Stylebotの「www.youtube.com」をオフにします。

感想

以上、YouTubeの通知欄をCSSで広くする方法でした。

広くすると、見やすくなっていい感じです。僕の場合、高さの調整コードは使っていません。

Posted by ナポリタン寿司