【YouTube】高評価と低評価ボタンの色を青と赤に変えるCSS
通常、PCウェブサイト版「YouTube」の高評価・低評価ボタンは、ライトテーマだと黒色、ダークテーマだと白色になっています。
僕は今まで気にしたことなかったのですが、とある方のポストを見て「あぁ、言われてみれば少し見にくいかも…」と思いました。
CSSを利用することで好きな色に変更できます。
本記事のタイトルでは「青と赤にする」って書いていますが、好きな色にできます。自身の環境上だけの反映で他人のデバイスには一切影響しません。
拡張機能を導入できるPCブラウザ向けです。スマホやタブレットのアプリ版ではできません。
前提
「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。
https://www.naporitansushi.com/stylebot/高評価と低評価ボタンの色を変えるCSS
スタイルシートを開く
「YouTube」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。
もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
以下のコードを書き込みます。
/*高評価ボタンの色（2025年09月22日修正）*/
#actions button[aria-label*="高く評価"] path {
stroke: #5682E9 !important;
fill: #5682E9 !important;
}
/*低評価ボタンの色（2025年09月22日修正）*/
#actions button[aria-label*="低く評価"] path {
fill: #e53e3e !important;
}それぞれの「stroke」、「fill」で色を調整できます。
上記CSSだと高評価を青、低評価を赤にするという意味です。以前はどうでしたっけ…。もしかして逆だったかもです。逆にしたい方はコードを入れ替えます。
HTMLカラーコードで指定できます。詳しくはこちらの記事を参考にしてみてください。
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
書き込めたら右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
色が変わったか確認する
適当に動画を開きます。高評価と低評価の色が変わります。
ボタンを押した時はボタンの中まで色が変化します。
2022年10月から高評価を押した時にアニメーションが再生されるようになりました。
アニメーション中の色は変えられませんでした。正確には変えられそうですが、めんどくさいのでやっていません。アニメーションが終わった後の中身の色は変えられます。
ライトモード・ダークモードどちらでも利用できます。
HTMLカラーコードで色を変えることで緑や黄色など好きな色にできます。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
2021年11月以降非表示になった低評価を表示する記事紹介
低評価数は2021年11月頃から非表示になりました。「Return YouTube Dislike」拡張機能を使うと低評価数を表示できます。
あくまで外部の拡張機能でなんとなーく表示しているだけなので、実際の数値とは多分かなり異なります。見たところで良いことはないと思うのであまりおすすめはしません。
共有、オフライン、クリップなどの各種ボタンを非表示にする記事紹介
「共有」、「オフライン」、「クリップ」などの各種ボタンはCSSを使うことで非表示にできます。高評価と低評価ボタンだけにすることが可能です。気になった方は下記記事を参考にしてみてください。
感想
以上、PCウェブサイト版「YouTube」の高評価と低評価ボタンを好きな色に変更するCSSでした。
好きな色にしてみてください。ふと思ったんですが、以前は色があったのですかね？もぅ忘れました。