検索フォームのデザインやレイアウト等を変更する

検索フォームのデザインやレイアウト等を変更する

検索フォームのデザインやレイアウト等を変更する

検索フォームの背景色や文字色、レイアウトなどのデザインを変更したい場合、
検索フォーム設定画面の『デザイン設定』の項目で設定を行う事で、
スタイルシートの知識がなくても簡単に変更する事ができます。

 

検索フォームのデザインを変更するには、検索フォーム設定画面上部メニューの「検索フォームの設定」→「デザイン設定」を選択してください。

 

 

すると、下図のデザイン設定画面が表示されます。
この画面で検索フォームのデザインに関する設定を行っていきます。

 

 

 

 

基本設定

見出し

検索フォーム上部に表示される見出しのテキストを変更します。

 

カラー

検索フォームの基本カラーを変更することができます。
カラーバリエーションは、デフォルトの他に6種類から選択が可能です。

「検索結果にも反映」ボタンをクリックすると、検索結果ページのカラーにも反映されます。

検索結果ページの表示設定について

 

レイアウト(PC)

検索項目の表示を、1列または2列に変更することができます。
検索フォームの項目が多い場合や、横幅の広いテンプレートで検索フォームを表示させたい場合は、
2列で表示させることですっきりとしたデザインにすることができます。

 

デザイン

検索項目の表示デザインの変更を行うことができます。
下記の3種類のデザインを用意していますので、お好きなデザインを選択してください。

  • テーブル
  • 区切り線
  • 指定なし

 

詳細設定の設定

詳細検索の見出し

詳細検索の見出し部分に表示されるテキストを変更したい場合、こちらで設定を変更してください。

詳細検索の初期表示

詳細検索の初期表示状態を変更することができます。
「詳細検索は隠す」に設定すると閉じた状態で、「全て表示する」に設定すると開いた状態で詳細検索を表示します。

 

検索ボタンの設定

検索ボタンのデザイン

検索ボタンのデザインを変更することができます。
下記の5種類のボタンデザインを用意していますのでお好きなものを選択してください。

  • デフォルト
  • グラデーション
  • シャドウ
  • 角丸
  • アニメーション

 

検索ボタンのアイコン

検索ボタン内にお好きなアイコン画像を設定できます。
右側の「画像」ボタンから、ご希望のアイコン画像を選択してください。

 

その他の設定

チェックボックスの検索方式

検索項目のタイプを「チェックボックス」に設定している場合、複数の選択肢を選択することができますが、その際にどのように検索を行うかを設定します。

AND検索

選択した条件を全て満たした検索結果が表示される

OR検索

選択した条件を一つ以上満たした検索結果が表示される

 

詳細検索の検索方式

「詳細検索」を設定した場合の、検索条件の設定ができます。

AND検索

選択した詳細検索の条件を全て満たした検索結果が表示される

OR検索

選択した詳細検索の条件の内、いずれか一つを満たした検索結果が表示される