【Twitter】引用ツイートページの引用元を非表示にするCSS

​2023年2月13日​Twitter

この記事では、PCブラウザ版「Twitter」の引用ツイートページに表示される引用元ツイートを非表示にして、スッキリさせるCSSについて書きます。

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

通常、Twitterの引用ツイートページ（サンプル）を開くと、引用元ツイートとそれに対するツイートがセットで表示されます。引用元ツイートの長さにもよりますが、少し邪魔と思う人がいるかもしれません。

CSSを使うことで、引用ツイートページ上だけで、引用元のツイートを非表示にできます。引用に対する内容ツイートだけが表示されるのでスッキリします。1ページに表示される情報量が増えます。

自身の環境上だけの反映です。他人には影響しません。いつでも元に戻せます。本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

インストール方法

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

Stylebot - Chrome ウェブストア

ウェブの外観を瞬時に変更

 https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

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

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

 https://www.naporitansushi.com/stylebot/

引用元ツイートを削除する手順

今回はTwitter上全体（ドメイン指定）ではなく、引用元ツイートページだけに反映したいので、Stylebotアイコンを右クリック→「オプション」をクリックします。もし、Stylebotではなく、Stylus拡張機能を利用している場合は、こちらを参考にしてみてください。

【ポイント】「Stylebotを開く」からではないので注意

いつものStylebotアイコンをクリック→「Stylebotを開く」からではないので注意です。ここからだと、自動的にドメイン単位での指定になります。通常のタイムライン上でも引用元が消えてしまいます。

左側の「スタイル」をクリックします。「新しいスタイルを追加」をクリックします。既に引用元ツイートページ用のスタイルを作成している方は、そちらに追記します。

上部の入力フォーム（Enter URL…）にURLを書き込みます。書き込むURLは、「twitter.com/**/retweets/with_comments」になります。

twitter.com/**/retweets/with_comments

大きい入力フォームにCSSを書き込みます。

/*引用リツイート非表示*/
.r-1867qdf.r-rs99b7.r-1loqt21.r-1ny4l3l.r-1udh08x.r-o7ynqc.r-6416eg {
  display: none !important;
}

書き込めたら、右下の「保存する」をクリックします。

「twitter.com/**/retweets/with_comments」のスタイルが登録されればOKです。

Twitterの引用ツイートページにアクセスします。（サンプル）バズっているツイートを開いて、「〇件の引用ツイート」をクリックすると開けます。

開いたら、Stylebotアイコンの右上に数字が表示されると思います。クリックすると、スタイルシートがオンになっていると思います。他のTwitterページではオフになり、引用ツイートページだけでオンになります。

引用元のツイートが丸々非表示になります。引用に対する内容だけになるので、非常にスッキリします。リプライ（返信欄）みたいな感じになります。

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

「Stylus」拡張機能を利用している場合

「Stylus（スタイラス）」拡張機能を利用している場合、Twitterの引用ツイートページを指定するURLは、以下のようになります。

.*twitter.com/.*/retweets/with_comments

Stylebotのワイルドカードに対して、Stylusでは正規表現になります。正規表現における「.*」が、任意の文字1文字以上という意味です。

上記URLを、Stylusのスタイルシート下部にあるURL欄に貼り付けます。この時、左側の項目は、「正規表現に一致するURL」にします。これで動作すると思います。

感想

以上、PCウェブサイト版Twitterの引用ツイートページで、引用元ツイートを削除するCSSでした。

最近、イーロン・マスクさんによるTwitter大改革が止まりませんね。

余談ですが、本記事のスクリーンショットに映っているツイート下の各種ボタンは、以下の記事で紹介している拡張機能を利用することで、好きなようにカスタマイズできます。僕はツイートの表示回数を消して、ブックマークへの追加ボタンを設置しています。

【Twitter】表示回数を非表示にしたり、入れ替えたりする方法

この記事では、Twitter上（PC）のツイート下にある各種ボタンを並び替えたり、非表示にする方法を紹介 ...

 https://www.naporitansushi.com/twitter-display-count-sort-by...