【Twitter】特定のリストタイムラインにある返信非表示CSS
僕は、Twitterで「ブロガーさん」というリストを、ひっそり作成しています。勝手に追加された方すみません。いつもツイート参考にさせていただいております。楽しいです。
そんな僕専用のブロガーさんリストですが、そのタイムラインでは、返信ツイートが不要だと感じました。追加した人が発信したツイートだけ見たいです。他のブロガーさんへの返信などは、あまり興味がありません。
僕が追加しているブロガーさんは、他のブロガーさんとの交流が多いようで、結構返信ツイートで、タイムラインが埋まってしまいます。
CSSを使うことで、タイムラインから返信ツイートを全て消せることは何となくわかっていました。しかし、僕はおすすめ、フォロー中などのタイムラインでは、通常通り、返信ツイートを表示してほしいと思いました。かなりわがままです。
CSS初心者の僕にはハードル高いか?と思っていたら、案外ささっとできたので、忘れないよう記事に書いておきます。僕の場合、ブロガーさんリストから返信を消すというものでしたが、応用も可能です。CSSの一部を書き換えることで、別のタイムラインでも適用できます。
本記事はPCブラウザ用です。スマホアプリ版は知りません。アプリではなくウェブ上でTwitterを見ているという方は、拡張機能が使える「Kiwi Browser」などのAndroidブラウザーアプリを使うことで、多分可能です。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
特定のリスト(タイムライン)から、返信を非表示にするCSS
「Twitter」にアクセスします。右上の「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*特定のリスト(タブ)のタイムラインから、返信を非表示*/
div[aria-label="ホームタイムライン"]:has(div[role="presentation"]:nth-of-type(4) a[aria-selected="true"]) article[data-testid="tweet"]:has(.r-18kxxzh.r-15zivkp) {
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-18kxxzh.r-15zivkp
」クラスが含まれるツイート(article[data-testid="tweet"]
)を、「display: none !important;
」で非表示にしています。
「.r-18kxxzh.r-15zivkp」
とは、返信先ツイートのユーザーアイコン上にある縦線のことです。
返信があるツイートは、ツイートの左側に縦棒があります。その下に続くように返信ツイートがあります。この時、この縦棒が若干はみ出ていて、別要素として認識されていたので、「お、これを返信ツイートかどうかの判断材料にしたらええやん」ということで、「has
」で指定しています。
以前は「返信先〇〇」という文字があったので、もっと簡単に判断材料として活用できていました。しかし、2023年7月か8月頃から、「返信先〇〇」という露骨な返信ツイートを表す要素がなくなってしまったので、それ以降、わずかにある縦棒という、すんげーところを使って、返信ツイートかどうか見極めるようにしています。
結果、特定のリスト内の返信ツイートを消しています。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。「:nth-of-type(4)
」の数字部分は、皆さんが変えた数字になっていればOKです。僕と同じ4番目に適用したいリストがある場合は、そのまま「:nth-of-type(4)
」でOKです。
再度拡張機能ボタンを押して、登録したサイト(例:twitter.com
)がオンになっていることを確認します。オンになっている間は有効になっているということです。
この状態で、指定したリストタブを開きます。僕の場合、左から4番目にある「ブロガーさん」タブです。
返信ツイートが一切表示されない状態で、開くと思います。ぼかしばかりであまり見えないと思いますが、動画を貼っておきます。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「twitter.com
」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
TweetDeckで、自分の返信・通知カラム以外の返信全部まとめて削除
「TweetDeck」や、カスタムCSSを利用できるサードパーティー製の「Twitter」アプリ(例:MarinDeck for TweetDeck、TWEETPD)を利用している方から、ちょくちょく「特定のタイムラインとか関係なしに、自分の返信と通知カラム以外にある返信は全部消したい!」という要望をいただきます。
これまで、個別に返信させていただいていただのですが、もう本記事に貼っておけばいいか!ということで貼ります。
section:has(h1~div:not(:is([aria-label$=": 通知"],[aria-label$=": タイムラインを検索"],[aria-label$=": 会話"]))) article[data-testid="tweet"]:has(div[data-testid="Tweet-User-Avatar"] a:not([href$="Naporitansushi"])):is(:has(.r-4qtqp9.r-zl2h9q),:has(.r-18kxxzh.r-15zivkp)) {
display: none !important;
}
あんまり詳しい解説はめんどくさいのでしません。通知カラム、検索結果カラム、会話ページは除外しています。ツイートの投稿主がナポリタン寿司(Naporitansushi
)である場合、除外しています。そうです。上記CSSをそのまま書き込むと、僕が書きこんだ返信ツイートは表示されます。
各自、自分のURLに書き換えてください。書き換える部分は、上記CSSの「href$="Naporitansushi"
」という部分です。ここを、自分のTwitterアカウントのID名にします。例えば、僕のサブアカウントの返信を表示したい場合は、「href$="Naporitansabu"
」になります。最初の「@
」記号は不要です。他の部分は、特に変える必要はないと思います。
僕は普段から、上記2つのCSSを利用しているわけではないため、「TweetDeck」やアプリの仕様変更により、いつの間にか使えなくなる可能性があります。
感想
以上、PCウェブサイト版「Twitter」で、特定のリストタイムラインから、返信ツイートのみをピンポイントで除去する方法でした。
いちお「Google Chrome」、「Vivaldi」ブラウザで動作確認しました。「Firefox」では確かめていません。ライトテーマ、別のフォントサイズでも動作しました。
頻繁にオンオフを切り替えたい場合は、「Stylus」で個別にスタイルシートを作成するといいかもしれません。「Stylebot」だと、個別切り替えが大変ですが、「Stylus」だと一発です。