2024/04/15
当方のスマホ版Xでは反映されないスタイルだったので修正しました。
上手く適用されない場合にチェックする修正箇所メモを追加しました。
※ブラウザの拡張機能「Control Panel for Twitter」を使用してコントロールできる個所は扱いません。
こちらの拡張機能では制御しきれない部分をStylusなどのカスタムCSSで消します。
※自分用に使っているものを紹介しているため、セレクタ指定がややいい加減です。問題が出ればその都度書き換えています。
〇〇さんのリポスト の表示を消す
.r-18kxxzh:has(svg.r-??? path[d^="M4.75 3.79l4.603"])+div a {
display: none;
}
/* svg.r-???の部分は 使用されてるカラーテーマによって変わります。 */
svg.r-14j79pv /* デフォルト(ホワイト) */
svg.r-115tad6 /* ダークブルー */
svg.r-1bwzh9t /* ブラック */
一番最初のクラス指定 .r-18kxxzh は汎用クラスとして使われているため、環境によってはスタイルが適用されないかもしれません。下記解説をご覧ください。
この消し方だと、リンクを含む文字部分が消え、RTアイコンは残ります。
それさえいらない方ならセレクタはもっとシンプルになりますが、こうしているのにはワケがあります。
「あなたのRTを誰かがRTしました」という通知を邪魔に感じてる人も多い。
私は相手に通知をわざわざ送りたくないので、RTはRTだと分かったほうがいい。
RTするときは本人のページへ飛ぶなど一手間かけます。
一番楽なのは、ポストの日付リンクをクリックして生のポストに飛び、そこからRTすることらしい。
RTアイコンだけだと余白が気になるので、空いた部分に文字を付け足してみる。(SVGカラー: デフォルトの例)
.r-18kxxzh:has(svg.r-14j79pv path[d^="M4.75 3.79l4.603"])+div::after
{
content:"誰かがリポスト";
color: gray;
font-size: small;
}
「誰かがリポスト」の部分や、文字の装飾部分は自由。
最終的にこのような感じになります。
解説
CSSのプロならもっといいクラス指定が出来ると思います。あくまで参考にどうぞ。
「RTアイコンに使われている灰色指定のSVG」を含むDIV要素…、
その隣(兄弟要素)に、Aリンクで囲まれた目当ての「〇〇さんのリポスト」があります。
.r-18kxxzh:has(...)
-
RTアイコンのSVGの 1つ上の親要素div を指定したいのですが、付与されてるクラスはいずれも汎用で他にも使われてしまっているようです。X全体がそういうルールで組まれています。
狙いたいdivに当てられてるクラスは次のとおり。
/* PC/SP共通クラス */ .r-18kxxzh {flex-grow: 0;} .r-obd0qt {align-items: flex-end;} .r-1777fci {justify-content: center;} .r-1kb76zh {margin-right: 8px;} /* PC版X */ .r-onrtq4 {frex-basis: 40px;} /* スマホ版X - 環境で異なる可能性あり */ .r-a2axhi {flex-basis: 38px;}
この中から最も他に影響がないものを先頭の.r-XXXXXX:has(...)に指定できればこのカスタムCSSは完成に至るはずです…
path[d^="M4.75 3.79l4.603"]
- RTアイコンSVGのパス形状(前方一致)
svg.r-14j79pv
最初にも書きましたがご使用のカラーテーマによって変わります。
-
svg.r-14j79pv- デフォルト(ホワイト) -
svg.r-115tad6- ダークブルー -
svg.r-1bwzh9t- ブラック
色変更に使われている.r-XXX...を指定しなくてもTLには問題ないのですが、通知欄に使用されているグリーンのRTアイコンに支障が出てしまいます。
※一番最初のURL指定で twitter.com 全体を指定しているためです。
- 通知ページを除外できるならばこのカラー指定はいりません。正規表現などを使えば twitter.com/notifications を除外できるでしょうが、面倒なので私はやりませんでした。
- 他人のユーザーページは当然その人のRTしか存在しないため、カスタムCSS適用外でも構わない気もします。
その場合はURL指定を完全一致にしてホームTLのみ適用でもいいですね。
通知欄からアイコンや名前を消す(過去の記事)
通知欄のカスタムは他にも
- いいね / RT / フォロー それぞれの通知を個別に消す。
これもまた次の機会にご紹介してもいいかもしれません。
手法は簡単で、SVGアイコンに使用されてる各種カラー、いいねなら赤、RTなら緑、フォローは青……を指定しているクラスを開発者ツールで見つけ出し、その上の階層のdivやarticleを非表示にするものです。
リプライ通知だけは欲しい場合に使えるのではないかと思ったのですが、リプライタブが既にありますね……。
通知をミュートすると、その期間の一切の通知は後で確認できない（記録に残らないっぽい）ので、記録はほしいけど今は見たくないという場合に有効かもしれません。