【Stylebot】Twitterの右側のサイドバーを非表示にするCSS
本記事のCSSを使うことで、PCウェブサイト版「Twitter」の右側サイドバーを非表示にできます。
具体的には、以下の6つを非表示にします。一括非表示、または個別に非表示にできます。
- おすすめツイート
- おすすめユーザー
- 自分が投稿した画像
- 「いまどうしてる?」
- 利用規約などのフッター項目
- メッセージ(DM)
サイドバーが不要な場合、非表示にすることで、スッキリした見栄えにできます。うっかりポチポチクリックしちゃって、時間を無駄に過ごしてしまうのを防げます。
いつでも元に戻せるので、気兼ねなく試せます。「右側サイドバーは使っていない!邪魔なだけだから消したい!」という方、試してみてください。
本記事の最後に紹介しますが、タイムラインの横幅を広げるCSSと併用するといい感じです。
「Stylebot」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
右側のサイドバーを非表示にする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;
}

検索ボックスを左側サイドバーに移植することも可能です。詳しい解説・位置調整の方法などは、下記記事を参考にしてみてください。
個別で非表示にする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でした。
スッキリしていい感じです。合わせてタイムラインの横幅を広げることをおすすめします。スッキリしたサイドバーを有効活用できます。