当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象（通称:ステマ規制）にならないよう、配慮して記事を作成しています（記事はこちら、消す方法はこちら）

参考：令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Amazon】検索候補をスタイリッシュコンパクトにするCSS

Amazon

Amazonのアイコン

この記事では、PCウェブサイト版「Amazon」の検索候補を、スタイリッシュ&コンパクトにするCSSを紹介します。

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

【Amazon】検索候補をスタイリッシュコンパクトにするCSS

通常、Amazonのヘッダーにある検索ボックスにフォーカスすると、検索履歴・予測候補が表示されます。この項目間の余白が少し広すぎると感じました。

Amazonショッピングサイトの検索候補画像

CSSを使って、もっとコンパクトにしてみます。具体的には、余白間の隙間を狭くします。さらに背景色を若干透過させることで、スタイリッシュ感を出してみます。

検索候補コンパクト化計画の記事は、色々なサイトで書いています。今回もその一環です。

インストール方法

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

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

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

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

Amazonの検索候補をカスタマイズするCSS

「Amazon」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

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

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

/*検索候補の背景*/
div#nav-flyout-searchAjax {
  background: linear-gradient(90deg, rgb(255 255 255 / 93%)30%, rgb(255 255 255 / 40%)) !important;
}

/*検索候補選択色*/
div#nav-flyout-searchAjax :is(.s-suggestion-container,.s-suggestion):hover {
  background-color: #929292 !important;
  overflow: hidden;
}

/*検索候補の高さ*/
div#nav-flyout-searchAjax .s-suggestion-container {
  height: 20px !important;
}

/*検索候補の余白*/
div#nav-flyout-searchAjax .s-suggestion-container > [role="button"] {
  padding: 0 10px !important;
}

とりあえず、そのままコピペして、後から自分好みにカスタマイズすればいいかなと思います。下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

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

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

Amazonで好きなキーワードを検索します。検索候補の項目間が狭くなって、コンパクトになります。背景色をグラデーションにして、左から右にかけて透明にしています。

Amazonショッピングサイトの検索候補をコンパクトにした画像1

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

項目間の余白調整

「検索候補の高さ」の「height」が項目の高さになっています。ここの数字を小さくすることで、よりコンパクトにできます。小さくしすぎると、項目が見切れるので注意です。

Amazonショッピングサイトの検索候補をコンパクトにした画像2

背景色（グラデーション）

「検索候補の背景」の「background」が背景色です。白をベースとしたグラデーションにしています。

ウェブサイトを強制的にダークモードにするChrome拡張機能「Dark Reader」を利用した場合は、ちゃんと反転してダークモードになってくれます。

Amazonショッピングサイトの検索候補をコンパクトにした画像3（Dark Reader利用時）

上記CSSだと、左から30％まで1番目の色、それ以降を2番目に指定した色に変化するようにしています。ここの変化位置を変更したい場合、CSS内のパーセントの数値を調整します。

例えば、80％の位置から透過させたい場合、以下のようにします。「30」を「80」に変えています。

/*検索候補の背景*/
div#nav-flyout-searchAjax {
  background: linear-gradient(90deg, rgb(255 255 255 / 93%)80%, rgb(255 255 255 / 40%)) !important;
}
Amazonショッピングサイトの検索候補をコンパクトにした画像4

そもそもグラデーションが不要な場合は、コードを書かないようにします。グラデーションの色を変えたい場合は、こちらのサイトを参考にしてみてください。

感想

以上、「Amazon」ショッピングサイトの検索候補をすっきりコンパクトにするCSSでした。

Amazon