【Stylebot】Twitterのプロモーションを非表示にするCSS

2022年2月4日Stylebot&Stylus

Stylebotのアイコン

この記事では、Twitterのタイムラインに表示される「プロモーションツイート」を非表示にするCSSについて書きます。

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

【Stylebot】Twitterのプロモーションを非表示にするCSS

Twitterのタイムラインに表示される「プロモーションツイート」を消すCSSです。ツイートの下に「プロモーションリンクプロモーション」と書かれているツイートのみを、ピンポイントで削除します。フォローしている方のツイート、トピックなどは、今まで通り閲覧できます。

Twitterのプロモーションって少し多すぎると思うんですよね。2~5個間隔ごとに表示されて少し鬱陶しいです。

Chrome拡張機能「uBlock Origin」を導入することでもブロックできますが、本記事では広告ブロッカーを導入せずに、CSSのみで非表示にしてみます。

「さすがに、Twitter広告にうんざり!」って方、試してみてください。CSSでブロック(正確には非表示)しているだけなので、再度表示させたい時は、いつでもオンオフできます。

僕が愛用しているウェブブラウザVivaldiのアイコンVivaldiには、標準で広告ブロック機能が搭載されていますが、Twitter広告は非表示にしてくれません。本記事の方法を利用することで、普段のウェブサイトの広告はVivaldiでブロック、TwitterのプロモーションはCSSでブロック…と最強の環境が構築できます。

Vivaldiの広告ブロック機能だと物足りなくて、結局、外部の拡張機能を導入しちゃっている方におすすめです。

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

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefoxをご利用の場合

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

Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。

「Firefoxへ追加」をクリックします。

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。

CSS

Twitterにアクセスします。

アクセスしたらCSSを書き込んでいきます。Stylebotを使っている人は、右上の拡張機能アイコン→Stylebotを開くをクリックします。

拡張機能ボタン Stylebotを開く

Firefoxで、Stylusを使っている方は、右上の拡張機能アイコン→「次のスタイルを書く」の「twitter.com」をクリックします。

Stylus 次のスタイルを書く twitter.com

新しいタブでスタイルシートが表示されるので、書き込んでいきます。書き込めたら、忘れずに「保存」をクリックします。

Stylus スタイルを追加

書き込むコードは、以下になっています。Stylebot、Stylusどちらも一緒です。

/*Twitterのプロモーションを非表示にするCSS*/
[class="css-1dbjc4n"][data-testid="placementTracking"] {
  display: none !important;
}

以下画像のようになればOKです。(下記は、Stylusで適用してみた画像です。)

Twitterのプロモーションを非表示にするCSS

Twitterにアクセスします。プロモーションツイートが非表示になります。

プロモーションツイートが非表示になる

上記画像は、ダークブルーテーマですが、ライトでもダークでも使えます。

オフにしたい時は、Twitterを開いて、有効になっているスタイルをオフにして、ページをリロードします。

Twitterのスタイルシートをオフにする

Stylusを利用している場合は、Vivaldiのウェブパネル内にも適用されます。

Stylusを利用している場合はウェブパネルに登録しているTwitterのプロモーションも非表示になる

感想

以上、Twitterのプロモーションツイートを非表示にするCSSについてでした。

合わせてタイムラインの横幅を広げてみると、より快適なTwitterライフが送れるかもしれません。

Twitterのプロモーション関連の記事は、他にもいくつか書いているので気になった方は、合わせて参考にしてみてください。

参考:【Stylebot】Twitterの「プロモーションする」を非表示にするCSS | ナポリタン寿司のPC日記
参考2:【Stylebot】「ツイートをプロモーションする」を非表示にするCSS | ナポリタン寿司のPC日記

Posted by ナポリタン寿司