「ヘッダー検索窓」とはページ上部に表示されている検索窓のことです。
ヘッダーボトムエリア設定[検索窓・お知らせ] > ヘッダー検索窓の設定
で表示と非表示の切り替えができます。
この検索窓は横幅100%で表示されますがPC表示のときは検索文字と虫眼鏡アイコンが離れすぎてしまい微妙な見た目＆使い心地となってしまいます。
CSSで大きさを変更しましょう。
CSSでヘッダー検索窓のサイズを変更する方法
コードを追加CSSにコピペすれば完成です。
外観 > カスタマイズ > 追加 CSS
スマホやタブレットでの表示は100%で問題ないので、PC表示のときだけ最大幅に制限をつけます。
サンプルコードでは最大幅が500pxになっています。お好みで変更してください。
margin-left と margin-right で中央揃えにしています。左寄せで良い場合はこの2行を削除。右寄せにする場合は margin-right: auto; を margin-right: 0; にしてください。
完成したらウインドウサイズを変更して挙動を確認してくださいね。
/* ヘッダーの検索窓サイズ制限 */ @media only screen and (min-width: 768px){ .searchHead__search-100 { max-width: 500px; margin-left: auto; margin-right: auto; } }