Cocoonの使い方やカスタマイズとオリジナルスキン

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

スポンサーリンク
カスタマイズ

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

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

 

スポンサーリンク

カスタマイズサンプル

Before

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

サイト内検索フォーム

After

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

サイト内検索フォーム:カスタマイズ

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

サイト内検索フォーム:カスタマイズ

 

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

 

CSS

以下のCSSを追記します。

/*検索フォーム*/
.search-edit {
height:50px;
padding:0 10px; 
border-radius:25px !important;
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ファイルを編集するのは抵抗がある場合は、ウィジェットを使わずに自身で作成したフォームを使えばもっと自由なデザインが可能です。

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

 

カラーの変更

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

マカロンビビッドパステル伝統色和色セーフ色名

 

 

コメント

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