サイト型トップページの作り方を公開しています!Check

Cocoonでアフィリエイトリンクを効果的に配置!CTAボックスの作り方と活用法

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

CTA(Call to Action)は、訪問者に何かしらの行動を起こすよう促すための要素や文言のこと。アフィリエイトリンクやコンバージョンを高めたい場合、オリジナルのCTAボックスを活用することで商品やサービスの魅力をしっかりと伝えることができます。

この記事では、Cocoonで自作のCTAボックスを作るための基本的な構成とデザイン例を紹介します。

この記事で分かること
  1. CTAボックスの作り方
  2. バナーを中央寄せにする方法
  3. モバイルでの表示(余白)を整える方法 POINT
  4. パターン(再利用ブロック)に登録して呼び出す方法(何度も使うときに便利です!)

CSSを使うのは3.余白の調整 のみで難しいことはありません

自作するCTAボックスは、次のような要素で構成すると分かりやすく機能的です。

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

使用ページ ポチッププロの具体的な設定方法/実際に使ってみた便利機能を紹介 ほか

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

  • 商品リンク簡単作成
  • セール機能表示
  • らくらくデザイン
当サイトの使用例

使用ページ エックスサーバー/サブドメイン設定で2つめのブログ(複数サイト)を作る方法 ほか

\記事がお役に立てたら/
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計300件(月間約20件)購入いただきました
はっちゃん
です
プロフィール

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

テーマ「Cocoon」には簡単に使えるCTAボックス機能が搭載されていますが、デフォルトのCTAボタンが1カラム固定であるため自由なレイアウトには少し制限があります。Cocoonの評価スターやボタン機能を活用しながら、独自にデザインしたCTAボックスを作りましょう。アフィリエイトリンクや商品紹介ページをより魅力的にカスタマイズしたい方におすすめの方法です。

レイアウト要素

  • 外枠
    • ボックス全体を囲む外枠にCocoonの「白抜きボックス」を使います。ブロック設定で枠線や背景色の設定が自由にできます。
  • 画像(バナー)
    • 商品やサービスのイメージ画像を使用することで、視覚的に興味を引きやすくします。画像をボックス内の上段に配置するのがおすすめです。
  • コンテンツの枠
    • テキスト、画像、ボタンなど、さまざまな要素を配置するエリアです。枠を設定することで、内容がすっきりと整理され、見やすくなります。
  • リンクボタン
    • 最下段には行動を促すリンクボタンを配置しましょう。「詳細を見る」「今すぐ購入」などのアクションを促すテキストを入れるとコンバージョン率を上げやすくなります。

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

パソコン・モバイル対応の表示調整

CTAボックスは、パソコン(PC)とモバイルの両方で綺麗に表示されるようにできますが、それぞれのデバイスで最適な見栄えにするためにはいくつかのポイントを押さえておく必要があります。

  • パソコン表示:リンクボタンが横に3列並び、コンパクトでまとまりのあるデザインです。
  • モバイル表示:リンクボタンが縦に3行並び、シンプルで視認性が高いデザインです。

作り方としては難しくはないのですが、そのままだとボタン等の要素に行間余白が入って間延びしてしまいます。特にモバイル表示で行間が広がりすぎてしまう要素の配置を調整することが重要です。

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

そこでCTAボックスを自作する際にできたらいいなということも合わせて紹介します。

  • 行間余白の調整方法(モバイルでの余白を整える)
  • バナーの中央寄せ
  • 繰り返し使うときに便利なパターン登録

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

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

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

ちあログ

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

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

Chiakiさんの声:Post1 Post2

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

スポンサーリンク

実装手順/Cocoonで作るCTAボックスの手順

ここから先は具体的な手順を有料エリアで紹介します。

有料エリアの目次

  1. 外枠/Cocoonで作るCTAボックス
    1. 白抜きボックスの選択
    2. 白抜きボックスのスタイル変更
  2. コンテンツの枠/Cocoonで作るCTAボックス
  3. バナー/Cocoonで作るCTAボックス
    1. バナーの貼り付け
    2. バナーを中央揃えにする方法
  4. コンテンツ/Cocoonで作るCTAボックス
    1. 評価スターの設定手順
  5. リンクボタン/Cocoonで作るCTAボックス
    1. リンクボタンを作る手順
    2. ボタンの色を追加したいとき
    3. モバイルでの表示(余白)を整える
    4. 余白調整の効果
  6. Cocoonで作るCTAボックスの使い方
    1. CTAボックス/クラスの追加方法
    2. 複数のリンクボタンを並べる場合/クラスの追加方法
  7. 繰り返し使うときに便利なパターン登録/Cocoonで作るCTAボックス
  8. まとめ
特定商取引法に基づく表記
サイト名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をコピーしました