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

2021年11月30日Twitter

Twitterのアイコン

この記事では、「Twitter」(PC版ウェブサイト)の右側のサイドバー(おすすめユーザーなど)を非表示にするCSSについて書きます。

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

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

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

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

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

サイドバーが不要な場合、非表示にすることで、スッキリした見栄えにできます。うっかりポチポチクリックしちゃって、時間を無駄に過ごしてしまうのを防げます。

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

本記事最後に紹介しますが、タイムラインの横幅を広げるCSSと併用するといい感じです。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

右側のサイドバーを非表示にするCSS

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

一括で非表示にするCSS

Twitter」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

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

/*右側サイドバー下のメッセージポップアップ非表示*/
div[data-testid="DMDrawer"] {
  display: none;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:twitter.com)がオンになっていることを確認します。オンになっている間は有効になっているということです。

ごちゃごちゃしていた右側のサイドバーが、綺麗さっぱり消えます。

PC版Twitterの右側サイドバーを非表示にした画像

メッセージ(DM)ポップアップを消したくない場合、「右側サイドバー下のメッセージポップアップ非表示」のCSSを書かないようにします。

PC版Twitterのメッセージ(DM)ポップアップ画像

一時的に無効化したい場合は、Stylebot→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

「キーワード検索」だけは残したい場合

上記CSSだと、右側サイドバーの一番上にある「キーワード検索」も非表示になります。検索する手段が、「話題を検索」ページだけになってしまうので、人によっては不便かもしれません。

その場合、以下のCSSを使ってみてください。検索ボックス以外のサイドバー項目を非表示にします。

/*右側の検索ボックス以外のサイドバー項目非表示*/
div[data-testid="sidebarColumn"] div[aria-label="トレンド"]>div>div:not(:nth-of-type(1)) {
  display: none;
}

/*「話題を検索」ページのサイドバーのおすすめユーザー非表示*/
div[aria-label="トレンド"]>div>div:has([aria-label="おすすめユーザー"]) {
  display: none;
}
検索ボックスだけ表示して、他のサイドバー項目を非表示にした画像
合わせて読みたい

検索ボックスを左側サイドバーに移植することも可能です。詳しい解説・位置調整の方法などは、下記記事を参考にしてみてください。

個別で非表示にするCSS

「特定の項目は残したい!」という場合は、個別用のCSSを作成したので使ってみてください。自分が消したい項目だけ適用します。

/*自身がツイートした画像*/
.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1udh08x:has(div[data-testid="tweetPhoto"]) {
  display: none;
}

/*おすすめツイート、おすすめユーザー*/
.r-1867qdf.r-1phboty.r-rs99b7.r-1ifxtd0.r-1udh08x:has(div>aside[aria-label="おすすめユーザー"]) {
  display: none;
}

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

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

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

例えば、「トレンド(いまどうしてる?)」、「利用規約やプライバシーポリシーの文言」、「メッセージ(DM)」を適用した画像を貼っておきます。検索ボックスや自身の画像は表示されます。

キーワード検索、おすすめツイート(おすすめユーザー)以外の右側サイドバーを非表示にした画像

ライトモードやダークテーマ、どのテーマでも使えます。

ライトモードで、右側サイドバーを非表示にした画像

感想

以上、PC版ウェブサイトの「Twitter」の右側サイドバーを非表示にするCSSでした。

スッキリしていい感じです。合わせてタイムラインの横幅を広げることをおすすめします。スッキリしたサイドバーを有効活用できます。

Posted by ナポリタン寿司