大石泉のジト目は万病に効く

今はまだ効かないがそのうち効くようになる

Twitter UI完全に理解した

嘘です。

私はChromeからWeb AppクライアントでTwitterを使っているんですが、新UIの中央によったデザインが嫌いなので、カスタムCSSプラグインで左カラム(サイドバー)を最小化してTLをウィンドウ幅いっぱいに使わせることでツイート欄を広くとっていました。

何が嫌かって、自分のアカウント名が全部トップに表示されるので覗かれると簡単に身バレする。アイコンだけでバレるならそれはもう仕方ないとあきらめもつくが、全部丁寧にフロートフッターに書かれているとなれば話は別。



https://cdn.discordapp.com/attachments/1054620871404302376/1054623538381852733/image.png

私の慣れ親しんだTwitter UI。下はデフォルトの新UI。

https://cdn.discordapp.com/attachments/1054620871404302376/1054621240045883422/image.png





ところが、12月くらいからこのレイアウトが崩れ、サイドバーの文字がツイートカラムにかぶるようになりました。これは大変うれしくない。



https://cdn.discordapp.com/attachments/1054620871404302376/1054622045977202789/image.png

ツイートカラムが侵食されている様子。



というわけで、カスタムCSSの方をいじってサイドバーの文字を消すことにしました。

編集開始

環境

2022.12現在Good TwitterではもはやTwitterにアクセスできなくなりましたが、Stylish/Better Twitter redesignはリリース当時から変わらず使用でき、今までほとんどバグが起きていないプラグインです。実に優秀。



方針

とりあえず文字さえ出てこなくなれば差し当たっての問題は解決されるため、サイドバーの文字ブロックにdisplay: none;をつけることで強引に解決します。



実装

ということで、文字ブロックに固有のクラスを探します。Ctrl+Shift+Cでカーソル選択によるinspectを行い、styleからチェックを入れたり切ったりしてサイドバーだけに影響がでそうなものを探します。



https://cdn.discordapp.com/attachments/1054620871404302376/1054622644072357918/image.png

いろいろとチェックを外してみる。



この文字はウィンドウ幅が1280pxを超えないと出現しないらしく、わざわざdevice toolbarまで出して幅を指定してやる必要があり、実にふぁっきんな作業でした。



クラス特定

サイドバーの文字に左marginを入れるだけのクラスとみられる.r-88pszgが見つかり、これにdisplay: none;を足してやることで解決しました。

div.r-88pszg {
    display: none;
}

作業完了

CSSに書き足した内容を保存し、更新して確認。

https://cdn.discordapp.com/attachments/1054620871404302376/1054622930329415710/image.png

文字が出なくなった。ついでにTweetボタンも微妙にはみ出ていて鬱陶しかったので消した。



うん、OK。また問題が出てきたらそのときにいじろう。



というわけで、以上、CSSをいじると配置や表示程度ならなんとかできるという話でした。クラス名などは人によっては違うかもしれませんが、簡単に調べられるのでChromeTwitterの見た目をいじりたい人はぜひ。