【Twitch】右上のビッツの購入、Prime特典を非表示にするコード
この記事では、Twitchの右上にある「ビッツの購入」、「Prime特典」ボタンを非表示にする方法（CSS）について書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、Twitchの右上にある不要な項目を削除できます。CSSで非表示にするだけなので、いつでも元に戻せます。初心者でもできます。
僕は、とある方のTwitch配信を見るのですが、右上の「ビッツを購入」ボタンが、鬱陶しいです。僕は、無料で見る派なので、有料コンテンツ？のビッツは不要です。うっかり押し間違えそうなので、いっそのこと消すことにしました。
同じように、Twitchにお金はかけないという方、ぜひ参考にしてみてください。おまけでチャット内のビッツの購入ボタンを非表示にするコードも紹介しています。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
CSS
Twitchにアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*右上の「ビッツの購入」ボタン非表示*/
button[data-a-target="top-nav-get-bits-button"] {
display: none;
}
/*右上の「Prime特典」ボタン非表示*/
.top-nav__prime {
display: none;
}右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：twitch.tv）がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、右上の「ビッツの購入」、「Prime特典」のボタンが消えます。
一時的に無効化したい場合は、Stylebot→「twitch.tv」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
【おまけ】チャット内のビッツの購入を非表示
配信者によっては、チャット内にも「ビッツの購入」ボタンが表示されます。
こちらも非表示にしたい場合は、追加で以下のコードを書き込みます。
/*チャットの入力欄内の「ビッツ」ボタン非表示*/
button[aria-label="ビッツ"] {
display: none;
}感想
以上、Twitchの右上にある「ビッツの購入」、及び「Prime特典」のボタンを非表示にする方法（CSS）でした。
誘ってくる誘惑は、自ら断ち切るのです！（なんじゃそりゃ）