Cocoon 検索ボックスのデザインをカスタマイズする方法（枠、色、文字の変更）とデザインサンプル5つ

Cocoonの検索ボックス（検索フォーム）のデザインをカスタマイズする方法と、デザインサンプルを紹介します。

検索ボックス・検索ボタンの色や文字サイズ、表示されているテキスト（デフォルトでは「サイト内を検索」）を変更することができます。

編集するのは、スタイルシート（CSS）、テーマファイル (searchform.php）です。
searchform.phpを編集するのは表示テキストを変更する場合のみです。

Cocoonの検索ボックスをカスタマイズする方法

枠線、背景色、文字サイズ、表示テキストのカスタマイズ方法です。
よく分からない人、面倒な人は下のデザインサンプルから気に入ったものをコピペして使ってください。

各サンプルのデザインは整っていないのでおかしいのですが、一箇所だけ変更したことが分かるようにあえて調整をしていません。

デフォルトの検索ボックス

Cocoonデフォルトの検索ボックスは薄いグレーの枠線に囲われたシンプルなものです。

枠線の変更

.search-edit{
 border: 1px solid #333;
}

「search-edit」の「border」の値を変更すると、検索ボックス全体の枠線を変更することができます。

背景色の変更

.search-edit{
 background-color: #ccc;
}

「search-edit」に「background-color」を追記すると、検索ボックス全体の背景色を変更することができます。

文字サイズの変更

.search-edit{
 font-size: 14px;
}

「search-edit」の「font-size」を変更すると、検索ボックス内の表示テキストのサイズを変更することができます。

文字サイズを変更することで、検索ボックス自体のサイズも変わります。

検索ボタンの背景色

.search-submit {
background-color: #4570b4;
}

「search-submit」に「background-color」を追記すると、検索ボタン部分の背景色を変更することができます。

検索ボタンの文字（アイコン）サイズ

.search-submit {
 font-size: 14px;
}

「search-submit」の「font-size」を変更すると、検索ボタンの文字（アイコン）サイズを変更することができます。

文字サイズを変更することで、検索ボタン自体のサイズも変わります。

表示テキストの変更

テーマファイル (searchform.php）の15行目、以下の箇所を編集します。

  <input type="text" placeholder="<?php _e( 'SEARCH', THEME_NAME ) ?>" name="s" class="サイト内を検索" aria-label="input">

“サイト内を検索”を任意のテキストに変更することで、検索ボックスの表示テキストを変更することができます。
上の画像のサンプルでは”SEARCH”としています。

searchform.phpは親テーマ（Cocoon）のテーマフォルダ直下にあります。
ftpクライアントソフトなどでダウンロードして編集したものを、小テーマ（Cocoon Child）のテーマフォルダ直下にアップロードしてください。

タブレットなどで横幅を100%にせずに中央揃え

.search-box{
　max-width:480px;
　margin-left: auto;
　margin-right: auto;
}

横幅を最大480pxに設定しています。
iPadなどでサイドバーがメインカラム下に表示されたときに、検索ボックスが横幅いっぱいに広がらないようにするための設定です。

検索ボックスのデザインサンプル5つ

１．シンプル枠線

.search-edit{
 border: 1px solid #6c6c6c;
 border-radius: 0;
 font-size: 14px;
}
.search-submit {
 color: #6c6c6c;
 font-size: 16px;
}

２．シンプル枠線なし

.search-edit{
 border: 0;
 border-radius: 0;
 background-color: #f7f7f7;
 font-size: 14px;
}
.search-submit {
 color: #949495;
 font-size: 15px;
}

３．フラットデザイン風

/************************************
** 検索ボックス
************************************/
.search-edit{
　background-color: #f7f7f7;
　border:0;
　border-radius:0;
　font-size:14px;
}
.search-submit{
  background-color: #d29f83;
  width: 60px;
　color:#f7f7f7;
  font-size: 14px;
  line-height: 44px;
}

４．フラットデザインダーク

.search-edit{
 border: 0;
 border-radius: 0;
 background-color: #505050;
 font-size: 16px;
 color: #f7f7f7;
}
.search-submit {
color:#f7f7f7;
font-size: 16px;
}
.search-box input::placeholder{
 color:#f7f7f7;
}

５．下線のみ

.search-edit{
 border: 0;
 border-bottom: 1px solid #505050;
 font-size: 14px;
}
.search-submit {
 color: #505050;
 font-size: 15px;
}

CSSの他に、テーマファイル (searchform.php）の15行目、”サイト内を検索”を””（空白）に編集します。

さいごに

デザインサンプルは随時追加していきます。