【Cocoon】検索窓（検索フォーム）の設定とデザイン変更・CSSカスタマイズ

当ブログでは、Cocoonを初期状態からカスタマイズする方法（コピペ可）をまとめています。

検索窓（検索フォーム）とは？

検索窓（検索フォーム）は、ページ内でユーザーが特定の情報を探すための入力エリアです。

検索フォームの役割は次のとおりです。

• 情報検索のサポート
• サイトの使いやすさ向上
• 新しいコンテンツの発見

情報検索のサポート

検索窓は、ユーザーが自分が探している情報を素早く見つけるための手助けをします。キーワードを入力するだけで関連するコンテンツが表示されるため、ユーザーは簡単に必要な情報にアクセスできます。

膨大な量の情報を持つサイトでは、検索窓で直接キーワードで検索することで探す時間を短縮できます。

サイトの使いやすさ向上

検索窓は必要な情報を探す手間を省き、使いやすさを向上させます。これにより、サイトに訪れた人が長く滞在し、他のコンテンツも見る可能性が高くなります。

新しいコンテンツの発見

検索窓を通じてキーワード検索すれば、関連する記事やページが表示され、興味のある記事を発見する機会になります。

カスタマイズのCSSを追加する場所

カスタマイズでCSSコードを使用するときは、以下の場所にコードをコピペしてください。

CSSを追加する場所

【外観】→【カスタマイズ】→【追加CSS】に以下のコードを記述する。

検索フォームの形と色を変える

検索フォームの形と色を変えるCSSは以下のとおりです。

/* 検索フォームの形と色を変える */
.search-edit {
  border-radius: 20px !important;  /* 検索フォームの角を丸くする */
  border-color: #ffffff !important;  /* 検索フォームの枠線の色を変える */
}

検索フォーム右のアイコンの色を変える

検索フォーム右のアイコンの色を変えるCSSは以下のとおりです。

/* 検索フォーム右のアイコンの色を変える */
.search-submit{
  color: #a8bcc8;  /* 色の変更 */
}

まとめ：検索フォームのデザインをブログにあわせてみよう

ブログを訪れる読者にとって、必要な情報を素早く見つける手段として「検索フォーム」はとても便利です。検索フォームのデザインをブログにあわせて設置してみましょう。