【YouTube】通知欄、設定ポップアップをすりガラスにするCSS
通常、PCウェブサイト版「YouTube」の右上にある通知ボタン（
）をクリックした時のメニューは、下記画像のように、不透明です。ダークモードの場合、濃い灰色の背景色になっています。
本記事で紹介するCSSを利用することで、通知欄、動画のアップロード、アプリ、プロフィールアイコンをクリックした時のポップアップメニュー等を、すりガラス＆角丸にできます。
すりガラスにすることで、背景が若干ぼけて、ガラスが浮いているようなデザインにできます。すりガラス具合、背景色、角丸具合は好きなように調整できます。
見た目が変わるだけで機能性の変化はありません。不透明よりも、文字の視認性は悪くなるので、好みかなと思います。ダークとライトテーマのどちらを利用していても適用できます。
「YouTubeの通知欄などのポップアップメニューを、モダンなデザインにしたい！」という方、参考にしてみてください。本記事は、拡張機能を導入できるPCブラウザ向けです。スマホやタブレットのアプリ版ではできません。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/CSS
「www.youtube.com」スタイルシートにCSSを書き込む
「YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*通知欄などのポップアップメニュー*/
.style-scope.ytd-popup-container {
background-color: rgba(32, 32, 32, 0.2) !important;
backdrop-filter: blur(10px) !important;
border-radius: 15px !important;
overflow: hidden !important;
}
/*通知欄のヘッダー*/
ytd-simple-menu-header-renderer,
ytd-active-account-header-renderer {
background-color: transparent !important;
}「background-color」が背景色です。好きな色に変更できます。4番目の「0.2」という数字で、透明度を調整できます。「0」が完全透明、「1」が不透明になります。上記CSSは、ダークテーマ用です。ライトテーマの場合は、こちらを参考にしてみてください。
「backdrop-filter」で、すりガラス具合を調整できます。もっと、すりガラスにしたい場合は、「10px」の数値を上げます。「border-radius」が、角丸具合です。もっと角丸にしたい場合は、「10px」の数値を上げます。
本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
【CSSの確認】通知ポップアップメニュー
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
「YouTube」にログインして、右上の通知ボタン（）をクリックします。アカウントメニューなどのポップアップでもOKです。すりガラスメニューになっています。背景がぼけて、若干透けて見えます。
既にポップアップメニューを開いていた場合は、ページをリロードしないと反映されないかもしれません。
【CSSの確認】アカウントメニュー
プロフィールアイコンをクリックした時のアカウントメニューにも適用されます。余談ですが、アカウントメニューから不要な項目を非表示にしたい場合、こちらを参考にしてみてください。
【CSSの確認】アプリのポップアップメニュー
アプリのポップアップメニューも、同様にすりガラスになります。
【CSSの確認】動画のアップロードメニュー
動画のアップロードボタンを押した時のメニューも一緒です。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
ライトテーマを利用している場合のCSS
上記CSSをライトテーマ利用時に適用すると、ポップアップメニューが黒くなり、テーマと合っていないと感じるかもしれません。
その場合は、「background-color」の背景色を変更します。サンプルのCSSを貼っておきます。背景色以外のCSSは同じです。
/*通知欄などのポップアップメニュー*/
.style-scope.ytd-popup-container {
background-color: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(10px) !important;
border-radius: 15px !important;
overflow: hidden !important;
}
/*通知欄のヘッダー*/
ytd-simple-menu-header-renderer,
ytd-active-account-header-renderer {
background-color: transparent !important;
}上記CSSを適用すると、いい感じにライトテーマに最適化されます。好みの色に調整してみてください。
通知欄の横幅・高さを調整するCSS
「YouTube」の通知欄ポップアップメニューの横幅・高さを調整するCSSを、下記記事で紹介しています。気になった方は、参考にしてみてください。本記事のCSSと併用することも可能です。
アカウントメニューから不要な項目を非表示にするCSS
右上のプロフィールアイコンをクリックした時のアカウントメニュー内にある「アカウントを切り替える」、「YouTube Studio」、「購入とメンバーシップ」、「YouTubeでのデータ」、「制限付きモード」、2023年10月から追加された「Googleアカウント」などを非表示にするCSS記事も書いています。
メニューから不要な項目を消して、スッキリした見た目にしたい方は、以下の記事を参考にしてみてください。
チャンネルページのヘッダーを、すりガラス&コンパクトにするCSS
チャンネルページのヘッダーを、すりガラス＆コンパクトにして、スタイリッシュにするCSS記事も書いています。詳しくは、下記記事を参考にしてみてください。
感想
以上、PCウェブサイト版「YouTube」の通知欄、アカウントメニューなどのポップアップメニューを、すりガラスにして、スタイリッシュなデザインにするCSSでした。
すりガラスにしすぎると、可読性が落ちるので、ちょーどいい値を探すといいかなと思います。