【Twitter】トピックを一括で非表示にする方法（CSS）
この記事では、Twitterのタイムラインに表示される「トピック」ツイートを、「最新ツイート表示」にしなくても非表示にする方法を書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使うか、広告ブロッカーの「uBlock Origin」を利用します。
本記事で紹介するCSS、あるいは広告ブロッカーのコードを使うことで、Twitterのトピックツイートを全部非表示にできます。
通常、Twitterのタイムライン表示を、「ホーム」にしていると、ちょくちょくトピックツイートが表示されます。「食べ物」、「恋愛」といったジャンル名がツイートの上に表示されて、そのジャンルで注目を集めている方が表示されます。
その人をフォローしている・していないは関係なく、表示されます。「さらに表示」を押すことで、その界隈ツイートを一覧表示できます。人によっては、邪魔と思うかもしれません。
トピック横の「×」を押すことで、そのジャンルを非表示にできますが、1つずつ設定するのはめんどくさいです。
インターネットで調べてみると、タイムライン右上にある
ボタンをクリック→「最新ツイート表示に切り替える」をクリックすると、表示されなくなるとありました。確かにその通りでした。
Twitter標準の機能なので、上記の方法が、一番手っ取り早くおすすめです。
本記事では、あえて「ホーム」タイムラインのまま、トピックツイートだけを除去する方法について書きます。こだわりがない方は、普通に「最新ツイート表示」に切り替えてください。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...uBlock Originを使いたい場合は、以下のChromeウェブストアからインストールできます。
ただし、広告ブロッカーは、Twitterだけでなく、ウェブサイト全体に影響します。今回の方法のためだけに導入するのはおすすめしません。
https://chromewebstore.google.com/detail/ublock-origin/cjpal...「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/Twitterのトピックを「ホーム」のまま、非表示にする手順
Stylebot（CSS）を使った方法
Twitterにアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*トピックツイート非表示*/
div[data-testid="cellInnerDiv"]:has([href*="/topics"]):has([aria-label*="トピック"]) {
display: none;
}下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：twitter.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、Twitterのタイムラインを確認してみます。「最新ツイート表示」に切り替えなくても、トピックツイートが全部非表示になります。「〇〇さんがいいねしました」、「〇〇さんがフォローしています」などのツイートは、そのまま表示します。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「x.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
uBlock Origin（広告ブロッカー）を使った方法
Twitterにアクセスします。右上のuBlock Originアイコンをクリックします。電源マークが青色＝有効になっていることを確認して、右下の歯車アイコンをクリックします。
新しいタブで設定画面が開くので、上部にある「マイフィルター」タブをクリックします。書き込むコードは、以下になっています。
!【Twitter】タイムラインのトピック非表示
twitter.com##div[data-testid="cellInnerDiv"]:has([href*="/topics"]):has-text(さらに表示)書き込んだら、上部の「変更を適用」をクリックします。
Twitterに戻って、ページをリロードします。これで反映されるはずです。やっぱり元に戻したい時は、書き込んだコードを削除します。
Twitterの誰かがリツイートしたツイートを、全部非表示にする方法も書いています。極限まで、クリーンなタイムラインにしたい方は、参考にしてみてください。
感想
以上、Twitterのトピックツイートを全部削除して、クリーンなタイムラインにする方法でした。
ふと思ったんですが、最近uBlock Originや、CSS関連の記事ばかりですね。ここらへんは、ちょっと折り合いが難しいんですよねぇ笑。
僕の場合、1つの記事を書いたら、それに関連する記事ネタが、ぼんぼん出てくるので、どうしてもCSSの記事を書いたら、次に書く記事も、それに関連する記事になっちゃうんですよね。今のところ、あと数記事は続きそうな感じです。