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

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

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

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

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

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

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

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

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

表示できる場所：投稿ページ・固定ページ

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

1. 投稿または固定ページを開く。
2. ブロック追加メニューで「検索」をクリック。

これだけで簡単に検索フォームを設置できます。

検索

検索

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

表示できる場所：サイドバーやフッター等

検索フォームをサイドバーやフッターに表示する場合は、ウィジェットの「検索」を利用します。

1. 管理画面の「外観」→「ウィジェット」にアクセス。
2. 「検索」をドラッグ＆ドロップで希望の位置に配置。

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

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

アピールエリアはウィジェットやブロックと異なり、HTMLコードを直接入力してカスタマイズする仕様です。そのため、以下のポイントを押さえながら設置を進めましょう。

カスタマイズのポイント

• Cocoonのテンプレート機能を活用
  • HTMLコードをテンプレート化（ショートコード化）することで、入力作業を簡略化できます。
• 他の場所でも活用可能
  • アピールエリアに限定せず、HTMLが使える場所ならどこにでも設置できる汎用的な検索フォームを作成できます。
• カスタマイズ可能な文言
  • 「サイト内検索」などの表示テキストを自由に変更できます。

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

実装手順｜検索窓（フォーム）を設置する方法

有料エリアの目次

1. アピールエリアに検索フォームを設置する手順
   1. 検索フォームのHTMLコードを準備する
   2. 「パターン」に登録する
   3. アピールエリアにショートコードを入力
2. アピールエリアのカスタマイズ
   1. アピールエリアの背景色を調整
   2. アピールエリアにマイクロテキストを表示
   3. アピールエリアをフルスクリーンにする
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条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。