検索ボックスのデザインをカスタマイズする方法です。
テンプレートてきなものをいくつか作成してみました。
図々しくも『おしゃれ』だなんてタイトルに入れ込んでみましたが…CSSだけで簡単に装飾することが出来るので、参考になれば幸いです。
検索ボックスをおしゃれにカスタマイズする方法
カスタマイズする際は、
- ワードプレスダッシュボードの外観から『カスタマイズ』をクリック
- 追加CSSにコードを記入
プレビューを見ながらカスタマイズすると、感覚的に変更することができます。
CSS追加方法
外観→カスタマイズ→追加CSS
(.search-box .search-editの部分)が違う場合は変更してご使用ください。cocoonはこのままお使い頂けると思います。
CSSが動作しない場合は、スタイルシートに入力する際に余計なスペースが入っていないか等もご確認ください。
検索ボックス内のフォーム文を変更したい場合は、下記記事で方法を確認いただけます。
検索ボックスをカスタマイズするCSS
スタンダード
スタンダードな検索ボックスです。
枠の色や太さなどは『border: 1px solid #ccc;』で変更します。
1px（線の太さ） solid #ccc;（色）
.search-box .search-edit{
padding: 10px; /*余白*/
border: 1px solid #ccc; /*枠の色*/
border-radius: 4px; /*丸み*/
font-size: 18px; /*文字の大きさ*/
width: 100%; /*枠の大きさ*/
}
二重枠
.search-box .search-edit{
padding: 10px;
border: double 4px #ccc;
border-radius: 4px;
font-size: 14px;
width: 100%;
}
こまかい点線
.search-box .search-edit{
padding: 14px;
font-size: 14px;
border: dotted 1px #ccc;
border-radius: 4px;
width: 100%;
}
両端を丸くする
両端が丸っこい検索ボックスです。
丸みは border-radius: 30px; の数字を変えると変化します。
.search-box .search-edit {
font-size: 14px;
padding: 5px 20px;
border-color: #000;
border-radius: 30px;
height: 50px;
}
.search-box .search-submit {
top: 0;
right: 0px;
height: 100%;
width: 60px;
color: #ccc;
}
両端を丸くする（ボタンに背景色）
検索ボタンの背景に色を入れました。
/*ボタンの背景色*/ のカラーコードを変更するとボタンの背景色を変えることができます。
.search-box .search-edit {
font-size: 14px;
padding: 5px 20px;
border-color: #EE817B; /*枠の色*/
border-radius: 30px; /*角の丸さ*/
height: 50px;
}
.search-box .search-submit {
top: 0;
right: 0px;
height: 100%;
width: 60px;
color: #fff; /*ボタンの色*/
background-color: #EE817B; /*ボタンの背景色*/
border-radius: 0 30px 30px 0; /*丸さボタン側*/
}
.search-box input::placeholder {
color: #EE817B; /*テキスト色*/
}
コンパクト抹茶
少し横幅を短くした小さめの検索ボックスです。
色は抹茶にしてみました（笑）
変更する場合は、/*背景色*/ background-color の色を変えます。
また、幅は width: の数字を変えます。
％で指定していますが、px指定にすると幅を固定できます。
％やpxを使い分けることで微調整することが可能です。
.search-box {
width: 80%;
left: 10%;
}
.search-box .search-edit {
font-size: 14px;
padding: 5px 20px;
background-color:#A8DBA8; /*背景色*/
height: 50px;
width: 100%;
}
/*検索ボタン*/
.search-submit {
top: 0;
right: 0px;
height: 100%;
width: 60px;
color: #fff;
border-radius: 0 5px 5px 0;
background-color: #79BD9A; /*背景色*/
}
.search-box input::placeholder {
color: #fff;
}
下線
.search-box .search-edit {
font-size: 14px;
padding: 16px 20px;
background-color:#fff;
border: 0;
border-radius: 0;
border-bottom: solid 1px black;
}
.search-submit {
top: 0;
right: 0px;
height: 100%;
width: 60px;
}
左にアイコン
検索ボタンのアイコンを左に持ってきました。
.search-box .search-edit {
font-size: 14px;
padding: 1em 4em;
background-color:#fff;
border: 0;
border-radius: 0;
border-bottom: solid 1px black;
}
.search-submit {
top: 0;
left: 0px;
height: 100%;
width: 60px;
}
アイコンを変える
検索ボタンのアイコンを変えてみました。
Font Awesomeを使用しています。
cocoonは最初から導入されているので、アイコンを変更したい場合はFont Awesomeのサイトへ行きアイコンを選択します。
使用したいアイコンのページを開き、『f787』のようなｆと英数字があるので
content: “\f787”;
というように記入します。
.search-box .search-edit{
padding: 10px; /*余白*/
border: 1px solid #ccc; /*枠の色*/
border-radius: 10px; /*丸み*/
font-size: 14px; /*文字の大きさ*/
width: 100%; /*枠の大きさ*/
height: 50px;
}
.search-box .search-submit {
top: 0;
right: 0px;
height: 100%;
width: 60px;
color: #ff8a4f;
}
.fa-search:before{
font-family: "Font Awesome 5 Free";
content: "\f787";
font-weight: 900;
}
上記で使用しているFont Awesomeのバージョンは5.0です。
Font Awesome 4.7に設定されている方は旧バージョンのアイコンを使用してください。
fontawesome v4.7
ダッシュボード → cocoon設定 → 全体 → サイトアイコン（Font Awesomeのバージョンを選択）
iPhoneで見た時に影が入ってしまう現象
今回は検索ボックスのカスタマイズをご紹介しました。
スタイルシートにコードを挿入し、iPhoneから検索ボックスをスクショして上記のようにご紹介してきたのですが、、
作成した検索ボックスに、謎の影が入っていました。
- PC上ではコードを書き換えても問題なく反映している
- レスポンシブモードで確認しても影はでない
- iPhoneのキャッシュもクリアした
- そもそもCSSで影を付けていない
-
のにだ！
iPhoneで設定した検索ボックスを確認すると、なぜだか影がついているのです。
最初は私の目が霞んでいるのかと思ってスルーしていたのですが、iPhone（ios）だけinput要素がなんちゃらでCSSが効かないようなので、これを反映させるコードをスタイルシートに追加します。
* {
-webkit-appearance: none;
}
↓
同じような現象にあっている方は試してみてください。
