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

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

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

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

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

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

右側にある「検索結果にも反映」ボタンをクリックすると、
検索結果ページのカラーも同時に反映させることができます。

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

この項目は、PC及びタブレットブラウザ専用の設定です。
スマートフォンは「1列」以外に変更できませんのでご注意ください。

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

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

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

検索ボタン内に表示するテキストを変更できます。

検索ボタンの背景色を変更することができます。
カラーコードを直接入力するか、
右側の「選択」ボタンをクリックしてお好きな色を選択してください。

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

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

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

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

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

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

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

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