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

Stylebot&Stylus

Stylebotのアイコン

この記事では、Twitterの左側にあるメニュー項目(ナビゲーション)を非表示にするCSSについて書きます。

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

Twitterのナビゲーション項目の一部を非表示にするCSS

Twitterの左側に表示されているメニュー項目(ナビゲーション)を、個別に非表示にするCSSです。具体的には、以下の項目を非表示にできます。

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

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

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

Twitterのナビゲーション項目
人によっては、こちらの方がおすすめかも?

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

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

ポイント

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。

こちらは、ウェブパネル内にもCSSを適用できます。

CSS

書き込むコードは、以下になっています。全部を利用する必要はありません。自分が使いたい項目だけをコピペしてみてください。

/*---------------------------------------
左側のナビゲーション項目非表示
※全部適用する必要はありません。
必要な項目だけ抜粋して利用してみてください。
----------------------------------------*/
/*ホーム*/
nav[aria-label="メインメニュー"] a[aria-label="ホーム"] {
  display: none;
}

/*キーワード検索*/
nav[aria-label="メインメニュー"] a[aria-label="調べたいものを検索"] {
  display: none;
}

/*通知*/
nav[aria-label="メインメニュー"] a[aria-label="通知"] {
  display: none;
}

/*ダイレクトメッセージ(DM)*/
nav[aria-label="メインメニュー"] a[aria-label="ダイレクトメッセージ"] {
  display: none;
}

/*ブックマーク*/
nav[aria-label="メインメニュー"] a[aria-label="ブックマーク"] {
  display: none;
}

/*リスト*/
nav[aria-label="メインメニュー"] a[aria-label="リスト"] {
  display: none;
}

/*プロフィール*/
nav[aria-label="メインメニュー"] a[aria-label="プロフィール"] {
  display: none;
}

/*その他のメニュー項目*/
nav[aria-label="メインメニュー"] div[aria-label="その他のメニュー項目"] {
  display: none;
}

/*---------------------------------------
左側のナビゲーション項目非表示終了
----------------------------------------*/

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

/*ブックマーク*/
nav[aria-label="メインメニュー"] a[aria-label="ブックマーク"] {
  display: none;
}

/*リスト*/
nav[aria-label="メインメニュー"] a[aria-label="リスト"] {
  display: none;
}

実際に適用してみた比較画像を貼っておきます。ナビゲーション項目がしゅっとして、いい感じです。

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

【おまけ】テキスト透明化

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

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

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

ナビゲーション項目のテキストが非表示になる

【おまけ2】ホバーでテキスト表示

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

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

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

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

感想

以上、Twitterの左側にある項目を非表示にするCSSについてでした。

僕は、ブックマークとリストを利用していないので、非表示にしています。

Posted by ナポリタン寿司