Posted at

Twitterの改悪をCSSでどーにかする

Twitterの改悪といえば、もうわかるでしょう。

image.png

この新UI。横方向スクロールバーという出してはならないものが!しかも横にハンバーガーを忘れたかのように1メニューが。しかもツイートボタンがカットされています!

モーメントを隠したのは誤字をやらかしたから、かもしれません(w)2が、他は「WHY!?」となるものばかり。

https://twitter.com/i/optout も動きません。なんでだ?

IE11では旧レイアウトだけど、IEを使い続けるのはNo!No!No!

でも私はプログラマ3。これをCSSでどうにかすればいいのでは? ということでやってみました。


ムズイ...

TwitterはReactを使っているようです。Reactではclass名やid名がランダムで指定に使えません。また、CSSではできないこともあります。(JSがらみとか)

ただ、不可能ではありません。結局こうしました:


CSS

以下のCSSをStylusなどで導入しましょう。

a[aria-label="Twitter"][role="button"] {

position:fixed;
top:10px;
left:25px;
pointer-events:auto;
z-index:50000000;
}
nav[aria-label="メインメニュー"] a[aria-label^="ホーム"], a[aria-label="調べたいものを検索"], a[aria-label="ブックマーク"], a[aria-label="リスト"]{
display:none;
}

[aria-label="その他のメニュー項目"] div div:nth-child(2) {
display:none;
}

[aria-label="その他のメニュー項目"] div div:nth-child(1) {
position:fixed;
right:150px;
pointer-events:auto;
top:25px;

}

a[aria-label="プロフィール"][role="link"] div div:nth-child(2) span{
display:none;
}

a[aria-label="プロフィール"][role="link"] {
position:fixed;
pointer-events:auto;
top:10px;
right:130px;
}

a[aria-label="ツイート"] {
position:fixed;
right:10px;
pointer-events:auto;
top:25px;
min-width:140px;
max-width:140px;
min-height:30px;
max-height:30px;
}

nav[aria-label="メインメニュー"] * div[dir="auto"] span{
font-size:11pt;
}

a[href="/notifications"] {
position:fixed;
pointer-events:auto;
top:10px;
left:100px;
}

a[href="/messages"] {
position:fixed;
top:10px;
pointer-events:auto;
left:200px;
}

header {
max-width:20vw;
pointer-events:none;
}

main {
position:relative;
top:65px;
z-index:0;
}

form[aria-label="キーワード検索"] {
position:fixed;
top:70px;
left:20px;
z-index:82857353525785;
pointer-events:auto;
}

form[aria-label="キーワード検索"] div{
position:relative;
z-index:6000000000;
}

form[aria-label="キーワード検索"] div div{
position:relative;
z-index:6000000000;
}

div[data-testid="primaryColumn"] {
max-width:65vw;
}

div[data-testid="sidebarColumn"] {
position:fixed;
top:70px;
left:20px;
max-width:15vw;
}

div[data-testid="sidebarColumn"] div div:nth-child(2){
max-width:20vw;
}

注意:

1. aria-labelを多量に使用しているため、言語設定が日本語以外では動きません。

2. けっこー誤作動あります。


見ろ! CSSの力を!

image.png


注釈





  1. ハンバーガーはありません。 



  2. 管理職を覗く国家公務員のこと。 



  3. 自称。