【Stylebot】Twitterのサイドバーを非表示にするCSS

2021年11月30日Stylebot&Stylus

Stylebotのアイコン

この記事では、Twitter(PC版ウェブサイト)のサイドバーを非表示にするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

CSSでサイドバーを非表示にしたTwitter

CSSを使うことで、Twitterの右側のサイドバーを非表示にできます。

具体的には、以下の6つを非表示にできます。一括非表示、または個別に非表示できます。

  • おすすめツイート
  • おすすめユーザー
  • 自分が投稿した画像
  • 「いまどうしてる?」
  • 利用規約などのフッター項目
  • メッセージ(DM)

サイドバーが不要な場合、非表示にすることでスッキリした見栄えにできます。おすすめユーザーとか不要だと思うので、思い切って消した方が、快適になるかなと思います。余計なものが表示されていたら、無駄に時間をダラダラ過ごしてしまいます。

いつでも元に戻せるので、気兼ねなく試せます。「右側サイドバーは使っていない!邪魔なだけで!」という方、ぜひ試してみてください。

前提

この記事では、Stylebotを既にインストールして、なおかつ簡単な使い方を知っている前提で書きます。

初めてという方は、以下の記事を参考にしてみてください。ウェブサイトにCSSを適用できる拡張機能です。Chrome拡張機能だけでなく、Firefoxアドオンも用意されています。

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。

CSS

僕は、CSSのプロでも何でもありません。あくまで開発者ツールで確認して作成しただけの素人です。効率悪い・汚いCSSかもしれませんので、ご了承ください。

サイドバーをまとめて全て非表示にするCSSと、個別に非表示にするCSSの2種類紹介します。

サイドバー一括で非表示

書き込むコードは、以下になっています。

/*サイドバー一括*/
div[data-testid="sidebarColumn"] {
  display: none; /*非表示*/
}

以下画像のようになればOKです。ごちゃごちゃしていた右側のサイドバーが綺麗さっぱり消えます。

非表示になったサイドバー

ただし、上記CSSだと右上にある「キーワード検索」も非表示になります。それが嫌な場合は、以下のCSSを使ってみてください。検索ボックス以外のサイドバー項目を非表示にします。

/*右側の検索ボックス以外のサイドバー項目非表示*/
div[data-testid="sidebarColumn"]>div>div>div>div>div div:not(:nth-of-type(-n+2)) {
  display: none;
}
検索ボックスだけ表示して、他のサイドバー項目を非表示にした画像

個別非表示-ライトテーマ

ライトテーマとダークテーマ(ブラック、ダークブルー)によって、使うCSSが異なるので、ご自身が使っているテーマによって使い分けてください。ダークをお使いの方は、こちらのCSSになります。

Twitterにアクセス→左側の「もっと見る」→表示をクリックします。

もっと見る 表示

背景画像を選びます。これでテーマが変更されます。

表示をカスタマイズする

デフォルトの白背景のテーマを利用している場合は、以下のCSSになります。

/*トレンド(いまどうしてる?)*/
div[aria-label="タイムライン: トレンド"] {
  display: none; /*非表示*/
}

/*おすすめユーザー*/
.css-1dbjc4n.r-x572qd.r-1d6w8o1.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1bro5k0.r-1udh08x {
  display: none; /*非表示*/
}

/*おすすめツイート*/
.css-1dbjc4n.r-x572qd.r-1d6w8o1.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1bro5k0.r-1udh08x {
    display: none; /*非表示*/
}

/*利用規約やプライバシーポリシーの文言*/
nav[aria-label="フッター"] {
  display: none; /*非表示*/
}

/*サイドバーの画像*/
.css-1dbjc4n.r-14lw9ot.r-jxzhtn.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1udh08x {
  display: none; /*非表示*/
}

/*メッセージ(DM)*/
div[data-testid="DMDrawer"] {
  display: none; /*非表示*/
}

例えば、「おすすめユーザー」と「おすすめツイート」だけを適用した場合、検索ボックスや「いまどうしてる?」はこれまで通り表示されます。

CSSで「おすすめユーザー」と「おすすめツイート」を非表示にした画像

個別非表示-ダークテーマ

ダークブルー、ブラックのダークテーマを利用している場合は、以下のCSSになります。

/*トレンド(いまどうしてる?)*/
div[aria-label="タイムライン: トレンド"] {
  display: none; /*非表示*/
}

/*おすすめユーザー*/
.css-1dbjc4n.r-1uaug3w.r-1uhd6vh.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1bro5k0.r-1udh08x {
  display: none; /*非表示*/
}

/*おすすめツイート*/
.css-1dbjc4n.r-g6ijar.r-74htps.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1bro5k0.r-1udh08x {
  display: none; /*非表示*/
}

/*利用規約やプライバシーポリシーの文言*/
nav[aria-label="フッター"] {
  display: none; /*非表示*/
}

/*サイドバーの画像*/
.css-1dbjc4n.r-yfoy6g.r-18bvks7.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1udh08x {
  display: none; /*非表示*/
}

/*メッセージ(DM)*/
div[data-testid="DMDrawer"] {
  display: none; /*非表示*/
}

「aria-label」は、どのテーマも共通しているので設定しやすいです。「div[aria-label="タイムライン: トレンド"]」や、「nav[aria-label="フッター"]」は、どのテーマを使っていても適用されます。

テーマを変えるとセレクタが変動する「おすすめユーザー」や「サイドバーの画像」が厄介ですね。

合わせて使いたいCSS

タイムラインの横幅を広くするCSS、検索欄を表示している場合はキーワード検索を左側に移動するCSSとの併用がおすすめです。

Twitterの検索ボックスを左上に配置した画像

「どーせ右側のサイドバーを非表示にするんだったら、そのスペースをタイムラインを広くして有効活用しよう!」ってわけです。

詳しくは、以下の2つの記事を参考にしてみてください。

感想

以上、Twitterのサイドバーを非表示にするCSSについてでした。

サイドバー使ってなかったので便利です。

Posted by ナポリタン寿司