【YouTube】高評価と低評価ボタンの色を青と赤に変えるCSS
この記事では、YouTubeの高評価と低評価のボタンの色を、好きな色に変更するCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、YouTubeの動画下にある高評価と低評価のボタン色を、好きな色に変更できます。
通常、ライトテーマの場合は黒色、ダークテーマの場合は白色になっています。僕は、今まで気にしたことなかったのですが、とある方のツイートを見て、「あぁ、言われてみれば少し見にくいかも…」と思いました。
そこで、好きな色に変更してみたいと思います。本記事のタイトルでは「青と赤にする」って言っていますが、好きな色にできます。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
YouTubeの低評価数は、2021年11月頃から非表示になりました。低評価数を表示したい場合は、「Return YouTube Dislike」という拡張機能を導入してみましょう。見たところで良いことはないと思うので、あまりおすすめはしません。
https://www.naporitansushi.com/return-youtube-dislike/本記事の色を変えるCSSは、上記拡張機能を導入していなくても利用できます。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
高評価と低評価ボタンの色を変えるCSS
「YouTube」にアクセスします。右上の拡張機能アイコン→「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）がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、色が変わります。
ボタンを押した時は、ボタンの中まで色が変化します。見やすいです。
2022年10月から、高評価を押した時にアニメーションが再生されるようになりました。
アニメーション中の色は変えられませんでした。正確には変えられそうですが、めんどくさいのでやっていません。アニメーションが終わった後の中身の色は、「高評価した後の中身の色」で変えています。
ライトモード・ダークモードどちらでも利用できます。
緑や黄色など、好きな色にできます。
一時的に無効化したい場合は、Stylebot→「www.youtube.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、YouTubeの高評価と低評価のボタンの色を変更するCSSでした。
好きな色にしてみてください。ふと思ったんですが、以前は色があったのですかね？もぅ忘れました。
「共有」、「オフライン」、「クリップ」などの各種ボタンは、CSSを使うことで削除できます。高評価と低評価ボタンだけにすることが可能です。気になった方は、下記記事を参考にしてみてください。
