【広告】

Amazonブラックフライデーが12月2日まで開催中です!

個人的には、Anker製品か、コカ・コーラがかなり安くなっているのでおすすめです!

高級キーボードで有名な東プレが最近発売した「REALFORCE R3」もセールをやっていました!詳しくはこちらの記事を確認してみてくださーい。

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

2021年11月20日Stylebot

Twitter のアイコン

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

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

CSSで非表示にした「プロモーションする」ボタン

ウェブサイトを自由にカスタマイズできる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日記

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

ダウンロード方法

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

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

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

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

Stylebot のインストール

使い方

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

Stylebot のメニュー

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

Stylebot スタイル - 新しいスタイルを追加

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

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

有効にしたいURLとCSSを記述する

一番大きい枠には、以下の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 を使えます。

表示をカスタマイズする

貼り付けたら、「右下の保存する」をクリックします。下記画像のように登録できてチェックマークが入っていれば完了です。

スタイル一覧

Twitter にアクセスして確認してみます。Pro をやめたわけでもないのに「プロモーションする」のボタンが非表示になります。

「プロモーションする」ボタンが非表示になる

まとめ

以上、Twitter の「プロモーションする」を消し去る方法についてでした。Twitter だけでなく色々なサイトで使えるので、ぜひ試してみてください。

上記CSS すべて+ちょこっとカスタマイズで下記画像のようにできます。キーワード検索欄を思い切って左にしました。スッキリしていいですね。

CSSでカスタマイズした後のTwitter 画面

キーワード検索ボタンを左に移動する方法は以下の記事を参考にしてみてください。

Posted by ナポリタン寿司