Cocoonのサイドバーに表示されるサイト内検索の検索ボックスをおしゃれにカスタマイズする方法をご紹介します。
Cocoonのデフォルトの検索ボックスはとてもシンプル。デザインをアレンジしたい時に参考にしてにゃ
サイドバーに検索ボックスを表示する
Cocoonのサイドバーに検索ボックスを表示させるには、「外観」→「ウィジェット」に進みます。利用できるウィジェットがずらずらと表示されるので、スクロールして下の方にある「検索」をクリックしてください。追加場所がプルダウンで表示されるので、一番上の「サイドバー」を選択して「ウィジェットを追加」をクリックします。すると、サイドバーに検索ウィジェットが追加されます。ウィジェットの並び順はドラッグで入れ替えられます。
これで下画像のような検索ボックスがサイドバーに表示されるようになります。デフォルトのデザインはとてもシンプルです。これをベースに、デザインをカスタマイズしていきます。
検索ボックスのデザインサンプル
いくつかデザインサンプルを作ってみました。色などを変更して、是非お好みのデザインを作成してみてください。
検索ボックスのHTMLの確認
CSSをコピペする方は次の項目まで読み飛ばしても大丈夫です。Cocoonの検索ボックスのHTMLを確認すると、class名などを把握できます。
<form class="search-box input-box" method="get" action="***">
<input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value="">
<button type="submit" class="search-submit" aria-label="button"><span class="fas fa-search" aria-hidden="true"></span></button>
</form>背景色をつけたデザイン
枠線をなくして背景色をつけたデザインです。
input.search-edit{
background-color: #e8e0db;/*検索ボックスの背景色*/
border: none;
}
input.search-edit::placeholder{
color: #5c5855;/*placeholderの文字色*/
}
span.fa-search::before{
color: #5c5855;/*虫眼鏡の色*/
}角丸のデザイン
デフォルトより角丸を大きくしただけのシンプルなデザインです。
input.search-edit{
border-radius: 30px;/*角丸の大きさの指定*/
}ボタン部分を目立たせるデザイン
虫眼鏡マークのボタン部分に背景色をつけて目立たせたデザインです。
input.search-edit{
border: 1px solid #fca4ad;/*検索ボックスのボーダー*/
position: relative;
}
input.search-edit::placeholder{
color: #aaa;/*placeholderの文字色*/
}
button.search-submit{
width: 60px;/*検索ボタンの幅*/
height: 100%;
background-color: #fca4ad;/*検索ボタンの色*/
position: absolute;
right: 0;
top: 0;
border-top-left-radius: 0;
border-top-right-radius: var(--cocoon-basic-border-radius);
border-bottom-right-radius: var(--cocoon-basic-border-radius);
border-bottom-left-radius: 0;
color: #fff;/*虫眼鏡の色*/
}
検索ボタンを独立させたデザイン
検索ボックスと検索ボタンを離したデザインです。
input.search-edit{
border: 0;
background-color: #dce9f5;/*検索ボックスの背景色*/
border-radius: 0;
position: relative;
width: calc(100% - 70px);/*ボックスの幅を100%からボタンの幅と余白分を引いた値に指定*/
}
button.search-submit{
width: 60px;/*検索ボタンの幅*/
height: 100%;
background-color: #7abcf5;/*検索ボタンの背景色*/
position: absolute;
right: 0;
top: 0;
color: #fff;/*虫眼鏡の色*/
}ラインのみのシンプルデザイン
枠線や背景色を使わず、下線のみのシンプルなデザインです。
input.search-edit{
border: 0;
border-bottom: 1px solid #333;/*ラインの色*/
border-radius: 0;
}
input.search-edit::placeholder{
color: #aaa;/*placeholderの文字色*/
}
span.fa-search::before{
color: #333;/*虫眼鏡の色*/
}セレクタ指定には優先順位があります。今回、Cocoonのデフォルトのスタイルよりも優先させるため、input.search-editのように要素を特定したclassセレクタで指定しました。要素を特定しないと、Cocoonのデフォルトのスタイルが優先されてしまって上手く反映できないことがあります。
検索ボックスのフォーカス時の枠線を消す
検索ボックスにカーソルを合わせて入力する時、ブラウザによって異なりますが、画像のように枠線が表示されます。
これを消したい時は下記のCSSを追加してください。
input.search-edit:focus {
outline: none;
}単に消すだけでなく、フォーカス時のデザインをオリジナルに変えても良いですね。
まとめ
背景色やボーダーを少し変える程度でも違った雰囲気になりますね。Cocoonのデフォルトのデザインはシンプルなのでどんなテイストにも合わせやすいですが、是非カスタマイズしてみて下さい。
