見出し画像

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;
}


いいなと思ったら応援しよう!