ブラウザの拡張機能で Twitter リストページのヘッダ画像を消した

Twitter からは離れられない人生を送っているが、基本的には Timeline ではなく List を活用している。

いつからか List ページに下の画像のようなヘッダ？画像がつくようになった。

メインカラムを無駄に狭めるヘッダ

自分で画像を設定できるでもなし、リストの内容と関連してるわけでもなし、リスト名のエリアと合わせてメインカラム（３カラムの真ん中）のほぼ上半分を占めて、リストの内容がほとんど画面内に表示されないことにかなり不満を感じていた。

なので、ブラウザの拡張機能で、自分でカスタムスタイルを当ててしまうことにした。

Chrome 拡張・Firefox のアドオン両方に Stylus というのがあるのでそれを使った。

add0n.com

指定するスタイルのセレクタは、Chrome の開発者ツールでソースコードの該当箇所を見つけて 右クリック → [Copy] → [Copy selector] がかんたん。

今のところ以下のようなスタイルを適用している。

#react-root > div > div > div.css-1dbjc4n.r-18u37iz.r-1pi2tsx.r-13qz1uu.r-417010 > main > div > div > div > div.css-1dbjc4n.r-yfoy6g.r-18bvks7.r-1ljd8xs.r-13l2t4g.r-1phboty.r-1jgb5lz.r-11wrixw.r-61z16t.r-1ye8kvj.r-13qz1uu.r-184en5c > div > div.css-1dbjc4n.r-1jgb5lz.r-1ye8kvj.r-13qz1uu > div > section > div > div > div:nth-child(1) > div > div.css-1dbjc4n.r-1adg3ll.r-1udh08x > div {
  padding-bottom: 0 !important;
}

#react-root > div > div > div.css-1dbjc4n.r-18u37iz.r-1pi2tsx.r-13qz1uu.r-417010 > main > div > div > div > div.css-1dbjc4n.r-yfoy6g.r-18bvks7.r-1ljd8xs.r-13l2t4g.r-1phboty.r-1jgb5lz.r-11wrixw.r-61z16t.r-1ye8kvj.r-13qz1uu.r-184en5c > div > div.css-1dbjc4n.r-1jgb5lz.r-1ye8kvj.r-13qz1uu > div > section > div > div > div:nth-child(1) > div > div.css-1dbjc4n.r-1adg3ll.r-1udh08x > div.r-1p0dtai.r-1pi2tsx.r-1d2f490.r-u8s1d.r-ipm5af.r-13qz1uu > div {
  display: none;
}

クラス名がちょっと変わっただけでも無効になってしまうのが難点だけど、ほんとストレスだったのでいったんこれで。

消えたヘッダ画像エリア