Cocoonアピールエリアに検索窓（フォーム）を設置する方法／ショートコード利用

この記事では、Cocoonのアピールエリアに『検索フォーム』を設置する方法を紹介します。

ポイントは、検索フォームをパターンに登録（ショートコード化）して入力を簡単にすること。アピールエリアに限らずに、HTMLの使えるところであれば繰り返し好きなところに自由に置ける点です。

使い方は簡単。パターンに登録後、表示したいところに下記のショートコードを入力するだけでこのような検索フォームが表示されます。

[pattern id=番号]

アピールエリア内に置くとこんな感じ。白枠部分の背景色は消したり、濃さ（透過率）をCSSで調整できます。当サイトのトップページにも設置しています。

アピールエリア（コンテンツ部分）の背景色を調整

検索フォームのスタイルも２パターン掲載します。

1. ボタン分離型
2. 検索ボタンに背景色 + フォームに影付きで柔らかく

検索フォームのスタイル変更

また、アピールエリアをフルスクリーンにして広～く使うカスタマイズについても、別記事にて公開しています。

記事内に検索フォームを設置する方法

まず始めに、検索フォームを設置する方法は２つあります。

1. ブロックの「検索」を使う
2. ウィジェットの「検索」を使う

ブロックメニューの「検索」を使う

検索フォームを記事の中に表示するときは、ブロックメニューの「検索」をクリックするだけで簡単に検索フォームを設置できます。

検索

検索

ウィジェットの「検索」を使う

また、ウィジェットを使っても検索フォームを設置できます。

「外観」→「ウィジェット」→「検索」（置く場所）を選択。

ウィジェットにある場所から選ぶことになるため、記事上、記事中、記事下、サイドバーなど、ざっくりとした配置になります。

アピールエリアに検索フォームを設置するにはHTMLが必要

解決法はひとつ。

直接、HTMLでコードを入力することで設置できます。

以下、検索フォームをアピールエリアに設置する具体的な手順について解説します。

ここから先は有料公開です／検索窓（フォーム）を設置する方法

有料エリアの目次

1. アピールエリアに検索フォームを設置する手順
   1. 検索フォームのHTMLをコピー
   2. 「パターン」（旧：再利用ブロック）に登録する
   3. アピールエリアにショートコードを入力
2. アピールエリアのカスタマイズ
   1. アピールエリア（コンテンツ部分）の背景色を調整
   2. アピールエリアにマイクロテキストを表示するには
3. 検索フォームのカスタマイズ
   1. 「サイト内検索」の文言を変更する
   2. 検索フォームのスタイル変更
4. 検索フォームを作るHTMLの解説
   1. formタグで検索フォームを作成
   2. inputタグで入力フォームを作成
   3. buttonタグで検索ボタンを作成
5. まとめ

特定商取引法に基づく表記
サイト名	Turicco
サイトURL	https://turicco.com/
お問い合わせ	https://turicco.com/contact/
購入方法	コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。
納品方法	記事公開
販売価格	200円
お支払い 方法	クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
	※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについて	codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。