当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

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

2022年8月22日YouTube

YouTubeのアイコン

この記事では、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」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

Stylusのポップアップ画面

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

/*高評価ボタンの色*/
#segmented-like-button path {
  stroke: #5682E9 !important;
}

/*高評価した後の中身の色*/
#segmented-like-button path[fill="rgb(255,255,255)"] {
  fill: #5682E9 !important;
}

/*低評価ボタンの色*/
#segmented-dislike-button path {
  color: #f00 !important;
}

書き込めたら、右上の「×」でスタイルシートを閉じます。

それぞれの「stroke」、「fill」、「color」で色を調整できます。上記CSSだと、高評価を青、低評価を赤にするという意味です。普通逆ですっけ?分かりません笑。逆にしたい方は、「#5682E9」と「#f00」を入れ替えます。

HTMLカラーコードで指定できます。カラーコードが分からないという方は、こちらのサイトが参考になると思います。

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

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

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

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

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

2022年10月から、高評価を押した時にアニメーションが再生されるようになりました。

2022年10月から実装された高評価のアニメーションGIF画像

アニメーション中の色は変えられませんでした。正確には変えられそうですが、めんどくさいのでやっていません。アニメーションが終わった後の中身の色は、「高評価した後の中身の色」で変えています。

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

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

緑や黄色など、好きな色にできます。

YouTubeの高評価と低評価のボタンの色を緑と黄色にした画像

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

感想

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

好きな色にしてみてください。ふと思ったんですが、以前は色があったのですかね?もぅ忘れました。

合わせて読みたい

「共有」、「オフライン」、「クリップ」などの各種ボタンは、CSSを使うことで削除できます。高評価と低評価ボタンだけにすることが可能です。気になった方は、下記記事を参考にしてみてください。

YouTubeの動画下にある余計なボタンを削除した比較画像

2022年8月22日YouTube