【YouTube】チャンネル登録ボタンを以前の赤色に戻すCSS
この記事では、YouTube（PC版）の「チャンネル登録ボタン」を、2022年10月以前の赤色に戻すCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、YouTubeの「チャンネル登録ボタン」を、好きな色にできます。
2022年10月以降、YouTubeのチャンネル登録ボタンが、白色になってしまいました。好きな人にはいいかもしれませんが、僕は以前の赤色がいいなと思いました。
他にも、ところどころ角丸デザインになったりと、2022年10月は、ごろっとYouTubeのデザインが変わりました。
同じように、「前のチャンネル登録ボタンのほうが見やすくてよかった！」という方、参考にしてみてください。以前の赤色に戻すことも可能ですし、全く別の色にすることも可能です。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
YouTubeのデザインを変える系の記事は、他にも書いているので、気になった方は参考にしてみてください。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/チャンネル登録ボタンを別の色にするCSS
「YouTube」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*チャンネル登録ボタンを赤色に戻す*/
button[aria-label$="をチャンネル登録"] {
color: #fff !important;
background-color: #c00 !important;
}
/*チャンネル登録ボタンを赤色に戻す（ホバー時）*/
button[aria-label$="をチャンネル登録"]:hover {
background-color: #c00 !important;
}下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.youtube.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、「チャンネル登録」ボタンが以前の赤色になります。過去のYouTubeから引っ張ってきたので、まんま2022年10月以前に使われていた赤色だと思います。HTMLカラーコードは「#c00」です。
以前のコード自体も残っていました。「–yt-spec-brand-button-background」というカスタムプロパティに登録されています。
/*チャンネル登録ボタンを赤色に戻す*/
button[aria-label$="をチャンネル登録"] {
color: #fff;
background-color: var(--yt-spec-brand-button-background);
}よって、「background-color: #c00 !important;」といった形ではなく、上記のように変数を呼び出しても同じように赤色にできました。
まぁ、いつなくなるか分からないので、HTMLカラーコードで指定したほうがいいと思います。
ライトモードでも同様に変わります。
動画再生ページでも反映されます。
登録すると、灰色になります。以前も同じ色でしたっけ？ここの「登録済み」の以前の色を忘れてしまいました💦。もし、こういう色だったよ～と分かる方いらっしゃいましたら、教えていただければなと思います。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.youtube.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
別の色にしたい場合
「background-color: #c00 !important;」の「#c00」の部分を別のカラーコードにすることで、色を変えられます。
緑、青といったように自由に調整できます。HTMLカラーコードは、こちらのサイトで調べられます。
角丸具合の調整
以下のように、コードの間に「border-radius」を付け足すことで、角丸具合を調整できます。数字を大きくすれば、より角丸になります。小さくすればカクカクに近づきます。
/*チャンネル登録ボタンを赤色に戻す*/
button[aria-label$="をチャンネル登録"] {
color: #fff;
background-color: #c00 !important;
border-radius: 8px;
}
感想
以上、YouTubeの「チャンネル登録」ボタンを、赤色や緑色といった好きな色に変更する方法でした。
時代がたてば、当たり前ですが、デザインも色々変わっていくんですねぇ…。追い付くのに大変ですね。