《wpカスタマイズ》CSSで検索ボックスをおしゃれにカスタマイズする方法

カスタマイズ

検索ボックスのデザインをカスタマイズする方法です。
テンプレートてきなものをいくつか作成してみました。
CSSだけで装飾することが出来るので、参考になれば幸いです。

スポンサーリンク

検索ボックスをおしゃれにカスタマイズする方法

カスタマイズする際は、ワードプレスダッシュボードの外観から『カスタマイズ』をクリックし、追加CSSにコードを記入するようにすると簡単ですよ。

CSSが動作しない場合は、スタイルシートに入力する際に余計なスペースが入っていないか等もご確認ください。私はよくあります( ;∀;)

コードの追加方法(Wordpress)
外観 → カスタマイズ → 追加CSS
クラス名がテーマによって違うことがあります。(.search-box .search-editの部分)が違う場合は変更してご使用ください。cocoonはこのままお使い頂けると思います。
スポンサーリンク

検索ボックスをカスタマイズする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』のようなfと英数字があるので
content: “\f787”;
というように記入します。

Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
.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設定より変更します。
ダッシュボード → cocoon設定 → 全体 → サイトアイコン(Font Awesomeのバージョンを選択)

iPhoneで見た時に影が入ってしまう現象

今回は検索ボックスのカスタマイズをご紹介しました。
スタイルシートにコードを挿入し、iPhoneから検索ボックスをスクショして上記のようにご紹介してきたのですが、、

作成した検索ボックスに、謎の影が入っていました。

      • PC上ではコードを書き換えても問題なく反映している
      • レスポンシブモードで確認しても影はでない
      • iPhoneのキャッシュもクリアした
      • そもそもCSSで影を付けていない

のにだ!
iPhoneで設定した検索ボックスを確認すると、なぜだか影がついているのです。

最初は私の目が霞んでいるのかと思ってスルーしていたのですが、iPhone(ios)だけinput要素がなんちゃらでCSSが効かないようなので、これを反映させるコードをスタイルシートに追加します。

* {
-webkit-appearance: none;
}

同じような現象にあっている方は試してみてください。

 

 

タイトルとURLをコピーしました