【Twitter】話題を検索に表示されるツイートを全部非表示にするCSS

2023年9月30日Twitter

この記事では、PCウェブサイト版「Twitter」の「話題を検索（トレンド）」ページの下部に表示されるツイートを全部非表示にするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。

PCウェブサイト版「Twitter」で「話題を検索」のおすすめページを開くと、下部にツイートが表示されます。

スクロールすればするほど、どんどん表示されて、延々と時間を使ってしまいます。見なければいいだけの話ですが、そこにあったら見てしまうのが僕です。

「そこにあるからいけねーんだ。消してしまえ」ということで、CSSを使って非表示にしてみます。自身の環境上で、他人には影響しません。いつでも元に戻せます。

本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。拡張機能を利用できるブラウザアプリ（例：Kiwi Browser）などを使って、ウェブ版を利用するのであれば、多分できます。

1. インストール方法
2. 話題を検索ページ下部のツイートを消すCSS
3. 話題を検索ページの「おすすめ動画」を消すCSS
4. 【余談】各トレンド項目の余白を詰めるCSS
5. 感想

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

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

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックしてインストールします。

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

話題を検索ページ下部のツイートを消すCSS

今回は、他のページで誤作動させないため、Twitterの「話題を検索」ページだけで発動するようにしてみます。そのためには、拡張機能アイコンの左クリック→「Stylebotを開く」ではなく、右クリック→「オプション」をクリックします。

「スタイル」をクリックします。「新しいスタイルを追加」をクリックします。既に「話題を検索」ページ専用のスタイルシートを作成している場合は、そちらに追記する形でOKです。

PCウェブサイト版「Twitter」の話題の検索ページにあるツイートを非表示にする手順画像1

2つのテキストボックスが表示されます。上部のボックスに、話題を検索ページだけで動作するURLを書き込みます。その下のボックスにCSSを書き込みます。

PCウェブサイト版「Twitter」の話題の検索ページにあるツイートを非表示にする手順画像2

指定するURLは、以下になります。ワイルドカードを使って、話題を検索ページだけで動作するようにしています。

**//twitter.com/explore**

「Stylus」拡張機能を利用している場合

「Stylus」拡張機能を利用している場合、書き込むURLが異なります。「正規表現に一致するURL」にして、以下のURLを書き込みます。

.*//twitter.com/explore.*

書き込むCSSは、以下になっています。

/*話題を検索（トレンド）下部に表示されるツイート非表示*/
div[aria-label="タイムライン: 話題を検索"] div[data-testid="cellInnerDiv"]:is(:has(article[data-testid="tweet"]),:has(a[href^="/i/topics/"])) {
    display: none  !important;
}

注意事項

本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。

もしかしたらFirefoxブラウザでは使えないCSSかもしれません。Chromeで試してみて、使えた場合は、「Firefox has 有効」といった感じで検索して、出てきた記事内容を実践すると、Firefoxでも使えるようになります。

書き込めたら、「保存する」をクリックします。

PCウェブサイト版「Twitter」の話題の検索ページにあるツイートを非表示にする手順画像3

Twitterの「話題を検索」ページにアクセスします。

拡張機能ボタンを押して、登録したサイト（例：**//twitter.com/explore**）がオンになっていることを確認します。オンになっている間は有効になっているということです。

PCウェブサイト版「Twitter」の話題の検索ページにあるツイートを非表示にする手順画像4

話題を検索（おすすめ）ページを下にスクロールしても、ツイートが表示されなくなります。うっかり時間を使ってしまうのを防げます。

PCウェブサイト版「Twitter」の話題の検索ページにあるツイートをCSSで非表示にした画像

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「（例：**//twitter.com/explore**）」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

話題を検索ページの「おすすめ動画」を消すCSS

以下の記事を参考にしてみてください。同様にCSSを使うことで、消せます。

【Twitter】話題を検索に表示される「おすすめ動画」を非表示にするCSS

この記事では、PCウェブサイト版「Twitter」の「話題を検索（トレンド）」のおすすめページを開いたら ...

https://www.naporitansushi.com/twitter-search-topics-recomme...

【余談】各トレンド項目の余白を詰めるCSS

僕は、多少余白がなくて見た目が悪くても、ぎゅっと詰めて表示させたい派です。同じような方は、以下のCSSが役立つかもしれません。

/*話題を検索（トレンド）の各項目間の余白をぎゅっと詰める*/
div[aria-label="タイムライン: 話題を検索"] div[data-testid="cellInnerDiv"] div[data-testid="trend"] {
    padding-bottom: 7px !important;
    padding-top: 0 !important;
}

「padding-bottom」の数値で、余白具合を調整できます。デフォルトでは「padding-top」も設定されていたんですが、これはいらないと思い、「0」にしています。

各トレンド項目の余白がぎゅっと詰まって、スクロール量が減ります。