簡単に、ブロックを使用して独自のCTAボックスを作成する方法

はじめに

以下を実現します。

Cocoonで自作CTAボックスを作る方法｜複数ボタンにも対応（簡単）

Cocoon標準のCTAボックスは手軽ですが、ボタンは1つだけでレイアウトも固定です。商品紹介やアフィリエイト記事では、複数の申込先を並べたい商品画像も一緒に見せたい特徴やメリットを分かりやすく伝えたいという場面も少なくありません。そんなと...

turicco.com

Cocoon標準の「CTA」ブロックはボタンが1つしかないため、アフィリエイトなどで複数のボタンが必要な場合には不向きです。

そこで、ブロックを利用して独自の「CTA」ブロックを作成します。

この記事では、この方法について説明します。

ダウンロード

以下のデータをコピーし、そのまま「段落」ブロックに貼り付けます。

<!-- wp:cocoon-blocks/blank-box-1 {"className":"my-cta","metadata":{"name":"CTAボックス"}} -->
<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box my-cta"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":21,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://ss1.xrea.com/chuya.s239.xrea.com/temp/wp-content/uploads/2023/06/1685674322.png" alt="" class="wp-image-21"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph {"metadata":{"name":"見出し"},"style":{"spacing":{"margin":{"bottom":"10px"}}}} -->
<p style="margin-bottom:10px"><span class="bold">見出し</span></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"metadata":{"name":"評価スター"},"style":{"spacing":{"margin":{"bottom":"10px"}}}} -->
<p style="margin-bottom:10px">[star rate="3" max="5" number="1"]</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>○○○○○</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>○○○○○</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>○○○○○</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"metadata":{"name":"ボタン"}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:cocoon-blocks/button-wrap-1 {"tag":"\u003ca href=#\u003e公式サイトを見る\u003c/a\u003e","size":"btn-wrap-s","isCircle":true,"align":"center","customBackgroundColor":"#ddc5b5","width":"100"} -->
<div class="wp-block-cocoon-blocks-button-wrap-1 aligncenter btn-wrap btn-wrap-block button-block btn-wrap-s btn-wrap-circle has-background has-custom-width cocoon-block-button__width-100" style="--cocoon-custom-background-color:#ddc5b5"><a href=#>公式サイトを見る</a></div>
<!-- /wp:cocoon-blocks/button-wrap-1 --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cocoon-blocks/button-wrap-1 {"tag":"\u003ca href=#\u003e公式サイトを見る\u003c/a\u003e","size":"btn-wrap-s","isCircle":true,"customBackgroundColor":"#f3d38c","width":"100"} -->
<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block btn-wrap-s btn-wrap-circle has-background has-custom-width cocoon-block-button__width-100" style="--cocoon-custom-background-color:#f3d38c"><a href=#>公式サイトを見る</a></div>
<!-- /wp:cocoon-blocks/button-wrap-1 --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cocoon-blocks/button-wrap-1 {"tag":"\u003ca href=#\u003e公式サイトを見る\u003c/a\u003e","size":"btn-wrap-s","isCircle":true,"customBackgroundColor":"#8b9b9d","width":"100"} -->
<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block btn-wrap-s btn-wrap-circle has-background has-custom-width cocoon-block-button__width-100" style="--cocoon-custom-background-color:#8b9b9d"><a href=#>公式サイトを見る</a></div>
<!-- /wp:cocoon-blocks/button-wrap-1 --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:cocoon-blocks/blank-box-1 -->

<!-- wp:html -->
<style data-wp-block-html="css">
.my-cta {
  .wp-block-columns:has(.btn-wrap) {
    gap: 10px;
  }

  .btn-wrap > a {
    padding-left: 15px;
    padding-right: 15px;
  }
}
</style>
<!-- /wp:html -->

<!-- wp:cocoon-blocks/blank-box-1 {"className":"my-cta","metadata":{"name":"CTAボックス"}} -->
<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box my-cta"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"id":21,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://ss1.xrea.com/chuya.s239.xrea.com/temp/wp-content/uploads/2023/06/1685674322.png" alt="" class="wp-image-21"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph {"metadata":{"name":"見出し"},"style":{"spacing":{"margin":{"bottom":"10px"}}}} -->
<p style="margin-bottom:10px"><span class="bold">見出し</span></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>○○○○○</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>○○○○○</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>○○○○○</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"isStackedOnMobile":false,"metadata":{"name":"スコア"}} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"point","style":{"css":"\u002d\u002dval: 8;"}} -->
<p class="point has-custom-css"></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center">項目1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"point","style":{"css":"\u002d\u002dval: 10;"}} -->
<p class="point has-custom-css"></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center">項目2</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"point","style":{"css":"\u002d\u002dval: 0;"}} -->
<p class="point has-custom-css"></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center">項目3</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"metadata":{"name":"ボタン"}} -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:cocoon-blocks/button-wrap-1 {"tag":"\u003ca href=#\u003e公式サイトを見る\u003c/a\u003e","size":"btn-wrap-s","isCircle":true,"customBackgroundColor":"#ddc5b5","width":"100"} -->
<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block btn-wrap-s btn-wrap-circle has-background has-custom-width cocoon-block-button__width-100" style="--cocoon-custom-background-color:#ddc5b5"><a href=#>公式サイトを見る</a></div>
<!-- /wp:cocoon-blocks/button-wrap-1 --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cocoon-blocks/button-wrap-1 {"tag":"\u003ca href=#\u003e公式サイトを見る\u003c/a\u003e","size":"btn-wrap-s","isCircle":true,"customBackgroundColor":"#f3d38c","width":"100"} -->
<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block btn-wrap-s btn-wrap-circle has-background has-custom-width cocoon-block-button__width-100" style="--cocoon-custom-background-color:#f3d38c"><a href=#>公式サイトを見る</a></div>
<!-- /wp:cocoon-blocks/button-wrap-1 --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cocoon-blocks/button-wrap-1 {"tag":"\u003ca href=#\u003e公式サイトを見る\u003c/a\u003e","size":"btn-wrap-s","isCircle":true,"customBackgroundColor":"#8b9b9d","width":"100"} -->
<div class="wp-block-cocoon-blocks-button-wrap-1 btn-wrap btn-wrap-block button-block btn-wrap-s btn-wrap-circle has-background has-custom-width cocoon-block-button__width-100" style="--cocoon-custom-background-color:#8b9b9d"><a href=#>公式サイトを見る</a></div>
<!-- /wp:cocoon-blocks/button-wrap-1 --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:cocoon-blocks/blank-box-1 -->

<!-- wp:html -->
<style data-wp-block-html="css">
.my-cta {
  .wp-block-columns:has(.btn-wrap) {
    gap: 10px;
  }

  .btn-wrap > a {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* 評価グラフ */
  .point {
    --p: calc(var(--val) * 10%);

    background-image: 
      radial-gradient(#ffffff 55%, transparent 58%), 
      conic-gradient(#d5525f 0% var(--p), #d9d9d9 var(--p) 100%);
    border-radius: 50%;
    color: #333;
    counter-reset: score var(--val);
    display: grid;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 60px;
    margin: 0 auto;
    place-content: center;
    width: 60px;

    &::before {
      content: counter(score);
    }
  }
}
</style>
<!-- /wp:html -->

完成イメージ

見出し

3.0

• ○○○○○
• ○○○○○
• ○○○○○

公式サイトを見る

公式サイトを見る

公式サイトを見る

画面幅が781px以下のとき、画像やボタンなどは縦並びで表示されます。

実装手順

以下の手順で実装します。

応用：CTAボックスに評価グラフを追加

前述のCTAボックスに、評価を視覚的に示す円グラフを追加し、ユーザーが直感的に評価を把握できるように、以下の内容を実現します。

【Cocoon】コピペで簡単！CVボックスデザイン7選 - Nomad Code

WordPressテーマ「Cocoon」専用のCVボックスデザイン。成約率をアップさせるレビューボックスやアプリボックスなど、7種類を用意。

code.nomad.inc

完成イメージ

見出し

• ○○○○○
• ○○○○○
• ○○○○○

項目1

項目2

項目3

公式サイトを見る

公式サイトを見る

公式サイトを見る

実装手順

以下の手順で実装します。

さいごに

今回紹介した方法を使えば、効果的なCTAボックスを簡単に作成できます。
Gutenbergエディターを活用し、CSSでスタイルを調整することで、少ないコードで視覚的に魅力的なデザインを実現できるでしょう。