【Stylebot】Twitterの左にある項目を個別に非表示するCSS

​2022年2月26日​​Twitter

Twitterのアイコン

この記事では、PCウェブサイト版「Twitter」の左側サイドバーにあるメニュー項目（ナビゲーション）を非表示にするCSSについて書きます。

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

【Stylebot】Twitterの左にある項目を個別に非表示するCSS

本記事のCSSを使うことで、「Twitter」の左側に表示されているサイドバーのナビゲーション項目を、個別に非表示できます。具体的には、以下の項目です。

  • ホーム
  • 話題を検索
  • 通知
  • メッセージ
  • Twitter Blue
  • ブックマーク
  • リスト
  • プロフィール
  • もっと見る

「ホーム」、「話題を検索」、「通知」の項目は表示して、メッセージ、ブックマークは非表示にする…といったように個別で調整できます。

デフォルトでは、以下のようになっています。使わない項目もきっとあると思います。非表示にしてスッキリさせると、快適なTwitter生活を送れるかもしれません。

Twitterの左側サイドバーにあるナビゲーション項目画像

「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

人によっては、こちらの方がおすすめかも？

CSSが苦手という方は、Chrome拡張機能・Firefoxアドオンがおすすめです。簡単操作で個別に非表示にできます。詳しくは、以下の記事を参考にしてみてください。

あるは、「Twitter UI Customizer」という拡張機能でも、同様に非表示にできます。本拡張機能は、非表示だけでなく、並び替え、ツイート下のボタンのカスタマイズなども可能です。Firefoxアドオンでの解説ですが、Chromeでも利用できます。

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

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

「Stylebot」のインストール手順画像

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

左側サイドバーの項目を個別に非表示するCSS

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

Stylebotのスクリーンショット

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。全部を利用する必要はありません。自分が使いたい項目だけをコピペしてみてください。

/*【左側項目非表示】ホーム*/
nav[aria-label="メインメニュー"] a[aria-label="ホーム"] {
  display: none !important;
}

/*【左側項目非表示】話題を検索*/
nav[aria-label="メインメニュー"] a[aria-label="調べたいものを検索"] {
  display: none !important;
}

/*【左側項目非表示】通知*/
nav[aria-label="メインメニュー"] a[aria-label="通知"] {
  display: none !important;
}

/*【左側項目非表示】ダイレクトメッセージ（DM）*/
nav[aria-label="メインメニュー"] a[aria-label="ダイレクトメッセージ"] {
  display: none !important;
}

/*【左側項目非表示】Twitter Blue*/
nav[aria-label="メインメニュー"] a[aria-label="Twitter Blue"] {
  display: none !important;
}

/*【左側項目非表示】ブックマーク*/
nav[aria-label="メインメニュー"] a[aria-label="ブックマーク"] {
  display: none !important;
}

/*【左側項目非表示】リスト*/
nav[aria-label="メインメニュー"] a[aria-label="リスト"] {
  display: none !important;
}

/*【左側項目非表示】プロフィール*/
nav[aria-label="メインメニュー"] a[aria-label="プロフィール"] {
  display: none !important;
}

/*【左側項目非表示】その他のメニュー項目*/
nav[aria-label="メインメニュー"] div[aria-label="その他のメニュー項目"] {
  display: none !important;
}

例えば、「ブックマーク」、「リスト」のみ非表示にしたい場合は、以下のCSSになります。

/*【左側項目非表示】ブックマーク*/
nav[aria-label="メインメニュー"] a[aria-label="ブックマーク"] {
  display: none !important;
}

/*【左側項目非表示】リスト*/
nav[aria-label="メインメニュー"] a[aria-label="リスト"] {
  display: none !important;
}

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

書き込んだ項目が削除されて、スッキリします。

ツイッターの左側の項目の「ブックマーク」、「リスト」を非表示にしてみた画像

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

テキストを透明化するCSS

テキストを透明にしたい場合は、以下のCSSを追加で書きます。

/*ナビゲーション項目のテキスト非表示*/
nav[aria-label="メインメニュー"] :is(a[aria-label], div[aria-label]) span {
  display: none !important;
}

テキストが非表示になって、アイコンのみ表示になります。

ナビゲーション項目のテキストを非表示にした画像

マウスホバーでテキストを表示するCSS

おまけ1だと、マウスを乗せてもテキストは表示されません。マウスを乗せた時にテキストを表示させたい場合は、以下のCSSになります。

/*ナビゲーション項目のテキスト非表示*/
nav[aria-label="メインメニュー"] :is(a[aria-label], div[aria-label]) span {
  opacity: 0;
  transition-duration: 0.4s;
}

/*ナビゲーション項目ホバー時にテキスト表示*/
nav[aria-label="メインメニュー"]:hover :is(a[aria-label], div[aria-label]) span {
  opacity: 1;
}

ナビゲーション項目の上にマウスを乗せると、ゆっくりと全体のテキストが表示されます。

ナビゲーション項目のテキストをマウスホバーで表示・非表示したGIF画像

感想

以上、「Twitter」の左側サイドバーにある「メッセージ」や「Twitter Blue」などのナビゲーション項目を非表示にする方法でした。

僕は、「リスト」を利用していないので、非表示にしています。2022年12月頃からは、再開した「Twitter Blue」項目も表示されるようになりましたね。こちらも使っていないので消しました。

​2022年2月26日​​Twitter