Cocoonの記事内に埋め込める検索フォームの使い方とカスタマイズ

Cocoonには、記事内に「検索フォーム風」のボタンを埋め込む機能があり、簡単に挿入して使えます。

その使い方と、簡単カスタマイズ方法です。

使い方
- キーワード設定
カスタマイズ方法
カスタマイズサンプル
- Before
- After
カラーの変更

使い方

記事編集画面で、「タグ」から「検索フォーム風」を選択するだけです。

ビジュアルエディタの場合

ブロックエディタの場合

キーワード設定

挿入された以下の検索キーワードを編集します。

例：「Cocoon」とした場合

サイト上では以下のように表示され

ユーザーが検索を押すと検索結果が新しいタブで開きます。

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ→追加CSS

外観→テーマエディター→style.css

カスタマイズサンプル

Before

After

枠の色
ボタンの色・角の丸み
指差しアイコン変更

CSS

/************************************
** 検索フォーム風
************************************/
/*キーワード枠*/
.search-form > div { 
border: 1px solid #66ccff; /*枠線種・太さ・色*/
}
/*検索ボタン*/
.search-form div.sbtn {
background-color: #66ccff; /*背景色*/
color: #fff; /*文字色*/
border-radius:3px; /*角丸め*/
}
.search-form div.sbtn:after {
content: "f0a6"; /*指差しアイコン*/
font-family: FontAwesome;
color: #555; /*アイコン色*/
top:1.1em;
font-size: 30px; /*アイコンサイズ*/
}

上記をコピーし、カラー変更や不要部分があれば削除してご利用下さい。