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

この記事では、YouTubeの通知欄をはじめとしたポップアップメニューをすりガラスにして、スタイリッシュなデザインにするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、YouTubeの通知欄、動画のアップロード、アプリ、プロフィールアイコンをクリックした時のポップアップメニューをすりガラス&角丸にできます。
すりガラスにすることで、背景が若干ぼけて、ガラスが浮いているような美しいデザインにできます。すりガラス具合、背景色、角丸具合は好きなように調整できます。
ダーク・ライトテーマどちらを使っていても、適用できます。
「YouTubeの通知欄をはじめとしたポップアップメニューをモダンなデザインにしたい!」という方、ぜひ試してみてください。

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

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
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を適用すると、いい感じにライトテーマに最適化されます。

感想
以上、YouTubeの通知欄、設定などのポップアップメニューをすりガラスにするCSSについてでした。
すりガラスにしすぎると、可読性が落ちるので、ちょーどいい値を探してみましょう。