当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

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

2023年4月9日Twitter

Twitterのアイコン

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

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

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

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

PCウェブサイト版「Twitter」のタイムライン画像

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

PCウェブサイト版「Twitter」のタイムラインにある返信ツイート画像

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

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

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

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

インストール方法

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

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

「Chromeに追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像1

「拡張機能を追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像2

拡張機能のオーバーフローメニューに追加されたらOKです。

「Stylebot」拡張機能をインストールする手順画像3

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

「Stylebot」拡張機能を直接ツールバーに配置する手順画像

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

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

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

「Stylebot」拡張機能のスクリーンショット1

右側に白紙のサイドバーが表示されます。もし初めて「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」っていう数字は、上部のタイムラインタブの数を指しています。

PCウェブサイト版「Twitter」のリストタブ画像

皆さんが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」とは、返信先ツイートのユーザーアイコン上にある縦線のことです。

PCウェブサイト版「Twitter」の返信ツイートについているちょっとした縦棒画像

返信があるツイートは、ツイートの左側に縦棒があります。その下に続くように返信ツイートがあります。この時、この縦棒が若干はみ出ていて、別要素として認識されていたので、「お、これを返信ツイートかどうかの判断材料にしたらええやん」ということで、「has」で指定しています。

以前は「返信先〇〇」という文字があったので、もっと簡単に判断材料として活用できていました。しかし、2023年7月か8月頃から、「返信先〇〇」という露骨な返信ツイートを表す要素がなくなってしまったので、それ以降、わずかにある縦棒という、すんげーところを使って、返信ツイートかどうか見極めるようにしています。

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

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

「Stylebot」拡張機能のスクリーンショット2

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

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

PCウェブサイト版「Twitter」のリストのタイムラインを切り替える手順画像

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

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

TweetDeckで、自分の返信・通知カラム以外の返信全部まとめて削除

「TweetDeck」や、カスタムCSSを利用できるサードパーティー製の「Twitter」アプリ(例:MarinDeck for TweetDeckTWEETPD)を利用している方から、ちょくちょく「特定のタイムラインとか関係なしに、自分の返信と通知カラム以外にある返信は全部消したい!」という要望をいただきます。

これまで、個別に返信させていただいていただのですが、もう本記事に貼っておけばいいか!ということで貼ります。

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」だと一発です。

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

2023年4月9日Twitter