サイト検索バーをカスタマイズする
5分
Wix サイト検索を使用すると、訪問者はサイト上のあらゆるものを検索できるようになります。このアプリにはフルカスタマイズが可能な検索バーが付属しており、ニーズに合わせて検索バーの外観と機能をカスタマイズすることができます。
重要:
Wix Studio エディタでは、Wix エディタにはまだない新しい検索機能を追加することができます。Wix Studio エディタのテンプレートを使用してサイトが作成された場合、古いサイト検索要素を削除し、サイトに Wix サイト検索アプリを追加して新しい検索体験を有効にする必要があります。

ヒント:
検索結果が表示される検索結果ページをカスタマイズすることも可能です。
検索バーの設定をカスタマイズする
プレースホルダテキスト(サイト訪問者が入力を開始する前に表示される最初のテキスト)を編集し、レスポンシブ性を微調整して検索バーをカスタマイズします。訪問者の種類に応じて結果を表示するか、入力を完了した後にのみ結果を表示するかを制御します。
検索バーの設定をカスタマイズする方法:
Wix エディタ
Wix Studio エディタ
- エディタ内で検索バーをクリックします。
- 「設定」をクリックします。

- 検索バー設定をカスタマイズします:
- 検索結果の候補とトレンドアイテム:
- 「サイト訪問者が入力した時に結果の候補を表示」トグルを有効または無効にして、検索する際に候補を表示または非表示にします。
- 「サイト訪問者が入力する前にトレンドアイテムを表示」トグルを有効または無効にして、検索バーでトレンドアイテムを表示または非表示にします。
- アイコンとテキスト:
- 「検索アイコンを表示」トグルを有効または無効にして、検索バーに検索アイコンを表示または非表示にします。
- 「プレースホルダテキストを表示」トグルを有効または無効にして、検索バーにテキストを表示または非表示にします。
- 有効にした場合:プレースホルダ欄にテキストを入力します(例:検索)
- クリアボタン:
- アイコン:検索バーに X アイコンを追加します。
- テキスト:入力したテキストを含むボタンを検索バーに追加します。
- 検索結果の候補とトレンドアイテム:
検索バーのレイアウトを変更する
検索バーの配置や余白、全体的な構造を調整して、サイトのデザインとよりよく統合させます。
検索バーのレイアウトを変更する方法:
Wix エディタ
Wix Studio エディタ
- エディタ内で検索バーをクリックします。
- 「レイアウト」アイコン
をクリックします。

- レイアウトオプション(ボタンありまたはボタンなし)を選択します。
- アイコンとテキストの配置と余白をカスタマイズします。
注意:
利用可能なレイアウトオプション(配置、余白)は、手順 3 で選択したレイアウトによって異なります。
検索バーのデザインをカスタマイズする
次の状態ごとに検索バーのデザインをカスタマイズすることができます:
- 通常時:バーが使用されていないとき。
- ホバー:訪問者がバーにマウスオーバーしたとき。
- フォーカス:訪問者がバーをクリックしたとき。
検索バーのデザインをカスタマイズする方法:
Wix エディタ
Wix Studio エディタ
- エディタ内で検索バーをクリックします。
- 「デザイン」アイコン
をクリックします。

- プリセットデザインを選択します。
- 「デザインをカスタマイズ」をクリックして、さらにデザインを変更します。
- タブをクリックしてカスタマイズする状態をクリックします:「通常時」、「ホバー」、「フォーカス」
- 利用可能な各状態の色、枠線、角、影、テキストをカスタマイズします。
検索バーの位置を変更する:
検索バーの位置を変更するには、検索バーをクリックしてサイトのヘッダーまたはフッターにドラッグしてください。