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

2022年5月23日2023年11月18日YouTube

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

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。

通常、PCウェブサイト版「YouTube」の右上にある通知ボタン（）をクリックした時のメニューは、下記画像のように、不透明です。ダークモードの場合、濃い灰色の背景色になっています。

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

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

見た目が変わるだけで機能性の変化はありません。不透明よりも、文字の視認性は悪くなるので、好みかなと思います。ダークとライトテーマのどちらを利用していても適用できます。

「YouTubeの通知欄などのポップアップメニューを、モダンなデザインにしたい！」という方、参考にしてみてください。本記事は、拡張機能を導入できるPCブラウザ向けです。スマホやタブレットのアプリ版ではできません。

1. インストール方法
2. CSS
3. ライトテーマを利用している場合のCSS
4. 通知欄の横幅・高さを調整するCSS
5. アカウントメニューから不要な項目を非表示にするCSS
6. チャンネルページのヘッダーを、すりガラス&コンパクトにするCSS
7. 感想

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「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と併用することも可能です。

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

この記事では、PCウェブサイト版「YouTube」の右上の通知ボタンを、クリックした時の通知欄の横幅と高 ...

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

アカウントメニューから不要な項目を非表示にするCSS

右上のプロフィールアイコンをクリックした時のアカウントメニュー内にある「アカウントを切り替える」、「YouTube Studio」、「購入とメンバーシップ」、「YouTubeでのデータ」、「制限付きモード」、2023年10月から追加された「Googleアカウント」などを非表示にするCSS記事も書いています。

メニューから不要な項目を消して、スッキリした見た目にしたい方は、以下の記事を参考にしてみてください。