このサイトでは久々の投稿です😊
Katawara の検索ボックスのスタイルをカスタマイズしました。
デフォルトの検索ボックス
これ↓が Katawara のデフォルトの検索ボックスです。
ボタンの背景色が白でボーダーの色が薄いです。
このサイトのように背景色を設定した左側のサイトヘッダーに置いて使うのにちょうどいいデザインになっていますが、右側のコンテナ（背景色が白のエリア）に置いて使うのにはあまり向いていません。
そこで、背景色が白のエリアで使いやすいように検索ボックスをカスタマイズしてみました。
また、デフォルトだとコンテナ幅いっぱいに表示されますので、サイズをコンパクトにして、左寄せ、中央寄せ、右寄せを選べるようにしてあります。
カスタマイズ例① ピン角
ボタンの背景色を カスタム カラー 1 にしてあります。
カスタマイズ例② 角丸
ボタンの背景色を カスタムカラー 2 にしてあります。
以下のように、背景色が設定されているエリアでも使えるようにスタイルを調整してあります。
背景色が設定されているエリアで背景色に関係なく使いやすい、白いボタンの検索ボックスも同じデザインで作りました。
カスタマイズ例③ 白い検索ボックス ピン角
カスタマイズ例④ 白い検索ボックス 角丸
サイト運営者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
