【Amazon】ヘッダー項目を隠さず全行表示するCSS
本記事で紹介するCSSを使えば、Amazonのヘッダーメニュー(検索ボックス下の項目)を複数行表示にできます。
ヘッダーメニューとは、検索ボックス下にある「Amazonポイント」、「カスタマーサービス」、「タイムセール」といったボタンがあるバーのことです。通常は、一行だけになっていて、ウィンドウサイズによって表示する項目数が変動します。

ここの部分を、行数撤廃して、全部の項目が表示されるようにできます。その分スペースを取ってしまうので、需要があるかは分かりませんが、メモとして書きます。僕は使っていません。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
ヘッダーメニューを全部表示するCSS
「Amazon」にアクセスします。右上の拡張機能アイコン→「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;
}
きゅっと縮まって、スッキリします。
