【Twitter】左側サイドバーの項目を個別に非表示するCSS
本記事のCSSを使うことで、「Twitter」の左側に表示されているサイドバーのナビゲーション項目を、個別に非表示できます。具体的には、以下の項目です。
- ホーム
- 話題を検索
- 通知
- メッセージ
- リスト
- ブックマーク
- コミュニティ
- プレミアム
- Twitter Blue
- 認証済み組織
- プロフィール
- もっと見る
「ホーム」、「話題を検索」、「通知」の項目は表示して、「メッセージ」、「ブックマーク」は非表示にする…といったように個別で調整できます。
デフォルトでは、下記画像のようになっています。使わない項目が、きっとあると思います。非表示にしてスッキリさせると、快適な「Twitter」生活を送れるかもしれません。
CSSを利用します。CSSは自身の環境上だけの反映で、他人の見た目には影響しません。CSSを適用していないブラウザでアクセスした時は、いつも通り表示されます。いつでもオンオフできます。
本記事は、拡張機能を導入できるPCブラウザ向けの内容です。スマホやタブレットのアプリ版ではできません。
ぶっちゃけ拡張機能のほうがいい気がする
本記事を書いておきながら言うのもおかしな話ですが、個人的には「Twitter UI Customizer」拡張機能のほうがおすすめです。本記事と同じように、左側サイドバーの項目を非表示にできます。それどころか、好きなように並び替えられます。
他にも、各ツイートのメニューに、ミュートやブロック、ワンクリックでいいねとリポスト同時実行などのボタンを配置、表示回数や共有などの不要なボタンは非表示にする…といったように、自由自在にカスタマイズできます。
かなりの場所をカスタマイズでき、「X」に変わる前の快適な「Twitter」に近づけられます。詳しくは、下記記事を参考にしてみてください。
https://www.naporitansushi.com/twitter-ui-customizer/インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
左側サイドバーの項目を個別に非表示するCSS
「Twitter」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。
以下のコードを書き込みます。全部を利用する必要はありません。自分が使いたい項目だけをコピペしてみてください。
/*【左側項目非表示】ホーム*/
nav[aria-label="メインメニュー"] a[href="/home"] {
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;
}
/*【左側項目非表示】リスト*/
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="メインメニュー"] 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="メインメニュー"] div[aria-label="その他のメニュー項目"] {
display: none !important;
}本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
例えば、「コミュニティ」、「プレミアム」、「認証済み組織」のみ非表示にしたい場合は、以下のCSSになります。
/*【左側項目非表示】コミュニティ*/
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;
}書き込めたら、右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：twitter.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
書き込んだ項目が削除されて、スッキリします。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
テキストを透明化するCSS
テキストを透明にしたい場合は、以下のCSSを追加で書きます。
/*ナビゲーション項目のテキスト非表示*/
nav[aria-label="メインメニュー"] :is(a[aria-label], div[aria-label]) span {
display: none !important;
}テキストが非表示になって、アイコンのみ表示になります。
マウスホバーでテキストを表示するCSS
「テキストを透明化するCSS」だと、マウスを乗せてもテキストは表示されません。マウスを乗せた時に、テキストを表示させたい場合は、以下の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;
}ナビゲーション項目の上にマウスを乗せると、ゆっくりと全体のテキストが表示されます。
感想
以上、PCウェブサイト版「Twitter」の左側サイドバーにある「話題を検索」、「メッセージ」、「リスト」、「コミュニティ」、「プレミアム」、「認証済み組織」といった項目を、CSSで非表示にする方法でした。
僕は、「リスト」を利用していないので、非表示にしています。2022年12月頃からは「Twitter Blue」、2023年4月頃からは「認証済み組織」という項目が新しく追加されましたが、本記事で紹介したCSSを利用することで非表示にできます。