10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Twitter がやたら丸くなったので反抗して真四角にしてやるCSS

Last updated at Posted at 2017-06-15

はじめに

2017/6/16 0時頃、突如として Web 版 Twitter があちこち丸くなる現象が発生しました。同様の変更がモバイルアプリや TweetDeck にも適用されています。
思えば数日前からボタンの角が丸くなっていたので、UI 変更の予兆だったのかもしれませんね。

スクリーンショット 2017-06-16 01.51.38.png

CSS を覗いてみると .edge-design というクラスが出現していて、ここにある border-radius:50% が各所に適用されているようです。 (L_tan さんありがとうございます)

Twitter を眺めてると(少なくとも自分の観測範囲では)阿鼻叫喚なので、どうせだったら徹底的に対抗してやる!と思い、全部 border-radius:0px にしてやりました

やり方

  1. Stylish というアドオンをインストールします。
  2. URL に twitter.com を指定して、以下の CSS を入力します。
tofu.css
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("twitter.com") {
  * {
      border-radius: 0px !important; 
  }

  .global-nav .search-input
  {
	  padding: 8px 32px 8px 8px;
  }
  
  .RichEditor div[contenteditable],
  .RichEditor div[contenteditable]:focus,
  .RichEditor div.fake-focus[contenteditable]
  {
	  padding: 8px 8px;
  }
}

ユニバーサルセレクタが効かなくてクラスちまちま追加してたんですが !important の存在を忘れていました……

こんな感じになります。エッジが効いてますね。

スクリーンショット 2017-06-16 01.46.27.png

おわりに

サッポロビールも「丸くなるな、星になれ。」と言っているので、あとはいいねをふぁぼに戻したら完璧だと思います(適当)。
適当に作ったので、ご指摘ありましたらよろしくお願いします。

10
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?