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

Cocoonテーマの「アピールエリア」は目立たせたい要素を配置できる便利な機能です。この記事では、Cocoonのアピールエリアに『検索フォーム』を設置する方法を紹介します。

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

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

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

検索フォームを置くためにはHTMLが必要ですが、初心者でも実装できるように丁寧に手順を説明します。この記事を参考に検索フォームをサイトの目立つ位置に配置して、訪問者の利便性を向上させましょう！

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

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

ブロックの「検索」を使う

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

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

投稿や固定ページに検索フォームを挿入するには、ブロックメニューの「検索」ブロックを利用します。この方法はシンプルで特別なHTMLの知識は不要です。

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条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。