header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

サイト検索バーをカスタマイズする

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

検索バーの設定をカスタマイズする

プレースホルダテキスト(サイト訪問者が入力を開始する前に表示される最初のテキスト)を編集し、レスポンシブ性を微調整して検索バーをカスタマイズします。訪問者の種類に応じて結果を表示するか、入力を完了した後にのみ結果を表示するかを制御します。

検索バーの設定をカスタマイズする方法:

Wix エディタ
Wix Studio エディタ
  1. エディタ内で検索バーをクリックします。
  2. 設定」をクリックします。
エディタで「設定」をクリックするオプションが表示されたスクリーンショット。
  1. 検索バー設定をカスタマイズします:
    • 検索結果の候補とトレンドアイテム
      • サイト訪問者が入力した時に結果の候補を表示」トグルを有効または無効にして、検索する際に候補を表示または非表示にします。
      • サイト訪問者が入力する前にトレンドアイテムを表示」トグルを有効または無効にして、検索バーでトレンドアイテムを表示または非表示にします。
    • アイコンとテキスト:
      • 検索アイコンを表示」トグルを有効または無効にして、検索バーに検索アイコンを表示または非表示にします。
      • プレースホルダテキストを表示」トグルを有効または無効にして、検索バーにテキストを表示または非表示にします。
        • 有効にした場合:プレースホルダ欄にテキストを入力します(例:検索)
    • クリアボタン:
      • アイコン:検索バーに X アイコンを追加します。
      • テキスト:入力したテキストを含むボタンを検索バーに追加します。

検索バーのレイアウトを変更する

検索バーの配置や余白、全体的な構造を調整して、サイトのデザインとよりよく統合させます。

検索バーのレイアウトを変更する方法:

Wix エディタ
Wix Studio エディタ
  1. エディタ内で検索バーをクリックします。
  2. レイアウト」アイコン  をクリックします。
エディタで「レイアウト」アイコンをクリックするオプションが表示されたスクリーンショット。
  1. レイアウトオプション(ボタンありまたはボタンなし)を選択します。
  2. アイコンとテキストの配置と余白をカスタマイズします。
注意:
利用可能なレイアウトオプション(配置、余白)は、手順 3 で選択したレイアウトによって異なります。

検索バーのデザインをカスタマイズする

次の状態ごとに検索バーのデザインをカスタマイズすることができます:
  • 通常時:バーが使用されていないとき。
  • ホバー:訪問者がバーにマウスオーバーしたとき。
  • フォーカス:訪問者がバーをクリックしたとき。

検索バーのデザインをカスタマイズする方法:

Wix エディタ
Wix Studio エディタ
  1. エディタ内で検索バーをクリックします。
  2. デザイン」アイコン  をクリックします。
エディタで「デザイン」アイコンをクリックするオプションが表示されたスクリーンショット。
  1. プリセットデザインを選択します。
  2. デザインをカスタマイズ」をクリックして、さらにデザインを変更します。
    1. タブをクリックしてカスタマイズする状態をクリックします:「通常時」、「ホバー」、「フォーカス
    2. 利用可能な各状態の色、枠線、角、影、テキストをカスタマイズします。
検索バーの位置を変更する:
検索バーの位置を変更するには、検索バーをクリックしてサイトのヘッダーまたはフッターにドラッグしてください。