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

Cocoonで作るCTAボックス/アフィリエイトリンク作成に便利

CTAボックス Cocoon
Cocoon
記事内に広告が含まれています
スポンサーリンク

この記事では、ブロックエディタを使ったCTAボックスの作り方を紹介します。

CTA(Call to Action)は、訪問者に何かしらの行動を起こすよう促すための要素や文言のこと。サイトで商品やサービスを紹介するときに活躍します。

Cocoon機能でもCTAボックスはありますが、ボタンは1カラムなのでもっと自由にいい感じにできないかな?と考えて、レイアウトは「自作」です。ボタン、評価スター等はCocoonの機能を使って簡単に作っています。

このようなレイアウトで作ります

ワードプレスプラグイン/Pochipp(ポチップ)

  • 商品リンク簡単作成
  • セール機能表示
  • らくらくデザイン

また、少しレイアウトや背景色を変えてもおしゃれになります。(背景色はサイドバーで選択するだけ)

\記事がお役に立てたら/

画像をたくさん準備して、誰にでも作れるように解説しています。

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

CTA(Call to Action)の役割

CTAはCall to Actionの意味で、以下のような役割があります。

  • 行動を促す
    • 訪問者に何かしらの行動を取らせるよう促します。
    • 例:「今すぐ登録する」など
  • ナビゲーションの手助け
    • 特定のページに訪問者を案内するのに役立ちます。
      例:「公式サイトを見る」「キャンペーン情報を見る」など
  • 目的の達成
    • サイトの目的を達成するのに役立ちます。
      例:「購入する」「申し込む
スポンサーリンク

Cocoonで作るCTAボックスの構成

レイアウト

ブロックを配置しているだけなので、レイアウトは後から自由に変更できます

上段左

画像(バナー等)

上段右
  • 商品・サービス名
  • 評価スター
  • 商品・サービス概要
下段

リンクボタン

パソコンとモバイルでの表示比較

  • パソコン:リンクボタンが横に3列並びます
  • モバイル:リンクボタンが縦に3行並びます

一見簡単そう!に見えます。そう、作り方としては難しくはないのですが、初期設定のままだとボタン等の要素間に余白が入って間延びしてしまうんです。(特にモバイル表示で目立ちます)

CCSに馴染みがないとこの余白を消すのも一苦労ですよね。

CTAボックスの余白の調整方法(モバイルでの余白を整える)バナーの中央寄せ、繰り返し使うときに便利なパターン登録など、できたらいいなということも合わせて紹介します。

ボタンの色はCocoonのエディタで簡単に変更できます。カラーパレットの色を追加する場合はこちらの記事を参考にしてください。

スポンサーリンク

Cocoonで作るCTAボックスの導入例

当カスタマイズを参考にしたCTAボックスの導入サイトを紹介します。

ちあログ

温泉ソムリエChiakiさんが、おすすめの宿の情報を実体験で発信している素敵なサイトです!

掲載ページ

リンクを作成したものの、モバイルでびよーんとあいてしまう余白に悩まれていたので喜んでいただけました^^

Chiakiさんの声:Post1 Post2

旅行系の紹介にもぴったりですね!

スポンサーリンク

ここから先は有料公開です/Cocoonで作るCTAボックスの手順

それでは作り方を解説していきます。

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

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

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

Comment コメントはこちらへ

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