サイト検索バーをカスタマイズする
読了時間：4分
Wix サイト検索の検索バーを使用して、訪問者がサイト上で検索できるようにしましょう。検索結果はリストに表示されるため、訪問者は探しているものを簡単に見つけることができます。サイトのデザインに合わせて、検索バーのレイアウトとデザインを変更できます。
サイトのデザインと合うように検索バーのレイアウトとデザインを変更できます。
この記事では、以下の項目について説明します：
検索バーの設定をカスタマイズする
検索バーのプレースホルダテキストと結果のサジェスト（候補）をカスタマイズします。
検索バーの設定をカスタマイズする方法：
- エディタで検索バーをクリックします。
- 「設定」をクリックします。
- 設定オプションをカスタマイズします：
- プレースホルダテキスト：検索バーが空のときに表示される短いテキストを追加します。
注意：このテキストは、サイト訪問者が検索バーに入力し始めるとすぐ消えます。 - 結果のサジェスト：ユーザーが入力を開始したときに表示される結果のサジェスト（候補）を有効または無効にします。
- トレンドアイテム：ユーザーが入力を開始する前に、トレンドのアイテムを表示するかどうかを有効または無効にします。
注意：トレンドアイテムを有効にできるのは、結果のサジェストを有効にしている場合のみです。
- プレースホルダテキスト：検索バーが空のときに表示される短いテキストを追加します。
検索バーのレイアウトを変更する
レイアウトパネルから、検索バーのレイアウト、配置、間隔を設定します。
検索バーのレイアウトを変更する方法：
- エディタで検索バーをクリックします。
- 「レイアウト」アイコン
をクリックします。 - レイアウトオプションをカスタマイズします：
- レイアウトを選択：検索バーのスタイルを選択します。
- アイコン配置：検索アイコンの位置を選択します。
- テキスト配置：テキストの位置を選択します。
- テキストの間隔：検索バーの端とテキストの間隔を設定します。
- アイコンの間隔：アイコン領域のサイズを設定します。
注意：
利用可能なオプションは、選択したレイアウトによって異なります。
検索バーのデザインをカスタマイズする
さまざまな状態に合わせて検索バーのデザインをカスタマイズします：
- 通常時：バーが使用されていないとき。
- ホバー：訪問者がバーにマウスオーバーしたとき。
- フォーカス：訪問者がバーをクリックしたとき。
検索バーのデザインをカスタマイズする方法：
- エディタで検索バーをクリックします。
- 「デザインを変更」アイコン
をクリックします。 - プリセットデザインを選択します。
- 「デザインをカスタマイズ」をクリックして、さらにデザインを変更します。
- タブをクリックしてカスタマイズする状態をクリックします：「通常時」、「ホバー」、「フォーカス」
- オプションを使用して各状態をカスタマイズします：
- 不透明度・色：バーの背景色とアイコンの色を変更します：
- 入力欄の背景：カラーボックスをクリックして入力欄の背景色を選択し、スライダーをドラッグして不透明度を調整します。
- ボタンの背景：カラーボックスをクリックして検索アイコンの背景色を選択し、スライダーをドラッグして不透明度を調整します。
- ボタンアイコン：カラーボックスをクリックして検索アイコンの色を選択し、スライダーをドラッグして不透明度を調整します。
- 枠線：バーに枠線を追加してカスタマイズします：
- 不透明度・色：カラーボックスをクリックして枠線の色を選択し、スライダーをドラッグして不透明度を調整します。
- 枠線設定：枠線のスタイルと、どこに表示されるかを選択します。
- 太さ：スライダーをドラッグして、枠線の幅を調整します。
- 角：バーの角を丸めます：
- 角の丸みに値を入力するか、鍵アイコンをクリックしてすべての値をまとめて変更します。
- 影：バーに影を追加します：
- 「影を表示する」トグルを有効にします。
- オプションを使用して影をカスタマイズします：
- 角度：影の角度を選択します。
- 位置：スライダーをドラッグして、影の位置を調整します。
- サイズ：スライダーをドラッグして、影のサイズを調整します。
- ぼかし：スライダーをドラッグして、影のぼかしを調整します。
- 不透明度・色：カラーボックスをクリックして影の色を選択し、スライダーをドラッグして影の不透明度を調整します。
- テキスト：バーのテキストを書式設定します。
- プレースホルダの色：カラーボックスをクリックしてプレースホルダのテキストの色を選択し、スライダーをドラッグして不透明度を調整します。
- 文字色：カラーボックスをクリックして、入力テキストの色を選択します。
- スタイル：ドロップダウンメニューをクリックし、テキストスタイルを選択します。
- フォント：ドロップダウンメニューをクリックし、フォントを選択します。
- 文字サイズ：スライダーをドラッグして、テキストサイズを調整します。
- 太字 / 斜体：オプションをクリックしてテキストを書式設定します。
- 不透明度・色：バーの背景色とアイコンの色を変更します：
検索バーの位置を変更する：
検索バーの位置を変更するには、検索バーをクリックしてサイトのヘッダーまたはフッターにドラッグしてください。
お役に立ちましたか？
|