前回はフッターのカスタマイズ方法を解説しました。
今回は、ウィジェットから設置できる検索ボックスのカスタマイズ方法を紹介させていただきます。
当ブログ『ムササビやねん』のCSSをもとにカスタマイズ手順を紹介させていただきます！
Cocoonカスタマイズ第4弾として、検索ボックスのカスタマイズについてご紹介させていただきます。
▼この記事はこんな方におすすめ
- ・Cocoonで検索ボックスを設置したい
- ・ちょっとおしゃれな検索ボックスにカスタマイズしたい
ユーザが使いやすい検索ボックスにカスタマイズしましょう！
Contents
検索ボックスの完成イメージ
今見ていただいてる、当ブログの検索ボックスが完成イメージです！
▼特徴
- ・角を丸くして可愛らしく
- ・未入力の時、『検索』の文字を『search』に変更
- ・検索ボタンにマウスを合わせると色が変わる
検索ボックスの設置方法
▼注意！！！
- 設定の変更やCSSを修正する際はバックアップを取ることをお忘れなく！！！
まずはじめに検索ボックスをサイドバーに設置します。
検索ボックスをサイドバーに設置するには①サイドバーの外観→②ウィジェットで設定できます。
左の利用できるウィジェットから、『検索』をクリックしてください。
選択ボックスから『サイドバー』を選択して、ウィジェットを追加をクリックしてください。
右のエリアにある『サイドバー』をクリックして、『検索』が入っていることを確認してください。検索ボックスを表示したい場所に『検索』の位置を調整してください。
これで検索ボックスの設置は完了です！
CSSで装飾をカスタマイズ
続いてCSSを編集していきます。
CSSは①サイドバーのテーマファイルエディタ→②スタイルシート(style.css)で編集できます。
▼注意！！！
- ・設定の変更やCSSを修正する際はバックアップを取ることをお忘れなく！！！
- ・スタイルシート(style.css)が選択されていることを再度確認してください！！！
当サイトはスキンをなしに設定しています。
スキンを設定していると上手くいかない可能性があります。ご了承ください。
/* ①ボックス部分 */
.search-edit, .search-box input[type="text"] {
color: #4d4435;
border-radius: 50px;
outline: none;
padding-left: 20px;
}
/* ②検索ボタン */
[type=submit].search-submit {
top: 0;
right: 0;
height: 100%;
padding: 8px 15px;
background: #d98030;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 0 50px 50px 0;
transition:0.3s;
}
/* ③検索ボタン(hover) */
@media screen and (min-width: 980px) {
[type=submit].search-submit:hover {
color: #fff;
background: #e7b07e;
}
}
このコードをコピーして、スタイルシート(style.css)に貼り付けてください。
皆様のブログに合わせて微調整する方法を解説します！
①ボックス部分
検索ボックス部分の装飾を設定しています。
colorで入力された文字の色を設定しています。
お好きな色に変更してください。
border-radiusで検索ボックスの角を丸くしています。
四角のままが良い場合は消してください。
outlineはnoneに設定することで、検索ボックスがクリックされた時に、枠が青くなるのを防いでいます。
青のままが良い場合は消してください。
padding-leftで入力される文字の左に空白を設定しています。
角を丸くしているため、左に空白を設定しないと文字が切れるためです。
角を四角のままにした場合は、必要に応じで値を変更するか消してください。
②検索ボタン
検索ボタンの装飾を設定しています。
backgroundでボタンの色を設定しています。
お好きな色に変更してください。
colorで虫眼鏡マークの色を設定しています。
お好きな色に変更してください。
font-sizeで虫眼鏡マークの大きさを設定しています。
大きくしたい場合は値を大きく、小さくしたい場合は値を小さくしてください。
border-radiusで検索ボタンの角を丸くしています。
四角のままが良い場合は消してください。
transitionで検索ボタンにマウスを合わせた際の、色の変わる速度を設定しています。
速くしたければ値を小さく、遅くしたければ値を大きくしてください。
③検索ボタン(hover)
マウスを合わせた際の検索ボタンの装飾を設定しています。
colorで虫眼鏡マークの色を設定しています。
お好きな色に変更してください。
backgroundでボタンの色を設定しています。
お好きな色に変更してください。
これでボタンの装飾も完了！
javascriptでデフォルトの文字を変更
続いてjavascriptを編集していきます。
javascriptは①サイドバーのテーマファイルエディタ→②javascript.jsで編集できます。
▼注意！！！
- ・設定の変更やjavascriptを修正する際はバックアップを取ることをお忘れなく！！！
- ・javascript.jsが選択されていることを再度確認してください！！！
// 検索をsearchに変更
$('.search-edit').attr('placeholder','search');
このコードをコピーして、javascript.jsに貼り付けてください。
検索をsearchに変更
検索ボックスのデフォルトの文字を『検索』から『search』に変更しています。
他の文字に変更したい場合はsearchを変更してください。
以上です！お疲れ様でした！
まとめ
今回はCocoonの検索ボックスのカスタマイズについてご紹介させていただきました。
次回はインデックスのカスタマイズについて解説する予定です！
今回の記事は以上となります。
最後までお読みいただき、ありがとうございました！