【Amazon】ヘッダー項目を隠さず全行表示するCSS

2023年1月5日Amazon

この記事では、「Amazon」のヘッダーメニュー（検索ボックス下の項目）を一行ではなく、全項目表示するCSSについて書きます。

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

本記事で紹介するCSSを使えば、Amazonのヘッダーメニュー（検索ボックス下の項目）を複数行表示にできます。

ヘッダーメニューとは、検索ボックス下にある「Amazonポイント」、「カスタマーサービス」、「タイムセール」といったボタンがあるバーのことです。通常は、一行だけになっていて、ウィンドウサイズによって表示する項目数が変動します。

ここの部分を、行数撤廃して、全部の項目が表示されるようにできます。その分スペースを取ってしまうので、需要があるかは分かりませんが、メモとして書きます。僕は使っていません。

インストール方法

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

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

Stylebot

ウェブの外観を瞬時に変更

 https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

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

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

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

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

ヘッダーメニューを全部表示するCSS

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

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

/*ヘッダーの高さ制限を撤廃して全ての項目を表示*/
#navbar.nav-bluebeacon #nav-xshop {
  max-height: none !important;
  overflow: auto !important;
}

.nav-fill,div#nav-main,.nav-left {
  max-height: none !important;
}

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

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

「max-height」が高さ制限です。ここの部分を「none」にして、制限を解除しています。さらに「overflow」で全部の項目を表示するようにしています。

これで、Amazon上のヘッダーメニューが全部表示されます。僕の環境だと、3行になりました。こんなに隠れていたんだと驚きです。全部のジャンルがあるようです。

ショッピングサイトだけでなく、プライムビデオ上でも同様に全部表示されます。

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.amazon.co.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、「Amazon」の検索ボックス下にあるヘッダーメニューを全部表示するCSSでした。

スペースを取られるのが嫌な場合は、下記コードを追加で書き込むといいかもしれません。ヘッダーメニュー内の項目の余白具合を調整します。

/*ヘッダーメニューの高さを縮める*/
#navbar.nav-bluebeacon #nav-xshop a {
  margin: 1px 0 !important;
  padding: 4px 6px !important;
}

きゅっと縮まって、スッキリします。