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

2021年11月30日Stylebot&Stylus

Stylebot のアイコン

この記事では、Twitter のサイドバーを非表示にするCSS について書きます。

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

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

CSS を使うことでTwitter の右側のサイドバーを非表示にできます。具体的にはおすすめユーザー、「いまどうしてる?」、利用規約などのフッター項目、メッセージです。

サイドバーが不要な場合は非表示にすることでスッキリした見栄えにできます。すべてまとめて非表示にする方法と個別に非表示にする2通りがあります。

サイドバーは使ってない!って方はぜひ試してみてください。

前提

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

初めてという方は以下の記事を参考にしてみてください。

CSS

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

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

サイドバー一括で非表示

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

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

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

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

ただし、上記CSS だと右上にある「キーワード検索」も非表示になります。それが嫌な場合は、個別に非表示にする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;
}

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

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

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

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

ダークブルー、ブラックのダークテーマを利用している場合の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;
}

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

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

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

「aria-label」は、どのテーマも共通しているので設定しやすいです。問題はテーマを変えるとセレクタが変動する項目ですね。

合わせて使いたいCSS

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

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

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

参考:【Stylebot】Twitter の横幅を広げるCSS。画面を有効活用してみよう! | ナポリタン寿司のPC日記
参考2:【Twitter】検索ボタンを左側に表示する方法。CSSを使ってみよう | ナポリタン寿司のPC日記

まとめ

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

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

Posted by ナポリタン寿司