【YouTube】トップページの動画ホバー時に背景色を固定・変えないようにするCSS

2025年3月16日YouTube

この記事では、PCウェブサイト版「YouTube」のトップページにある動画一覧をマウスホバーした時、背景色（選択色）が動画によってころころ変わってしまうのを固定するCSS、そもそも背景色をつけないCSSを書きます。

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

【YouTube】トップページの動画ホバー時に背景色を固定・変えないようにするCSS

僕の環境で2025年3月中旬あたりから、PCウェブサイト版「YouTube」のトップページにある動画一覧にマウスを乗せると角丸の背景色がつくようになりました。

固定色ではなく動画のシネマティックライティングやプログレスバーと同じで動画ごとで色が変化しています。

2025年3月頃からPC版「YouTube」のトップページでマウスホバーしたとき背景色がつくようになったGIF画像

【YouTube】シークバーの赤紫グラデーションを元に戻すCSS

この記事では、PCウェブサイト版「YouTube」で2024年10月から動画プレーヤー内のプログレスバー（シー ...

https://www.naporitansushi.com/youtube-seek-bar-gradient-del...

【YouTube】動画の周りにあるグラデーションを無効化する方法

この記事では、「YouTube」で動画を再生すると、周りにぼかしがかかったグラデーションが表示される機 ...

https://www.naporitansushi.com/youtube-ambient-mode-nullify/

僕は不要だと思いました。鬱陶しいだけです。カラフルだのグラデーションだの動画ごとで動的に変わるだの余計なお世話です。

まだ実装されたばかりなので今後の仕様変更でどうなるか分かりませんが、それまでのしのぎでCSSを使って固定の色にしてみます。というかそもそも背景色がつかないようにします。

本記事はCSSの拡張機能を導入できるPCブラウザ専用です。CSSはあくまで自身の環境上だけの反映なので他人や別デバイスには一切影響しません。

1. インストール方法
2. YouTubeの動画一覧ページでマウスホバーしたときの背景色を変えるCSS
3. 感想

インストール方法

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

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot - Chrome Web Store

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/

YouTubeの動画一覧ページでマウスホバーしたときの背景色を変えるCSS

スタイルシートを開く

「YouTube」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のCSSを書き込みます。

CSS

/*トップページの動画をマウスホバーしたときの背景色を固定する*/
ytd-rich-item-renderer.ytd-rich-item-renderer-highlight {
    background-color: var(--yt-spec-outline) !important;
    box-shadow: 0 0 0 10px var(--yt-spec-outline) !important;
}

もし、そもそも背景色がいらない！って場合は上記ではなく以下のCSSにします。

CSS

/*トップページの動画をマウスホバーしたとき背景色を変えない*/
ytd-rich-item-renderer.style-scope.ytd-rich-grid-renderer {
    background-color:transparent !important;
    box-shadow: none !important;
}