Cocoonテーマの「アピールエリア」は、注目させたい要素を目立たせるのに便利な機能です。
この記事では、このアピールエリアに 検索フォームを設置する方法 を解説します。設置例やショートコード、カスタマイズ方法についてもご紹介しますので、初心者の方でも簡単に実装可能です!
当サイトのトップページでも同じ形式を採用していますので、ぜひご覧ください。
\実際に使う検索フォーム/
この記事で分かること
- アピールエリアに検索フォームを配置する方法
- 検索フォームの文言をカスタマイズする方法
- 簡単に使えるショートコードの活用法
実装イメージ|Cocoonアピールエリアに検索窓(フォーム)を設置
アピールエリア内に検索フォームを配置すると、以下のような仕上がりになります。

白枠部分の背景色はCSSを使って調整可能です。
- 背景色を透明にする
- 背景色の濃さ(透過率)を変更

記事内に検索フォームを設置する方法
まず始めに、テーマの機能を使って検索フォームを設置する方法は2つあります。
ブロックメニューの「検索」を使う
表示できる場所:投稿ページ・固定ページ
検索フォームを投稿や固定ページに表示する場合は、「検索」ブロックを利用します。この方法はシンプルで特別なHTMLの知識は不要です。
- 投稿または固定ページを開く。
- ブロック追加メニューで「検索」をクリック。

これだけで簡単に検索フォームを設置できます。
\実際にブロックで表示した検索フォーム/
メリット
デメリット

デザインはCSSで調整できるとはいえ、デフォルトはイマイチ…
ウィジェットの「検索」を使う
表示できる場所:サイドバーやフッター等
検索フォームをサイドバーやフッターに表示する場合は、ウィジェットの「検索」を利用します。
- 管理画面の「外観」→「ウィジェット」にアクセス。
- 「検索」をドラッグ&ドロップで希望の位置に配置。

\サイドバーに表示した検索フォーム/
メリット
デメリット
ウィジェットにある場所から選ぶことになるため、記事上、記事中、記事下、サイドバーなど、ざっくりとした配置になります。
アピールエリア内に検索フォームを設置する方法


この検索フォームをアピールエリアに置けないかな?
アピールエリアはウィジェットやブロックと異なり、HTMLコードを直接入力してカスタマイズする仕様です。以下のポイントを押さえながら設置を進めましょう。
カスタマイズのポイント
以下、具体的な手順について解説します。

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