【Twitter】引用ツイートページの引用元を非表示にするCSS
通常、Twitterの引用ツイートページ（サンプル）を開くと、引用元ツイートとそれに対するツイートがセットで表示されます。引用元ツイートの長さにもよりますが、少し邪魔と思う人がいるかもしれません。
CSSを使うことで、引用ツイートページ上だけで、引用元のツイートを非表示にできます。引用に対する内容ツイートだけが表示されるのでスッキリします。1ページに表示される情報量が増えます。
自身の環境上だけの反映です。他人には影響しません。いつでも元に戻せます。本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。
2023年9月に入り、引用ツイートページのURL、及びCSSの内容が変わりました。
本記事を修正しようと思ったのですが、最近のTwitterはころころと仕様を変える印象なので、「やっぱこの変更は不人気だったから、元に戻しまーす」ってなった場合に、再度修正するのがめんどくさいです。
そこで、簡単になりますが、ここで修正案を書いておきます。まず、Stylebotに書き込むCSS動作場所を、以下のようにします。
twitter.com/**/status/**/quotes**続いて、引用元ツイートを消すCSSを以下のようにします。
/*引用リツイート非表示*/
.r-adacv.r-1ny4l3l.r-1udh08x.r-o7ynqc.r-6416eg {
display: none !important;
}
これより下に書いているCSSは、仕様変更前のCSSなので、使えません。上記で書いた2023年9月以降用のCSSを使ってみてください。再度仕様変更があるまでは、とりあえずこれで消えると思います。すぐにイーロンマスクさんが元のような仕様に戻した場合は、本記事の追記した部分を丸々削除します。
インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/引用元ツイートを削除する手順
引用ツイートページだけに適用するスタイルシートを作成する
今回はTwitter上全体（ドメイン指定）ではなく、引用元ツイートページだけに反映したいので、Stylebotアイコンを右クリック→「オプション」をクリックします。
Stylebot拡張機能ではなく、Stylus拡張機能を利用している場合は、こちらに飛んでみてください。
いつものStylebotアイコンをクリック→「Stylebotを開く」からではないので注意です。
ここからだと、自動的にドメイン単位（twitter.com）での指定になります。通常のホームタイムライン上（https://twitter.com/home）でも、引用元が消えてしまいます。
逆に、引用ツイートページ（twitter.com/**/retweets/with_comments）だけでなく、ホームタイムライン上でも消したい場合は、ドメイン単位での指定にします。Stylebotアイコン→「Stylebotを開く」から、ドメイン単位のスタイルシートを開けます。
左側の「スタイル」をクリックします。「新しいスタイルを追加」をクリックします。既に引用元ツイートページ用のスタイルを作成している方は、そちらに追記します。
上部の入力フォーム（Enter URL…）にURLを書き込みます。書き込むURLは、「twitter.com/**/retweets/with_comments」になります。
twitter.com/**/retweets/with_comments
引用元を消すCSSを書き込む
大きい入力フォームに、以下のCSSを書き込みます。
/*引用リツイートの引用元非表示*/
.r-1867qdf.r-rs99b7.r-1loqt21.r-1ny4l3l.r-1udh08x.r-o7ynqc.r-6416eg {
display: none !important;
}もしかしたらフォントの大きさ・利用しているテーマによっては、動作しないかもしれません。そこまで検証していません。僕の環境だと、ダークブルーテーマでは動作しました。
他のテーマで動かない場合は、問い合わせページから教えていただければ幸いです。その際、本記事のURLを貼っていただけると、何のことかすぐに理解できます。
書き込めたら、右下の「保存する」をクリックします。
「twitter.com/**/retweets/with_comments」のスタイルが登録されればOKです。
実際に消えたかの確認
Twitterの引用ツイートページにアクセスします。（サンプル）バズっているツイートを開いて、「〇件の引用ツイート」をクリックすると開けます。
開いたら、Stylebotアイコンの右上に数字が表示されると思います。クリックすると、スタイルシートがオンになっていると思います。他のTwitterページではオフになり、引用ツイートページだけでオンになります。
引用元のツイートが丸々非表示になります。引用に対する内容だけになるので、非常にスッキリします。リプライ（返信欄）みたいな感じになります。
一時的に無効化したい場合は、Stylebot→「twitter.com/**/retweets/with_comments」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
「Stylus」拡張機能を利用している場合
「Stylus（スタイラス）」拡張機能を利用している場合、Twitterの引用ツイートページを指定するURLは、以下のようになります。
.*twitter.com/.*/retweets/with_commentsStylebotのワイルドカードに対して、Stylusでは正規表現になります。正規表現における「.*」が、任意の文字1文字以上という意味です。
上記URLを、Stylusのスタイルシート下部にあるURL欄に貼り付けます。この時、左側の項目は、「正規表現に一致するURL」にします。これで動作すると思います。
TweetDeckのタイムラインから引用元ツイートを消したい場合
公式Twitterではなく、TweetDeckのタイムラインから、引用元ツイートを消すことも可能です。2023年4月時点で、TweetDeckには二つのUIが存在しています。2023年2月頃から実装された新しいベータ版（プレビュー版）と、それ以前の古いレガシー版です。どちらのUIを使っているかで、書き込むCSSが異なります。
新しいデザインのTweetDeckを利用している場合は、公式Twitterの引用元ツイートを消す同じCSSで消えると思います。
一方、古いデザインのTweetDeckを利用している場合は、以下のCSSで消せると思います。あまり検証していないので、利用する際は、自己責任でお願いします。
/*TweetDeckのタイムラインから引用元ツイート削除*/
.quoted-tweet {
display: none !important;
}
上記画像は、新しいTweetDeckで消してみた比較画像です。
タイムラインから引用リツイートを非表示にしたい場合
以下の記事を参考にしてみてください。
感想
以上、PCウェブサイト版Twitterの引用ツイートページで、引用元ツイートを削除するCSSでした。
最近、イーロン・マスクさんによるTwitter大改革が止まりませんね。
余談ですが、本記事のスクリーンショットに映っているツイート下の各種ボタンは、以下の記事で紹介している拡張機能を利用することで、好きなようにカスタマイズできます。僕はツイートの表示回数を消して、ブックマークへの追加ボタンを設置しています。
