StylusでWEB版のTwitterを雑に見やすくする

生活

トレンドを非表示にして、メインカラムを大きくする。

f:id:naoto5959:20200806093915p:plain

[data-testid="sidebarColumn"] {
    display: none;
}

[data-testid="primaryColumn"] {
    max-width: 95%;
}

[data-testid="primaryColumn"] * {
    max-width: 100%;
}

カスタマイズ時のHMTLの要素の指定は、「なるべく変更に強そうな属性」を使ったカスタマイズを検討する。Twitter の HTML に指定されるCSS クラス要素は機械的なものが多かったので、なるべく意味がありそうな属性を探してみた。今回のスタイルシートは、ユーザーのA/Bテストでデザインが違う場合には対処できないかも知れない。

デザインが崩れたら、またそれらしい属性を探すこととする。

Stylusとは

ブラウザにユーザースタイルシートを適用するプラグイン。普段見ているサイトのデザインを自分好みに調整できる。

github.com

https://github.com/openstyles/stylus#releases Releases

  1. Chrome Web Store (or beta)
  2. Firefox add-ons
  3. Opera add-ons (see wiki for more recent version)

Stylusには各種ブラウザの機能拡張が存在するので、好きなものを使う。