【YouTube】高評価と低評価ボタンの色を青と赤に変えるCSS

2022年8月22日Stylebot&Stylus

Stylebotのアイコン

この記事では、YouTubeの高評価と低評価のボタンの色を、好きな色に変更するCSSについて書きます。

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

【YouTube】高評価と低評価ボタンの色を青と赤に変えるCSS

本記事で紹介するCSSを使えば、YouTubeの動画下にある高評価と低評価のボタン色を、好きな色に変更できます。

通常、ライトテーマの場合は黒色、ダークテーマの場合は白色になっています。僕は、今まで気にしたことなかったのですが、とある方のツイートを見て、「あぁ、言われてみれば少し見にくいかも…」と思いました。

YouTubeの高評価と低評価のボタンの画像

そこで、好きな色に変更してみたいと思います。タイトルでは青と赤にするって言っていますが、好きな色にできます。

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

YouTubeの低評価について

YouTubeの低評価数は、2021年11月頃から非表示になりました。低評価数を表示したい場合は、「Return YouTube Dislike」という拡張機能を導入してみましょう。

本記事の色を変えるCSSは、上記拡張機能を導入していなくても利用できます。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

CSS

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

Stylusのポップアップ画面

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*高評価のボタン*/
#menu #button[aria-label*="この動画を高く評価しました"] path,
#menu #button[aria-label*="高く評価"] path {
  fill: #f00;
}

/*低評価のボタン*/
#menu #button[aria-label*="この動画を低く評価する"] path {
  fill: #5682E9;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

YouTubeの高評価と低評価のボタンの色を変更するコードを書き込んだ画面

「fill: #5682E9;」と「fill: #f00;」の部分で、色を調整できます。上記CSSだと、高評価を青、低評価を赤にするという意味です。HTMLカラーコードで指定しましょう。記述方法は、各自で調べてみてください。

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

これで、色が変わります。

YouTubeの高評価と低評価のボタンの色を青と赤に変更した画像1

ボタンを押した時は、ボタンの中まで色が変化します。見やすいです。

YouTubeの高評価と低評価のボタンの色を青と赤に変更した画像2

ライトモード・ダークモードどちらでも利用できます。

YouTubeの高評価と低評価のボタンの色を青と赤に変更した画像3

一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、YouTubeの高評価と低評価のボタンの色を変更するCSSでした。

好きな色にしてみてください。ふと思ったんですが、以前は色があったのですかね?もぅ忘れました。青をグッド、赤をバッドにしたんですが、普通逆ですっけ?分からん…。逆にしたい方は、逆にしましょう。

Posted by ナポリタン寿司