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

2022年2月4日Stylebot&Stylus

Twitterのアイコン

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

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

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

本記事のCSSを利用することで、Twitterのタイムラインに表示される「プロモーションツイート」を非表示にできます。

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

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

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

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

僕が愛用しているウェブブラウザ「VivaldiのアイコンVivaldi」には、標準で広告ブロック機能が搭載されていますが、Twitter広告は非表示にしてくれません。

本記事の方法を使うことで、普段のウェブサイト広告はVivaldiでブロック、TwitterのプロモーションはCSSでブロック…と最強の環境を構築できます。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

CSS

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

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

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

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

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

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

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

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

Twitterのプロモーションツイートを削除した比較画像

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

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

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

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

Stylusを使ってウェブパネル内のTwitter広告を削除した画像

感想

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

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

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

参考:【Stylebot】Twitterの「プロモーションする」を非表示にするCSS
参考2:【Stylebot】「ツイートをプロモーションする」を非表示にするCSS

Posted by ナポリタン寿司