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

Twitter

「Twitter」のアイコン

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

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

Twitterの引用ツイートページの引用元ツイートを削除した画像

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

Twitterの引用ツイートページのスクリーンショット

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

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

インストール方法

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

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

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

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

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

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

StylebotでTwitterの引用ツイートページだけに適用する手順画像1
【ポイント】「Stylebotを開く」からではないので注意

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

Stylebotのポップアップメニュー画像1

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

StylebotでTwitterの引用ツイートページだけに適用する手順画像2

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

twitter.com/**/retweets/with_comments
StylebotでTwitterの引用ツイートページだけに適用する手順画像3

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

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

もしかしたらフォントの大きさ・利用しているテーマによっては、動作しないかもしれません。そこまで検証していません。僕の環境だと、ダークブルーテーマでは動作しました。

他のテーマで動かない場合は、問い合わせページから教えていただければ幸いです。その際、本記事のURLを貼っていただけると、何のことかすぐに理解できます。

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

StylebotでTwitterの引用ツイートページだけに適用する手順画像4

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

StylebotでTwitterの引用ツイートページだけに適用する手順画像5

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

Twitterの引用ツイートページにアクセスする手順画像

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

Stylebotのポップアップメニュー画像2

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

Twitterの引用ツイートページの引用元ツイートを非表示にした比較画像

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

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

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

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

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

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

Stylus拡張機能で、Twitterの引用ツイートページを指定する手順画像

感想

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

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

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

Twitter