cocoonのctaボックスのボタンを増やすカスタマイズ

Cocoonのctaボックスをカスタマイズし、ボタンを増やしました。
アイキャッチのように、ボタンが2つになってます。

流れとしては以下です。

1. 通常の方法でCTAを表示

2. HTMLを表示

3. ボタン部分を増やすカスタマイズ

4. 色を変える

5. HTMLウィジェットで設置

通常の方法でCTAを表示

CTA（コール トゥ アクション）ボックスを作成する方法

まず公式の方法で普通のを設置。

HTMLをコピー

設置したCTAボックスのHTMLをコピーします。
（ここの方法とかで見る）

たぶん以下のような感じのはず。

<div class="cta-box cta-top-and-bottom">
<div class="cta-heading"> モンスター社員の教科書</div>
<div class="cta-content">
<div class="cta-thumb">
<a href="https://note.com/baacash/n/nde739916f7f7">
<img src="https://baacash.com/wp-content/uploads/2022/11/148b93d81b40dc02ee4aa9bde111710d.jpg" alt="" loading="lazy" decoding="async">
</a>
</div>
</div>
<div class="cta-button">
<a href="https://note.com/baacash/n/nde739916f7f7" class="btn btn-green btn-l">noteで読んでみる</a>
</div>
</div>

太字にしたところがボタンの部分です。

ボタン部分を増やすカスタマイズ

上記のボタンの部分を2つに増やします。

<div class="cta-box cta-top-and-bottom">
<div class="cta-heading"> モンスター社員の教科書</div>
<div class="cta-content">
<div class="cta-thumb">
<a href="https://note.com/baacash/n/nde739916f7f7">
<img src="https://baacash.com/wp-content/uploads/2022/11/148b93d81b40dc02ee4aa9bde111710d.jpg" alt="" loading="lazy" decoding="async">
</a>
</div>
</div>
<div class="cta-button">
<a href="https://note.com/baacash/n/nde739916f7f7" class="btn btn-green btn-l">noteで読んでみる</a>
</div>
<div class="cta-button"><a href="https://note.com/baacash/n/nde739916f7f7" class="btn btn-green btn-l">noteで読んでみる</a>
</div>
</div>

ボタンを増やしました。

ボタンのリンク・色を変える

<div class="cta-box cta-top-and-bottom">
<div class="cta-heading"> モンスター社員の教科書</div>
<div class="cta-content">
<div class="cta-thumb">
<a href="https://note.com/baacash/n/nde739916f7f7">
<img src="https://baacash.com/wp-content/uploads/2022/11/148b93d81b40dc02ee4aa9bde111710d.jpg" alt="" loading="lazy" decoding="async">
</a>
</div>
</div>
<div class="cta-button">
<a href="https://note.com/baacash/n/nde739916f7f7" class="btn btn-green btn-l">noteで読んでみる</a>
</div>
<div class="cta-button">
<a href="https://tips.jp/u/n_fx/a/monster" class="btn btn-orange btn-l">Tipsで読んでみる</a>
</div>
</div>

リンク、ボタン色、文言を変更します。

リンクは追加したボタンのリンク先。

ボタン色は
「btn btn-orange btn-l」
の部分を変更すると変わります。

また適当なCTAボックスを設置してみて、
使いたいボタン色がどういう表現になってるか調べましょう。

文言はボタンに設定する文字列ですね。

カスタマイズしたCTAを設置

アフィリエイトタグの一元管理機能の使い方

できたHTMLを上記アフィリエイトタグの方法で設置します。
（HTMLウィジェットでもいいはず）