【YouTube】チャンネル登録ボタンを以前の赤色に戻すCSS

YouTube

YouTubeのアイコン

この記事では、YouTube(PC版)の「チャンネル登録ボタン」を、2022年10月以前の赤色に戻すCSSについて書きます。

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

【YouTube】チャンネル登録ボタンを以前の赤色に戻すCSS

本記事で紹介するCSSを使えば、YouTubeの「チャンネル登録ボタン」を、好きな色にできます。

2022年10月以降、YouTubeのチャンネル登録ボタンが、白色になってしまいました。好きな人にはいいかもしれませんが、僕は以前の赤色がいいなと思いました。

2022年10月以降に変わったYouTubeのチャンネル登録ボタンの画像(白色)

他にも、ところどころ角丸デザインになったりと、2022年10月は、ごろっとYouTubeのデザインが変わりました。

同じように、「前のチャンネル登録ボタンのほうが見やすくてよかった!」という方、参考にしてみてください。以前の赤色に戻すことも可能ですし、全く別の色にすることも可能です。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

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

チャンネル登録ボタンを別の色にするCSS

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

Stylebotのスクリーンショット1

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

/*チャンネル登録ボタンを赤色に戻す*/
button[aria-label$="をチャンネル登録"] {
  color: #fff !important;
  background-color: #c00 !important;
}

/*チャンネル登録ボタンを赤色に戻す(ホバー時)*/
button[aria-label$="をチャンネル登録"]:hover {
  background-color: #c00 !important;
}

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

Stylebotのスクリーンショット2

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

これで、「チャンネル登録」ボタンが以前の赤色になります。過去のYouTubeから引っ張ってきたので、まんま2022年10月以前に使われていた赤色だと思います。HTMLカラーコードは「#c00」です。

YouTubeのチャンネル登録ボタンを以前の赤色に戻した画像(ダークモード)

以前のコード自体も残っていました。「–yt-spec-brand-button-background」というカスタムプロパティに登録されています。

/*チャンネル登録ボタンを赤色に戻す*/
button[aria-label$="をチャンネル登録"] {
  color: #fff;
  background-color: var(--yt-spec-brand-button-background);
}

よって、「background-color: #c00 !important;」といった形ではなく、上記のように変数を呼び出しても同じように赤色にできました。

まぁ、いつなくなるか分からないので、HTMLカラーコードで指定したほうがいいと思います。

ライトモードでも同様に変わります。

YouTubeのチャンネル登録ボタンを以前の赤色に戻した画像(ライトモード)

動画再生ページでも反映されます。

YouTubeのチャンネル登録ボタンを以前の赤色に戻した動画プレーヤー画面

登録すると、灰色になります。以前も同じ色でしたっけ?ここの「登録済み」の以前の色を忘れてしまいました💦。もし、こういう色だったよ~と分かる方いらっしゃいましたら、教えていただければなと思います。

M-1グランプリチャンネルをチャンネル登録した画像

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

別の色にしたい場合

「background-color: #c00 !important;」の「#c00」の部分を別のカラーコードにすることで、色を変えられます。

緑、青といったように自由に調整できます。HTMLカラーコードは、こちらのサイトで調べられます。

YouTubeのチャンネル登録ボタンを暗めの緑にした画像

角丸具合の調整

以下のように、コードの間に「border-radius」を付け足すことで、角丸具合を調整できます。数字を大きくすれば、より角丸になります。小さくすればカクカクに近づきます。

/*チャンネル登録ボタンを赤色に戻す*/
button[aria-label$="をチャンネル登録"] {
  color: #fff;
  background-color: #c00 !important;
  border-radius: 8px;
}
YouTubeのチャンネル登録ボタンをカクカクに近づけた画像

感想

以上、YouTubeの「チャンネル登録」ボタンを、赤色や緑色といった好きな色に変更する方法でした。

時代がたてば、当たり前ですが、デザインも色々変わっていくんですねぇ…。追い付くのに大変ですね。

Posted by ナポリタン寿司