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

2023年1月21日Twitter

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

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。

本記事のCSSを使うことで、PCウェブサイト版「Twitter」の右側サイドバーを非表示にできます。

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

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

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

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

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

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

1. インストール方法
2. 右側のサイドバーを非表示にするCSS
3. 感想

インストール方法

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

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

Stylebot - Chrome ウェブストア

ウェブの外観を瞬時に変更

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

Firefox・Edgeをご利用の場合

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

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

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

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

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

一括で非表示にするCSS

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

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

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

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

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

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

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

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

一時的に無効化したい場合は、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;
}

合わせて読みたい

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

【Stylebot】Twitterの検索ボタンを左側に移動するCSS

この記事では、PCで見た時Twitterウェブサイトの検索ボタンを、左側に表示する方法について書きます。 ...

https://www.naporitansushi.com/twitter-search-move-left-css/

個別で非表示にする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)」を適用した画像を貼っておきます。検索ボックスや自身の画像は表示されます。