【Twitch】右上のビッツの購入、Prime特典を非表示にするコード

2022年7月20日Twitch関連

Twitchのアイコン

この記事では、「Twitch(ツイッチ)」の右上にある「ビッツの購入」、「Prime特典」ボタンを非表示にする方法(CSS)について書きます。

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

【Twitch】右上のビッツの購入、Prime特典を非表示にするコード

本記事で紹介するCSSを使えば、「Twitch」の右上にある不要な項目を削除できます。以下の部分です。CSSで非表示にするだけなので、いつでも元に戻せます。初心者でもできます。

  • ヘッダー右上の「ビッツの購入」
  • チャット入力欄内の「ビッツ」ボタン
  • ヘッダーのPrime特典

僕は、とある方のTwitch配信を見るのですが、右上の「ビッツを購入」ボタンが、鬱陶しいです。僕は、無料で見る派なので、有料コンテンツ?のビッツは不要です。うっかり押し間違えそうなので、いっそのこと消すことにしました。

同じように、「Twitchにお金はかけない」という方、参考にしてみてください。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

「右上のビッツの購入」と「Prime特典」を非表示にするCSS

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

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

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

/*右上の「ビッツの購入」ボタン非表示*/
button[data-a-target="top-nav-get-bits-button"] {
  display: none;
}

/*チャットの入力欄内の「ビッツ」ボタン非表示*/
button[aria-label="ビッツ"] {
  display: none;
}

/*右上の「Prime特典」ボタン非表示*/
.top-nav__prime {
  display: none;
}

右上の「×」でスタイルシートを閉じます。

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

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

これで、右上の「ビッツの購入」、「Prime特典」のボタンが消えます。

Twitchの「ビッツの購入」、「Prime特典」ボタンを非表示にした画像

配信者によっては、チャット内にも「ビッツの購入」ボタンが表示されます。『チャットの入力欄内の「ビッツ」ボタン非表示』のコードを使うことで削除できます。

チャットの入力欄内にあるビッツの購入ボタン画像

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

感想

以上、「Twitch(ツイッチ)」の右上にある「ビッツの購入」、及び「Prime特典」のボタンを非表示にする方法(CSS)でした。

誘ってくる誘惑は、自ら断ち切るのです。

Posted by ナポリタン寿司