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

​​Amazonサービス

Amazonのアイコン

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

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

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

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

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

Amazonショッピングサイトのスクリーンショット

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

インストール方法

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

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

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

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

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

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

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

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

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

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

Stylebotのスクリーンショット2

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

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

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

Amazonのヘッダーメニューの高さ制限を撤廃して全部表示した画像

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

Amazonプライムビデオのヘッダーメニューの高さ制限を撤廃して全部表示した画像

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

感想

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

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

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

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

Amazonのヘッダーメニュー内にある項目間の余白を調整した画像

​​Amazonサービス