Cocoonの検索フォームをデザインカスタマイズ

サイドバーなどに表示すると便利な自サイト内の検索フォームのデザインをカスタマイズしてみます。

WordPressの標準ウィジェット「検索」のカスタマイズです。

カスタマイズサンプル

Before

Cocoonのデフォルトは以下です。

After

まるっこいデザインにし、サーチボタンに色を付けました。

オンマウス時のサーチボタン

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

CSS

以下のCSSを追記します。

/*検索フォーム*/.search-edit {
height:50px;
padding:0 10px; 
border-radius:25px ;
outline:0;
background:#eee;
}
[type="submit"].search-submit {
height:50px;
width:50px;
top:0;
right:0;
background:#839b5c;
color:#fff;
border:none;
border-radius:0 25px 25px 0;
}
[type="submit"].search-submit:hover{
color:#839b5c;
background:#ddd;
}

その他のカスタマイズ方法

検索フォームの設定内容を変更してしまう事でも可能です。

検索フォーム設定内容を変える場合は、親テーマ内直下にある「searchform.php」を子テーマにコピーして編集する方法で可能。

PHPファイルを編集するのは抵抗がある場合は、ウィジェットを使わずに自身で作成したフォームを使えばもっと自由なデザインが可能です。

詳細は以下にまとめています。

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名赤桃青紫黄橙緑茶黒