Cocoonの使い方やカスタマイズとオリジナルスキン

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

スポンサーリンク
カスタマイズ

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

 

Cocoon:検索フォーム風

 

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

スポンサーリンク

使い方

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

 

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

Cocoon:検索フォーム風

 

ブロックエディタの場合

Cocoon:検索フォーム風

 

 

キーワード設定

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

Cocoon:検索フォーム風

例:「Cocoon」とした場合

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

Cocoon:検索フォーム風

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

Cocoon:検索フォーム風

 

カスタマイズ方法

簡単なCSS追記のみです。

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

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

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

 

カスタマイズサンプル

Before

 

Cocoon:検索フォーム風

 

After

Cocoon:検索フォーム風

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

 

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; /*アイコンサイズ*/
}

 

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

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

 

コメント

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