Cocoonの検索ボックスのカスタマイズ＆デザイン5パターン

Cocoonでは、ウィジェットに検索ボックスを表示させることができます。

デフォルトのデザインもシンプルなので、各サイトに合わせてよりいっそう見やすく使いやすくしていこうと思います。

この記事では、Cocoonの検索ボックスのカスタマイズ＆デザイン5パターンを紹介していきます。

こんな見た目になります

カスタマイズ後のデザイン

この記事のカスタマイズを実践すると、上の5つのデザインに変更できます。

色も自由に変えられるので、ぜひご自身のサイトに合わせてカスタマイズしてみてください。

カスタマイズ前のデザイン

Cocoonの検索ボックスは、デフォルトではこのデザインになっています。

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

カスタマイズ用CSSコードを「追加CSS」にコピペします。

追加CSSは、「管理画面→カスタマイズ→追加CSS」で編集できます。

シンプルに色だけ変更

デフォルトのデザインを生かしつつ、検索ボックスの枠線と文字の色を変更するやり方です。

/* サイト内検索 */
.search-edit, input[type="text"] {
   border-color: #a4e8e6; /* 線の色 */
}
[type=submit].search-submit {
    color: #a4e8e6; /* 文字の色 */
}

フラットカラータイプ

このサイトで使用しているデザインです。

フラットな感じが明るい色によく合います。

/* サイト内検索 */
.search-edit, input[type="text"] {
   border: 2px solid #a4e8e6; /* 線の色 */
   border-radius: 3px;
  outline: none;
}
[type=submit].search-submit {
   top: 0;
    right: 0;
    height: 100%;
    padding: 8px 15px;
    background: #a4e8e6; /* ボタンの色 */
    color: #fff; /* 文字の色 */
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 0 3px 3px 0;
}
[type=submit].search-submit:hover {
    color: #fff;
    background: #95e5e2;
}

3Dカラータイプ

上のデザインをベースに、影をつけて立体的にしています。

/* サイト内検索 */
.search-edit, input[type="text"] {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15), 0 3px 3px -2px rgba(0, 0, 0, 0.15);
	border: none;
	border-bottom: solid 1px #efefef;
   border-radius: 3px;
  outline: none;
}
[type=submit].search-submit {
   top: 0;
    right: 0;
    height: 100%;
    padding: 8px 15px;
    background: #a4e8e6; /* ボタンの色 */
    color: #fff; /* 文字の色 */
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 0 3px 3px 0;
}
[type=submit].search-submit:hover {
    color: #fff;
    background: #95e5e2;
}

角を丸く（２Dタイプ）

/* サイト内検索 */
.search-edit, input[type="text"] {
   border: 2px solid #a4e8e6; /* 線の色 */
   border-radius: 50px;
  outline: none;
}
[type=submit].search-submit {
   top: 0;
    right: 0;
    height: 100%;
    padding: 8px 20px;
    background: #a4e8e6; /* ボタンの色 */
    color: #fff; /* 文字の色 */
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 0 50px 50px 0;
}
[type=submit].search-submit:hover {
    color: #fff;
    background: #95e5e2;
}

角を丸く（3Dタイプ）

丸みをつけた上で影をつけると、ふんわり柔らかい印象になります。

/* サイト内検索 */
.search-edit, input[type="text"] {
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15), 0 3px 3px -2px rgba(0, 0, 0, 0.15);
	border: none;
	border-bottom: solid 1px #efefef;
   border-radius: 50px;
  outline: none;
}
[type=submit].search-submit {
   top: 0;
    right: 0;
    height: 100%;
    padding: 8px 20px;
    background: #a4e8e6; /* ボタンの色 */
    color: #fff; /* 文字の色 */
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 0 50px 50px 0;
}
[type=submit].search-submit:hover {
    color: #fff;
    background: #95e5e2;
}