【X・Twitter】話題を検索ページのおすすめ投稿を非表示にするCSS

2026年3月28日X(旧Twitter)

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

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

PCブラウザ版Xの「話題を検索」ページ下部には「おすすめユーザー」、「おすすめ投稿」が表示されています。

PC版Xの話題を検索ページにあるトレンド、おすすめユーザー、おすすめ投稿 — 本画像はAI（Gemini）生成

読者様から消したいと連絡いただいたのでCSSを使って非表示にしてみます。

CSSは自身の環境上だけの反映です。他人のデバイスには一切反映されません。CSSを導入できる拡張機能をインストールできるPCブラウザ専用です。スマホやタブレットのアプリ版ではできません。

拡張機能を利用できるブラウザアプリ（例：Kiwi Browserは2025年1月で開発終了なのでMicrosoft Edge CanaryやFirefox）などをインストールして、ブラウザ版から利用する場合はもしかしたら使えるかもしれません。

1. 前提
2. Xの「話題を検索」にあるおすすめ投稿・ユーザーを消すCSS
3. トレンドを消したい場合
4. 感想

前提

「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

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

Xの「話題を検索」にあるおすすめ投稿・ユーザーを消すCSS

スタイルシートを開く

「X（旧Twitter）」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。ちょっと長いです。

CSS

/*X話題を検索ページ下のおすすめユーザー非表示*/
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has([data-testid="UserCell"]),
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has(h2):has(+[data-testid="cellInnerDiv"] [data-testid="UserCell"]),
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has([href="/i/connect_people"]) {
    display: none !important;
}

/*X話題を検索ページ下のおすすめ投稿非表示*/
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has(article[data-testid="tweet"]) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/*X話題を検索ページ下のおすすめ投稿見出し非表示*/
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has(h2):has(+[data-testid="cellInnerDiv"] article[data-testid="tweet"]) {
    display: none !important;
}

/*X話題を検索ページのスクロール禁止*/
[aria-label="ホームタイムライン"] [aria-label="タイムライン: 話題を検索"] {
    height: 100vh !important;
    overflow-y: hidden !important;
}

/*X話題を検索ページ下のおすすめユーザー非表示*/
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has([data-testid="UserCell"]),
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has(h2):has(+[data-testid="cellInnerDiv"] [data-testid="UserCell"]),
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has([href="/i/connect_people"]) {
    display: none !important;
}

/*X話題を検索ページ下のおすすめ投稿非表示*/
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has(article[data-testid="tweet"]) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/*X話題を検索ページ下のおすすめ投稿見出し非表示*/
[aria-label="タイムライン: 話題を検索"] [data-testid="cellInnerDiv"]:has(h2):has(+[data-testid="cellInnerDiv"] article[data-testid="tweet"]) {
    display: none !important;
}

/*X話題を検索ページのスクロール禁止*/
[aria-label="ホームタイムライン"] [aria-label="タイムライン: 話題を検索"] {
    height: 100vh !important;
    overflow-y: hidden !important;
}

全部を書き込む必要はないです。コメントを読んで自分が消したい項目のCSSのみ書き込みましょう。例えばおすすめユーザーを消したくない場合、「おすすめユーザー非表示」CSSを書かないようにします。

今回作成したCSSは「display: none」で完全非表示ではなく、「opacity」と「pointer-events」で透明化&クリック無効化という作りにしています。「display: none」を使っちゃうとどんどんポストを読み込んでしまい、恐らくXの制限がきやすくなると判断したためです。

そういう作りのため、見た目は消えますが下にスクロールはできる仕様になっています。そこで「overflow-y」を使いそもそもスクロールできないようにしています。あくまで話題を検索ページの中央カラムのみの反映です。別ページやトレンド項目をクリックした先のページでは問題なくスクロールできるはずです。

注意事項

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

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

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