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

2021年11月30日2024年8月18日X(旧Twitter)

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

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

PCウェブサイト版「X（旧Twitter）」の右側サイドバーをCSSで非表示にした画像

本記事のCSSを使うことで、PCウェブサイト版「X（旧Twitter）」の右側サイドバーを非表示にできます。具体的には以下の6つを非表示にします。一括非表示、または個別に非表示にできます。

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

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

いつでも元に戻せるので気兼ねなく試せます。「右側サイドバーは使っていない！邪魔なだけだから消したい！」という方試してみてください。本記事の最後に紹介しますが、タイムラインの横幅を広げるCSSと併用するといい感じです。

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

インストール方法

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

Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Unknown Title

Unknown ...

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

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

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

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

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

一括で非表示にするCSS

「X（旧Twitter）」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

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

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

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

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

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

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

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

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「x.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;
}

PC版「X（旧Twitter）」の右側サイドバーにある検索ボックスだけ表示して、他項目を非表示にした画像

合わせて読みたい

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

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