Twitterの余計な部分を非表示にするCSS

2020/12/22

CSS Twitter

Twitterの余計な要素をCSSから無理やり非表示にする方法です。

はじめに

最初は、簡単に表示非表示を切り替えられるようなChrome拡張機能を作る予定だったのですが、あまり需要がない上に面倒だったので諦めました。

せっかくなので、CSSだけでも共有しておきます。

CSSをページに適用できる拡張機能もあるみたいなので、そういうところで使えるかと思います。

自分は右下の「メッセージ」非表示だけ使っていますw

CSS

.css-1dbjc4n.r-cgjvx2 {
  /*右下「メッセージ」非表示*/
  display: none !important;
}


body{
  /*背景色変更*/
  background-color: #d0f2fb !important;
}

.r-1n1174f.r-1loqt21.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0{
  /*ハッシュタグ色変更*/
  color: #ff0000;
}

.r-1pi2tsx.r-1wtj0ep.r-1rnoaur.r-utggzx{
  /*左バー全て非表示*/
  display: none !important;
}

.r-aqfbo4.r-zso239.r-1hycxz{
  /*右バー全て非表示*/
  display: none !important;
}

.r-1u4rsef.r-9cbz99.r-1ylenci.r-1phboty.r-rs99b7.r-ku1wi2.r-1bro5k0.r-1udh08x {
  /*おすすめユーザー非表示*/
  display: none !important;
}

.r-k4xj1c.r-18u37iz.r-1wtj0ep{
  /*名前非表示*/
  display: none !important;
}

.r-18u37iz.r-1wtj0ep.r-156q2ks.r-1mdbhws{
  /*いいねバー非表示*/
  display: none !important;
  height: 0px !important;
}

.r-9x6qib.r-1ylenci.r-1phboty.r-rs99b7.r-1ny4l3l.r-1udh08x{
  /*メディア非表示*/
  display: none !important;
  height: 0px !important;
}

.r-18u37iz.r-1wbh5a2.r-1f6r7vd{
  /*ID非表示*/
  display: none !important;
}

.r-1awozwy.r-18kxxzh.r-zso239{
  /*アイコン非表示*/
  display: none !important;
}

.r-9x6qib.r-1ylenci.r-rs99b7.r-1loqt21.r-dap0kf.r-1ny4l3l.r-1udh08x.r-o7ynqc{
  /*引用元非表示*/
  display: none !important;
  height: 0px !important;
}

.r-1loqt21.r-1ny4l3l.r-1udh08x.r-1j3t67a.r-1vvnge1.r-o7ynqc.r-6416eg{
  /*このスレッドを表示 非表示*/
  display: none !important;
}

.r-1iusvr4.r-16y2uox.r-atwnbb{
  /*返信をさらに表示 非表示*/
  display: none !important;
}

.r-9x6qib.r-1ylenci.r-1phboty.r-rs99b7.r-1ny4l3l.r-1udh08x.r-o7ynqc.r-6416eg{
  /*タグ,URL非表示*/
  display: none !important;
  height: 0px !important;
}
.r-1n1174f.r-1loqt21.r-1qd0xha.r-ad9z0x.r-bcqeeo.r-qvutc0{
  /*タグ,URL非表示*/
  display: none !important;
  height: 0px !important;
}

.r-1re7ezh.r-1loqt21.r-1tl8opc.r-n6v787.r-16dba41.r-1sf4r6n.r-bcqeeo.r-qvutc0{
  /*メディアタグ非表示*/
  display: none !important;
  height: 0px !important;
}

.r-1niwhzg.r-vvn4in.r-u6sd8q.r-x3cy2q.r-1p0dtai.r-xoduu5.r-1pi2tsx.r-1d2f490.r-u8s1d.r-zchlnj.r-ipm5af.r-13qz1uu.r-1wyyakw{
  /*emoji非表示*/
  display: none !important;
}

.r-1re7ezh.r-1tl8opc.r-16dba41.r-bcqeeo.r-qvutc0{
  /*〇〇さんによる 非表示*/
  display: none !important;
}

.r-1u4rsef.r-9cbz99.r-1ylenci.r-1phboty.r-rs99b7.r-ku1wi2.r-1udh08x{
  /*タイムライン画面のトレンド非表示*/
  display: none !important;
}

.r-1awozwy.r-aqfbo4.r-14lw9ot.r-18u37iz.r-1h3ijdo.r-15d164r.r-1vsu8ta.r-1xcajam.r-ipm5af.r-1hycxz.r-136ojw6{
  /*検索ボックス非表示*/
  display: none !important;
}

.r-14lw9ot.r-atwnbb{
  /*ツイート画面非表示*/
  display: none !important;
}
.r-e84r5y.r-1or9b2r{
  /*ツイート画面非表示*/
  display: none !important;
}

.r-jw8lkh.r-e7q0ms{
  /*ツイートする非表示*/
  display: none !important;
}
.r-vpgt9t.r-e7q0ms{
  /*ツイートする非表示*/
  display: none !important;
}

.r-1awozwy.r-18u37iz.r-156q2ks{
  /*「〇〇によるプロモーション」非表示*/
  display: none !important;
  height: 0px !important;
}

.r-1iusvr4.r-16y2uox.r-m611by{
  /*「〇〇さんが〇〇しました」非表示*/
  display: none !important;
}

Twitterの余計な部分を非表示にするCSS

Contents

はじめに

CSS

Comments