Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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. 自称。 

apple502j
Logo is by me, CC BY-SA 2.0
https://github.com/apple502j
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away