
X君UIどうしちゃったの?
X君さぁ……
元々アレだったけどさすがに投げっぱなしすぎる。
右カラム無くなったのは別にいいけど左カラムどうしたよ……?
というわけでちょっとだけ使いやすいように修正してあげた。

CSSコード
/* 2025.01.29 X update */
#react-root{
width: 650px !important;
}
.r-1elnebe{
width: 550px !important;
border-right: 1px solid #222 !important;
}
button[aria-label="ナビゲーションを切り替え"]{
display: none !important;
}
.r-1c4mltk{
width: 85px !important;
border-right: 1px solid red !important;
}
header[role="banner"] .r-1rnoaur{
height: 100% !important;
padding: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
justify-content: start;
}
/* 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;
}
.r-1igl3o0{
border: none !important;
padding: 0.5rem 0 1.2rem !important;
}
div[role="tablist"] div[role="presentation"] a {
display: block !important;
height: auto !important;
padding: 0.5em 0.8em !important;
border-bottom: 2px solid inherit !important;
border-radius: 5px !important;
text-align: center !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;
}
補足
筆者はGoogle Chromeを利用していて、ユーザーCSSはStylusという拡張機能を使用している
コメントアウトしてる「menu drawer on」の部分は、左カラムメニューのドロワー(テキストメニュー)を出して使う場合は、そちらのコメントアウトを外して使用。自分は閉じて使ってる
キャプチャ画像のアクセントカラーが赤いのはXは赤い方が良い感じなので趣味で変えてるので、各種色はお好みで調整を
現在筆者が使ってるCSSコードは以前の記事に記載
https://note.com/sameashark/n/nf7ba4febdd7dもしセンタリングがお好みなら以下のコードを追加
body {
width: 900px !important;
margin: 0 auto !important;
}