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

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

HTMLコード（コピペOK）と解説を有料公開しています。記事を見る

こんな方におすすめ

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

当サイトのトップページにも設置しています。

表示したいところに下記のショートコードを入れるだけで、このような検索フォームになります。

[temp id=番号]

アピールエリアに置くとこんな感じ。白枠部分の背景色は消したり、濃さ（透過率）をCSSで調整できます。

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

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

Contents

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

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

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

＼実際にブロックで表示した検索フォーム／

メリット

デメリット

デザインはCSSで調整できるとはいえ、デフォルトはイマイチ…

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

サイドバーに検索フォームを置く場合はこの方法がベスト。

＼サイドバーに表示した検索フォーム／

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

メリット

デメリット

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

この検索フォームをアピールエリアに置けないかな？

解決法はひとつ。

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

＼こんな感じの検索フォームです／

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

書いていること

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