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

2022年5月23日2022年11月6日YouTube

この記事では、YouTubeの通知欄をはじめとしたポップアップメニューをすりガラスにして、スタイリッシュなデザインにするCSSについて書きます。

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

本記事で紹介するCSSを使えば、YouTubeの通知欄、動画のアップロード、アプリ、プロフィールアイコンをクリックした時のポップアップメニューをすりガラス＆角丸にできます。

すりガラスにすることで、背景が若干ぼけて、ガラスが浮いているような美しいデザインにできます。すりガラス具合、背景色、角丸具合は好きなように調整できます。

ダーク・ライトテーマどちらを使っていても、適用できます。

「YouTubeの通知欄をはじめとしたポップアップメニューをモダンなデザインにしたい！」という方、ぜひ試してみてください。

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

合わせて読みたい

YouTubeの通知欄の横幅・高さを調整できるCSSを下記記事で紹介しています。気になった方は、参考にしてみてください。本記事のCSSと併用することも可能です。

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

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

https://www.naporitansushi.com/youtube-notification-column-c...

1. インストール方法
2. CSS
- 2.1. ライトテーマ
3. 感想

インストール方法

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

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

Stylebot - Chrome ウェブストア

ウェブの外観を瞬時に変更

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

Firefox・Edgeをご利用の場合

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

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

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

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

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

CSS

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

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

/*通知欄などのポップアップメニュー*/
.style-scope.ytd-popup-container {
  background-color: rgba(32, 32, 32, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  overflow: hidden;
}

/*通知欄のヘッダー*/
ytd-simple-menu-header-renderer,
ytd-active-account-header-renderer {
  background-color: transparent;
}

「background-color」が背景色です。好きな色に変更できます。4番目の「0.2」という数字で透明度を調整できます。「0」が完全透明、「1」が不透明になっています。上記CSSは、ダークテーマ用です。ライトテーマの場合は、こちらを参考にしてみてください。

「backdrop-filter」ですりガラス具合を調整できます。もっと、すりガラスにしたい場合は、「10px」の数値を上げます。「border-radius」が、角丸具合です。もっと角丸にしたい場合は、「10px」の数値を上げます。

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

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

YouTubeの通知欄などのポップアップメニューを開きます。無事にすりガラスメニューになっています。背景がぼけて、若干透けて見えます。

プロフィールアイコンをクリックした時のポップアップメニューにも適用されます。

アプリのポップアップメニューも同様にすりガラスになります。

動画のアップロードボタンを押した時のメニューも一緒です。

無効にしたい場合は、オフにします。

ライトテーマ

上記CSSをライトテーマ利用時に適用すると、ポップアップメニューの項目部分が黒くなり、少し違和感です。

その場合は、「background-color」の背景色を変更してみましょう。

サンプルを貼っておきます。

/*通知欄などのポップアップメニュー*/
.style-scope.ytd-popup-container {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  overflow: hidden;
}

/*通知欄のヘッダー*/
ytd-simple-menu-header-renderer,
ytd-active-account-header-renderer {
  background-color: transparent;
}

上記CSSを適用すると、いい感じにライトテーマに最適化されます。