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

Cocoon検索ボックスカスタマイズカスタマイズ
この記事は約6分で読めます。

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

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

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

こんな見た目になります

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

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

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

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

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

デザインデフォルト
デフォルトのデザイン

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

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

追加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カラータイプ

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

3Dカラータイプ
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;
}

角を丸く(2Dタイプ)

角丸(フラットタイプ)
/* サイト内検索 */
.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;
}

コメント

タイトルとURLをコピーしました