当サイトはエックスサーバーを利用しています お得な友達紹介特典を見る

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

アイキャッチ/検索フォーム Cocoon
Cocoon
記事内に広告が含まれています
スポンサーリンク

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

こんな方におすすめ
  • アピールアリアに検索フォームを置きたい
  • 「サイト内検索」のテキスト文面を変えたい

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

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

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

[temp id=番号]

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

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

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

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

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー38
  • 有料記事、累計190件購入いただいています
はっちゃん
です
プロフィール

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

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

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

\実際に表示した検索フォーム/
メリット
  • 設置が簡単
デメリット
  • デザインがいけていない

デザインはCSSで調整できるけど、デフォルトはイマイチ…

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

\サイドバーに表示した検索フォーム/

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

メリット
  • 設置が簡単
  • デザインがよい
デメリット
  • 置く場所が限られる(ウィジェットにあるところのみ)

記事上、記事中、記事下など、ざっくりとした配置になります。サイドバーに検索フォームを置く場合はこの方法がベスト

スポンサーリンク

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

イメージ画像/html

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

解決法はひとつ。

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

\こんな感じの検索フォームです/
  • Cocoonのテンプレート機能を使うことで入力を簡略化 簡単
  • アピールエリアに限定せず、実質どこにでも置ける検索フォームを作ることができる 汎用性
  • 「サイト内検索」のテキスト文面を変更できる

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

スポンサーリンク

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

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

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

タイトルとURLをコピーしました