【Twitter】特定のリストタイムラインにある返信非表示CSS

​​Twitter

Twitterのアイコン

この記事では、PCウェブサイトの「Twitter」で、特定のリストタブのホームタイムラインから、返信を非表示にするCSSを紹介します。かなりニッチです。

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

【Twitter】特定のリストタイムラインにある返信非表示CSS

僕は、Twitterで「ブロガーさん」というリストを、ひっそり作成しています。勝手に追加された方すみません。いつもツイート参考にさせていただいております。楽しいです。

Twitterのタイムライン画像

そんな僕専用のブロガーさんリストですが、そのタイムラインでは、返信ツイートが不要だと感じました。追加した人が発信したツイートだけ見たいです。他のブロガーさんへの返信などは、あまり興味がありません。

Twitterのタイムラインにある返信ツイート画像

僕が追加しているブロガーさんは、他のブロガーさんとの交流が多いようで、結構返信ツイートで、タイムラインが埋まってしまいます。

CSSを使うことで、タイムラインから返信ツイートを全て消せることは何となくわかっていました。しかし、僕はおすすめ、フォロー中などのタイムラインでは、通常通り、返信ツイートを表示してほしいと思いました。かなりわがままです。

CSS初心者の僕にはハードル高いか？と思っていたら、案外ささっとできたので、忘れないよう記事に書いておきます。僕の場合、ブロガーさんリストから返信を消すというものでしたが、応用も可能です。CSSの一部を書き換えることで、別のタイムラインでも適用できます。

本記事はPCブラウザ用です。スマホアプリ版は知りません。アプリではなくウェブ上でTwitterを見ているという方は、拡張機能が使える「Kiwi Browser」などのAndroidブラウザーアプリを使うことで、多分可能です。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。「Stylus」でもOKです。

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

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

「Stylebot」のインストール手順画像

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

特定のリスト（タイムライン）から、返信を非表示にするCSS

「Twitter」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*特定のリスト（タブ）のタイムラインから、返信を非表示*/
div[aria-label="ホームタイムライン"]:has(div[role="presentation"]:nth-of-type(4) a[aria-selected="true"]) article[data-testid="tweet"]:has(.r-4qtqp9.r-zl2h9q) {
  display: none !important;
}
注意事項

本CSSは、僕が適当に作成したものです。

よって、いつの間にかコードが使えなくなったり、予期せぬ部分が消える可能性があります。その場合、問い合わせより教えていただければ幸いです。

上記CSSを丸々コピペしても、思い通りの結果にならないと思います。僕用のコードにしているためです。皆さんの思い通りになるようコードをカスタマイズしてみましょう。

上記CSS内にある「:nth-of-type(4)」という部分に注目です。ここの「4」っていう数字は、上部のタイムラインタブの数を指しています。

皆さんがCSSを適用したいタブがある数字を指定します。例えば、上記画像の一番左にある「おすすめ」タブでコードを発動させたい場合は、「:nth-of-type(1)」になります。

「ブロガーさん」というリストは関係なくて、何番目にあるリストかどうかを見ています。

もうちょっとだけ詳しく知りたい方は、以下のアコーディオンを開いてみてください。

まずタイムラインである「div[aria-label="ホームタイムライン"]」を指定しています。

次に、hasを使って、特定の要素が含まれている時に発動するようにしています。ここでの特定の要素とは、タブ（[role="presentation"]）の4番目（:nth-of-type(4)）が、「a[aria-selected="true"]」であることを指しています。

つまり、リストの名前は関係ありません。僕が今回適用したいと思った「ブロガーさん」というリストが、たまたまタイムラインの左から4番目にあったので、「:nth-of-type(4)」にしています。

多分、リストタブの順番って変わらないですよね…？だから、名前ではなく、何番目かで判別してもいいかなと思いました。

皆さんが適用したいリストのタイムラインが、左から6番目にある場合は、「:nth-of-type(6)」といったようにします。

そのリストが開かれている時だけ発動するようにしています。「a[aria-selected="true"]」という部分です。リストが開かれていない時は、何番目か関係なしに発動しません。

ここまでの条件を全て満たしている場合、返信を表す要素（.r-4qtqp9.r-zl2h9q）が含まれるツイート（article[data-testid="tweet"]）を、「display: none !important;」で非表示にしています。

結果、特定のリスト内の返信ツイートを消しています。

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。「:nth-of-type(4)」の数字部分は、皆さんが変えた数字になっていればOKです。僕と同じ4番目に適用したいリストがある場合は、そのまま「:nth-of-type(4)」でOKです。

Stylebotのスクリーンショット2

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

この状態で、指定したリストタブを開きます。僕の場合、左から4番目にある「ブロガーさん」タブです。

リストのタイムラインを切り替える手順画像

返信ツイートが一切表示されない状態で、開くと思います。ぼかしばかりであまり見えないと思いますが、動画を貼っておきます。

一時的に無効化したい場合は、Stylebot→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、PCウェブサイト版「Twitter」で、特定のリストタイムラインから、返信ツイートのみをピンポイントで除去する方法でした。

いちおGoogle Chrome、Vivaldiブラウザで動作確認しました。Firefoxでは確かめていません。ライトテーマ、別のフォントサイズでも動作しました。

頻繁にオンオフを切り替えたい場合は、「Stylus」で個別にスタイルシートを作成するといいかもしれません。「Stylebot」だと、個別切り替えが大変ですが、「Stylus」だと一発です。

Stylus拡張機能のTwitterスタイルシート一覧画像

​​Twitter