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

2022年11月3日YouTube

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

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

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

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

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

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

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

合わせて読みたい

YouTubeのデザインを変える系の記事は、他にも書いているので、気になった方は参考にしてみてください。

1. インストール方法
2. チャンネル登録ボタンを別の色にするCSS
- 2.1. 別の色にしたい場合
- 2.2. 角丸具合の調整
3. 感想

インストール方法

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

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

Stylebot

ウェブの外観を瞬時に変更

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

Firefox・Edgeをご利用の場合

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

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

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

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の「チャンネル登録」ボタンを、赤色や緑色といった好きな色に変更する方法でした。

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

2022年11月3日YouTube