検索フォームの外観(デザイン)を整える

検索フォームのデザインはスタイルシート(CSS)で行います。ご使用中のWordPressテンプレートのstyle.cssに記述していただく他に、この欄から設定していただくこともできます。テーマのCSSと分けて管理できるので分かりやすいともいえます。

  • 「検索」のサブメニューの「フォーム外観」をクリックします。
    →下のような画面が表示されます。

  • 下記スタイルシートを使用する」にチェックを入れます。
  • スタイルシート(CSS)欄に設定を記述してください(あらかじめ参考設定が記述されていますので、ご参考ください)。
  • 記述が済んだら「保存」をクリックします。
  • 複数の検索フォームに対応しました。右上のドロップダウンから対象となる検索フォームを選択してから、スタイルシートの編集を行ってください。
  • 検索フォームの各フォームエレメントに、id/classを詳細に付与するよう改善しました。より柔軟にCSSでスタイリングいただけます。

ドロップダウン内のソースコード例:

参考:チェックボックスやラジオボタンの各項目の垂直方向に整列させるには

複数のチェックボックスやラジオボタンを垂直方向にきれいに並べるには、下記のようなCSSの記述をしていただくことで整列可能です。

#feas-searchform label{
  font-weight: normal;
  display: inline-block;
  width: 140px;
}

※実際のCSSの記述に合わせて調整してください。

チェックボックスの垂直方向を整列させた例:

カテゴリー: