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

2022年5月23日Stylebot&Stylus

Stylebotのアイコン

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

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

YouTube内のポップアップメニューを、CSSですりガラスにした画像

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

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

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

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

通常の通知欄の外観(すりガラスじゃない)

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

合わせて読みたい

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

YouTubeの通知欄をCSSで、広げてみた比較GIF画像

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

CSS

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

Stylebot 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です。右上の「×」でスタイルシートを閉じます。

Stylebot 通知欄などのポップアップメニューのカスタマイズコードを書き込んだ画面

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

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

CSS適用後の画像① 背景がぼかされて、すりガラスデザインになる

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

CSS適用後の画像② プロフィールアイコンのメニュー

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

CSS適用後の画像③ アプリ

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

CSS適用後の画像④ 動画のアップロード

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

ライトテーマ

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

上記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に最適化されて、通知欄がすりガラスになる

感想

以上、YouTubeの通知欄、設定などのポップアップメニューをすりガラスにするCSSについてでした。

すりガラスにしすぎると、可読性が落ちるので、ちょーどいい値を探してみましょう。

こちらの記事もおすすめ

YouTubeのチャンネルページのヘッダーを、すりガラス&コンパクトにしてスタイリッシュにするCSSも紹介しています。詳しくは、下記記事を参考にしてみてください。

YouTubeのチャンネルページのヘッダーを、CSSでスタイリッシュにした画像

Posted by ナポリタン寿司