Xは赤が似合うので赤くした

今回もユーザーCSSをちょっと書いただけ。
X（旧Twitter）がとてもとてもエーックスといった感じだし、ダークモード推奨らしいのでやっぱり赤くすべきだと思ってやってやったので共有する。

どうだろう？
Xが赤いと個人的にはとてもしっくりくる。

ちなみに【↑↑↓↓←→←→BA】でロゴが回転するギミックはまだ生きている。風車かな？

CSSコード

---

.r-1nao33i,
.r-vkub15,
.r-yyyyoo {
    color: red !important;
}

.r-yyyyoo.r-o6sn0f,
button[data-testid="retweet"]:hover .r-yyyyoo,
button[data-testid="unretweet"] .r-yyyyoo{
    color: MediumSeaGreen  !important;
}

.r-l5o3uw,
.r-1waj6vr,
.r-1524zjh.r-1nrc83j,
nav .r-hdaws3,
.r-1cad53l .r-4fabwj,
.r-fyomxp .r-2j7rtt,
main .r-1gn8etr .r-obd0qt .r-1atloto.r-4fabwj,
main .r-1p0dtai.r-1d2f490 .r-1atloto.r-4fabwj,
.r-18u37iz.r-1wtj0ep .r-1atloto.r-4fabwj,
.r-eqz5dr.r-cq70t5.r-15foc2f.r-4cht5q.r-13qz1uu .r-2j7rtt:first-child{
    background-color: red !important;
}

a[data-testid="SideNav_NewTweet_Button"],
button[data-testid="tweetButton"],
button[data-testid="tweetButtonInline"],
button.r-y6eg4e,
button[data-testid="confirmationSheetConfirm"],
div[data-testid="hoverCardParent"] button.r-4fabwj,
.r-1cwvpvk button.r-4wgw6l,

div[data-testid="hoverCardParent"] button,
div[aria-labelledby="modal-header"] .css-175oi2r.r-1f0wa7y .r-b9tw7p button{
    background-color: red !important;
}

.r-1524zjh.r-1nrc83j:hover,
div[data-testid="primaryColumn"] .r-1gn8etr .r-obd0qt button:hover,
button.r-4fabwj:hover,
button[data-testid="tweetButton"]:hover,
button[data-testid="tweetButton"]:disabled,
button[data-testid="tweetButtonInline"]:hover,
button[data-testid="tweetButtonInline"]:disabled,
button.r-y6eg4e:hover,
div[data-testid="hoverCardParent"] button.r-4fabwj:hover,
.r-1cwvpvk button.r-4wgw6l:hover,
.r-1cwvpvk button.r-4wgw6l:disabled,

div[data-testid="hoverCardParent"] button:hover,
div[aria-labelledby="modal-header"] .css-175oi2r.r-1f0wa7y .r-b9tw7p button[aria-disabled="true"]{
    background-color: DarkRed !important;
}

div[data-testid="ScrollSnap-nextButtonWrapper"] button.r-4fabwj,
div[data-testid="ScrollSnap-prevButtonWrapper"] button.r-4fabwj,
button[data-testid="clearButton"],
.r-1mmae3n button[data-testid="UserCell"] {
    background-color: inherit !important;
}

.r-1777fci,
a[data-testid="SideNav_NewTweet_Button"] svg {
    color: LavenderBlush !important;
}

.r-1vtznih,
a[data-testid="SideNav_NewTweet_Button"]:hover,
main .r-1gn8etr .r-obd0qt .r-1atloto.r-jc7xae,
main .r-1p0dtai.r-1d2f490 .r-1atloto.r-jc7xae,
.r-18u37iz.r-1wtj0ep .r-1atloto.r-jc7xae,
.r-1524zjh.r-1nrc83j.r-1peqgm7,
.r-eqz5dr.r-cq70t5.r-15foc2f.r-4cht5q.r-13qz1uu .r-jc7xae:first-child,
div[data-testid="ScrollSnap-nextButtonWrapper"] button.r-4fabwj:hover,
div[data-testid="ScrollSnap-prevButtonWrapper"] button.r-4fabwj:hover{
    background-color: DarkRed !important;
}

div[data-testid="primaryColumn"] .r-1gn8etr .r-obd0qt button,
.r-1p0dtai.r-1d2f490 .r-5wli1b .r-4fabwj:hover,
.r-h3f8nf .r-1524zjh.r-1nrc83j:hover {
    background-color: rgba(29, 155, 240, 0.1) !important;
}


.r-1p0dtai.r-1d2f490 .r-5wli1b .r-4fabwj,
.r-h3f8nf .r-1524zjh.r-1nrc83j{
    background-color: inherit !important;
}

.r-115tad6.css-901oao span.css-901oao {
    color: DarkGray !important;
}

.r-1h1c4di {
    font-size: 18px !important;
    line-height: 1.5 !important;
}

nav a .r-14gvhwr,
nav a .r-ah86l4 {
    padding: 0.5em 0 !important;
    font-size: 14px !important;
}

.r-1hycxz {
    padding-top: 30px;
}

.r-1hycxz .r-1hycxz {
    padding-top: 0;
}

/* subs notice, new posts notice */
.r-uaa2di,
.r-18jm5s1{
    display: none !important;
}

label .r-uaa2di {
    display: inline !important;
}

.r-1n0xq6e .r-uaa2di {
    display: block !important;
}

div[data-testid="placementTracking"],
div[data-testid="inlinePrompt"]{
    display: none !important;
}

article[data-testid="tweet"] .r-t1sew1 .r-uaa2di,
div[data-testid="tweetPhoto"] div[data-testid="placementTracking"],
.r-u8s1d div[data-testid="placementTracking"]{
    display: block !important;
}

div[data-testid="GrokDrawer"],
a[data-testid="premium-signup-tab"]{
    display: none !important;
}


/* 2025.01.29 X update */
#react-root{
    width: 650px !important;
}

.r-1elnebe{
    width: 550px !important;
    border-right: 1px solid #222 !important;
}

button[aria-label="ナビゲーションを切り替え"],
button[aria-label="Grokのアクション"]{
    display: none !important;
}
.r-1c4mltk{
    width: 85px !important;
    border-right: 1px solid #bd0000 !important;
}

header[role="banner"] .r-1rnoaur{
    height: 100% !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    justify-content: start;
    scrollbar-color: #bd0000 #3c0000 !important;
    scrollbar-width: thin !important;
}

/* menu drawer on
header[role="banner"]{
    width: 270px !important;
}

main[role="main"].r-1wbh5a2 {
    flex-shrink: 0;
}
*/

.r-kr0nin{
    width: 1.8rem !important;
}
.r-1tbo1j0{
    height: 1.8rem !important;
}


/*
div[role="tablist"] div[role="presentation"] a div{
    height: auto !important;
    padding: 0 !important;
}
div[role="tablist"] div[role="presentation"] a[aria-selected="true"] {
    border-bottom: 2px solid red !important;
}
div[role="tablist"] div[role="presentation"] a[aria-selected="true"] span {
    color: red !important;
}
div[role="tablist"] div[role="presentation"] a[aria-selected="false"]:hover{
    border-bottom: 2px solid red !important;
}
*/

スタイル指定先

ドメイン上のURL：x.com

# 2023/08/24 色が無理矢理インラインスタイルで変更されている部分などをメインにアップデート。大体違和感はなくなったと思う
# 2024/02/10 リプライで相手を選択するUIのチェックボックスが見えなくなっていた問題を修正。プロモツイートを非表示
# 2024/02/15 サイドバーのポストボタンが無理やり青くされたので上書き
# 2025/01/29 日々色々修正して良い感じになったと思ってたら意味わからん全画面表示に改悪されたのでそれも加えて修正したコードにした。最近はrole属性を使ってくれてるっぽく以前より指定しやすくなった
# 2025/02/15 右カラムが消えてたのがいつの間にか復活してたので一部コメントアウト

備考

• 筆者はGoogle Chromeを利用していて、ユーザーCSSはStylusという拡張機能を使用している

• TwitterのCSSコードは1スタイルにつき1つ用意されていて、必要な箇所に埋め込んでいくような形なので要素やエリアで指定するのが非常に困難なのであまりユーザーCSSでいじるのに適していない。すぐにclassが変更されて指定が外れてもおかしくないので、その辺りはご理解いただきたい

• もっと細かく、例えばhover時のアイコン色等変えることもできるのだが、上記の通り非常に煩雑で、こちらのアイコンはclassがあるのに隣のアイコンはclassが振られていない…みたいなことが多々あるため複雑なことはしていない

• Stylusの使い方は下記記事を参照