【Twitter Pro】「プロモーションする」を非表示にする方法。CSSを使ってみよう！

2021年11月20日2021年11月29日Stylebot

この記事では、Twitter Proにすると表示される「プロモーションする」の表示をCSSを使って非表示・削除する方法について書きます。

Twitter Proは使いたいけど、プロモーションはいらない！って時に便利です。

ウェブサイトを自由にカスタマイズできるChrome拡張機能「Stylebot」を使うことで、Twitter の「プロモーションする」ボタンを非表示にできます。

あくまでCSS で自分の閲覧上をカスタマイズするだけなので、他の方には迷惑になりませんし、今後もTwitter Pro は利用できます。

CSS と聞いて「うっ」ってなるかもですが、初心者でも簡単にできます。

11月19日あたりから、Twitter の自分のツイート下に「プロモーションする」といったボタンが表示されるようになりました。これは、Twitter の新機能「Twitter Pro」にしているアカウントでのみ表示される仕様になっています。

なので、そもそも自分にはTwitter Pro 合わなかったなという方は、元の通常アカウントに戻すことで非表示にできます。本記事では、Twitter Pro として今後も利用したいけど、プロモーションはしないから非表示にしたい！という方向けの内容です。

具体的には、プロフィールに職業（ブロガー！とか）を表示させたいためだけにPro にした方向けですね。

Twitter PRO については、以下の記事を参考にしてみてください。

参考：【Twitter Pro】Proアカウントに切り替える方法。Proにすると何ができる？ | ナポリタン寿司のPC日記

今回の方法はパソコン版でのみできます。スマホではできないので注意してください。

1. ダウンロード方法
2. 使い方
3. まとめ

ダウンロード方法

ウェブサイトごとでCSS を保存できるChrome拡張機能「Stylebot」を使います。とりあえずCSS を適用できるChrome拡張機能であれば何でもOKです。

以下のサイトからダウンロードできます。

Stylebot - Chrome ウェブストア

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

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

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

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

使い方

インストールできたら、Chrome拡張機能のStylebot ボタンをクリック → オプションをクリックします。

設定が開くので左側からスタイルを選択 → 「新しいスタイルを追加」をクリックします。

若干表示デザインが崩れていますが、気にせず必要な情報を書いていきます。

最初の枠にTwitter のURL（https://twitter.com）を入力します。「Twitter上でのみ発動するよ～」っていう意味です。

一番大きい枠には、以下のCSSを貼り付けます。

/*
ダークブルーテーマ用CSS
「プロモーションする」を非表示
*/
a.css-4rbku5.css-18t94o4.css-1dbjc4n.r-1niwhzg.r-sdzlij.r-1phboty.r-rs99b7.r-1loqt21.r-1s2bzr4.r-2yi16.r-1qi8awa.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr {
  display: none;
}

デフォルトテーマをお使いの場合のCSS

ダークブルーテーマではなく、通常のホワイトテーマを利用の方は、以下のCSS になります。お使いのテーマによってCSS の要素名が変わっちゃうのが理由です。

*/
デフォルトテーマ用CSS
「プロモーションする」を非表示
*/
a.css-4rbku5.css-18t94o4.css-1dbjc4n.r-1niwhzg.r-1ets6dv.r-sdzlij.r-1phboty.r-rs99b7.r-1loqt21.r-1s2bzr4.r-2yi16.r-1qi8awa.r-1ny4l3l.r-ymttw5.r-o7ynqc.r-6416eg.r-lrvibr {
  display: none;
}

ブラックテーマの場合は、ダークブルーと同じCSS を使えます。