【Cocoon】CTAボックスでアフィリエイトリンクをコード改変せずにボタン化する方法!

pool_cta2
あき
あき

どうも!POOLライターの"あき"です!

無料で使えるWordPressテンプレートの中で、最高峰と言えるテンプレートはなんでしょうか?

筆者は間違いなくCocoon(コクーン)と答えます。この記事へとやってきたあなたも、もちろんCocoonを使っていますよね?

さて、Cocoonには多くの機能が備わっていますが、そのうちの1つに【CTAボックス】というウィジェット機能があります。

pool_cta5

↑の画像のようなウィジェットが、Cocoonでは簡単に作成することができます。

CTA(コールトゥアクション)とは「行動喚起」を意味していますが、CTAボックスはブログに来てくれた読者を「特定のページへと誘導」することに使われます。

「このLPに読者を誘導したい!」

「このアフィリエイト案件に読者を誘導したい!」

そんな意図がある場合には、CTAボックスを使うことで、誘導先のリンクページを目立つようにブログ内へと設置させることができます。

ついついクリックしたくなるようなリンクボタンを表示させることができるので、ただのテキストリンクよりも誘導率が高くなるかもしれませんね。

しかもウィジェットなので、どのページにも固定で設置しておくことができます。

キレイなCTAボックスを手軽に作成できるのであれば、ぜひとも導入したいところだと思いますが、多くのプログラミング初心者がつまづくであろう問題が発覚しました。

それは、「アフィリエイト(広告)リンクをCTAボックスでリンクさせることができない」ということです。

アフィリエイトリンクでCTAボックスを作成後、実際にページを表示させリンクボタンをクリックしてみると、以下の画像のように404エラーページになってしまうのです。

cocoon_cta

pool_cta6

いかがでしょうか?あなたも、こんな感じでうまくリンクができなくて困っていませんか?

筆者も、初めてCTAボックスを使ってアフィリエイトリンクをボタン化させようとした時は、うまくいきませんでした。

どうやら通常のやり方では、cocoonのCTAボックスでアフィリエイトリンクを使うことはできないようです。

せっかく、あんなに見栄えのいいCTAボックスを作れるのですから、なんとかしてアフィリエイトリンクをボタン化したいですよね?

「あーでもない、こーでもない」と調べに調べて、最終的にアフィリエイトリンクをボタン化する方法を見つけたので、記録ついでにシェアします。

筆者もプログラミング初心者ですので、できるかぎり初心者目線で分かりやすく解説していきたいと思います。

というわけで、この記事では、CocoonのCTAボックスで「アフィリエイトリンクをコード改変しないでボタン化する方法」をお伝えしていきます。

「コード改変?」という方も、このまま続きをごらんください。

この記事を読むことで分かること
  • CocoonのCTAボックスで、アフィリエイトリンクを簡単コピペでボタン化する方法

スポンサーリンク
スポンサーリンク

CocoonのCTAボックスではアフィリエイトリンクをボタン化できない?

pool_cta3

さて、CocoonのCTAボックスでは「アフィリエイト(広告)リンクをボタン化できない」ということが分かりました。

これはどういうことなのでしょうか?もう少し深く解説しますね。

cocoonでは通常、CTAボックスウィジェットを設定する際の「CTAボタンURL」欄に希望のリンク先を入力することで、簡単にリンク先をボタン化できるように設計されています。

例えば、https://pool-i.com/(当ブログのトップページ)のような通常のURLリンクであれば、正常にリンクされるのですが…

このリンク先が「ASPなどで取得したアフィリエイト(広告)リンク」である場合、リンクが正常に機能しないのです。

そのため、リンクボタンをクリックしても404エラーページ(ページが見つからない)になってしまうわけですね。

アフィリエイトリンクは、アフィリエイトタグとも呼ばれています。

アフィリエイトリンクが使えないとなると、CTAボックスを使う機会はグッと減るのではないでしょうか?

「それでは、もったいない!」

というわけで、cocoonのCTAボックスでアフィリエイトリンクを無理やりボタン表示させていきましょう(笑)

事項から、アフィリエイトリンクをボタン化する方法をお伝えしていきます。

あき
あき

本当に簡単ですよ!

CocoonのCTAボックスでアフィリエイトリンクをボタン化するには?

pool_cta

まず、Cocoonでアフィリエイトリンクをボタン化させるための基本手順です。

基本手順
  1. ウィジェット設定の際に「CTAボタンテキスト」と「CTAボタンURL」の欄には何も入力しない
  2. 「CTAメッセージ」に直接、アフィリエイトリンクとボタン化させるためのコードを入力する

それでは実際にアフィリエイトリンクをボタン化していきます。

例として、「もしもアフィリエイト」からAmazonプライムのアフィリエイトリンクを取得して説明しますね。

まずは、Amazonプライムのテキストリンクを「どこでもリンク」から生成します。

pool_cta7

↓生成したリンクコードがこちら↓

※一部IDなどを改変しています

上記アフィリエイトリンクのaタグにクラス属性を付加して、ボタン化のスタイリングを行っていきます。

初心者向けにざっくりと解説すると、a href(aタグ)は、リンク先の場所を指定するコードです。
そのリンクに、class属性でボタンのデザインを付けてあげるイメージですね。
class属性とは、class名を付けることによってCSSから個別でスタイリングを呼び出すことができるコードです。
※CSSの役割から分かっていない場合は、難しいかもしれません。

さて、ボタン化のスタイリングですが、cocoonにはもともと複数のボタンスタイルがCSSファイルに記述されています。せっかくなので、そのまま使っちゃいましょう。

例えば、赤いボタン(大)でボタンを作る場合には、以下のclass名を使います。

class=”btn btn-red btn-l”

上記のコードを、先ほど生成したAmazonプライムのアフィリエイトリンク内にあるrel=”nofollow”というコードの後ろに入力します。

↓実際にコードを入れると、こんなかんじです。↓

“btn btn-red btn-l”というのがclass名の部分です。CSSに記述されている”btn btn-red btn-l”という名前のスタイリングを呼び出してくれます。

赤いボタン以外にも複数色ありますし、ボタンのサイズも大中小とあるので、Cocoon作者わいひらさんの記事を参考に、お好きな色とサイズのコードに変更してください。

記事作成に使える拡張スタイル。ボタン編。
スタイル拡張ボタンの使い方。サンプルコードと表示例です。

というわけで、できあがったコードをCTAボックスの「CTAメッセージ」の欄に入力すれば、アフィリエイトリンクを使用したリンクボタンを表示させることができます。

「よーし、それじゃあ早速CTAボックスを作ろう!」

はやる気持ちは分かりますが、もう少し待ってください。実は、ここまででお伝えした方法だと問題があるのです。

あき
あき

このままでは、アフィリエイトリンクのコード改変になるかも!?

アフィリエイトリンクのコードを改変するとヤバい!?

先ほど作ったソースコードをよく見てみると、アフィリエイトリンクの中にclass=”btn btn-red btn-l”のコードが入ってしまっています。

これがアフィリエイトリンクの「コード改変」となるわけです。

基本的にほとんどのASPがコードの改変は認めていません。最悪の場合、提携解除や成果報酬が確定しなかったりするので、できればコードの改変はしない方向でいきたいものです。

「じゃあ、どうやってコード改変しないでボタンリンク化するんだよ!」

ってことだと思うのですが、実はCocoonは「バージョン1.2.1」からアフィリエイトリンクに対応したリンクボタンが簡単に作れる機能が追加されているのです。

このバージョンアップがきた瞬間に「これだ!!!」って思いましたねw

というわけで、「バージョン1.2.1」から使用可能になったリンクボタン作成機能を使って、アフィリエイトリンクをボタン化させていきたいと思います。

あき
あき

「最初からこっち教えろよ…」とか言わないでくださいねw

(遠回りしましたが、コード改変について流れを知ってもらいたかったんです…)

【簡単】アフィリエイトリンクのコードを改変せずにボタン化する方法

pool_cta4
Cocoonのバージョンが「バージョン1.2.1」以降になっていない場合は、この方法が使えないので、WordPressのホーム > 更新からテーマの更新を行ってください。

アフィリエイトリンクをコード改変せずにリンクボタンにしていくのですが、大きく分けて手順は以下のたった3つです。

  1. リンクボタンを作成する
  2. CTAボックスに貼り付ける
  3. 装飾をする

1.リンクボタンを作成する

まずは、アフィリエイトリンクに対応したボタンを作りましょう。

WordPressの投稿 > 新規追加 から、テキストモードの状態で、エディターにアフィリエイトリンクを貼り付けます。(以下の画像では、先ほど作ったAmazonプライムのテキストリンクを貼り付けてます。)

p_cocoon_cta

クリックで画像拡大

アフィリエイトリンクはバナーリンクではなく、テキストリンクで作ってくださいね。 次に、テキストモードからビジュアルモードに切り替えてください。

テキストリンクがビジュアル表示されていると思います。

テキストを範囲選択した状態でエディター上部(ドロップダウンリスト)から「スタイル」項目 > 囲みボタン >お好きな色とサイズを選択してください。(画像では、レッド大を選択しています。)

p_cocoon_cta

クリックで画像拡大

↓これで、コードを改変していないリンクボタンの完成です!↓

p_cocoon_cta

クリックで画像拡大

あき
あき

簡単すぎる!

本当にコードが改変されていないのか、テキストモードに切り替えて確認してみましょう。

cocoon_cta

クリックで画像拡大

どうでしょうか?

アフィリエイトリンクの外側をdiv classタグで囲んでいる形になっているのが分かります。 これならば、本来のコードを崩していないので、問題がなさそうです。

それでは、作ったコードをテキストモードからコピーして次に進みます。

2.CTAボックスに貼り付ける

CTAボックスのウィジェットを開いたら、先ほどコピーしたコードを「CTAメッセージ」の1番下に貼り付けましょう。

コードの前には、CTAボックスで表示させたいテキストを適宜入力してください。「タイトル」、「見出し」、「画像」も必要に応じて入力してください。

「ボタンテキスト」、「ボタンURL」は、未入力。「ボタン色」は、どの色を選択しても関係ないので、そのままで大丈夫です。

「自動的に段落を追加する」は、おそらくpタグを使わなくても段落を入れてくれる機能だと思うので、チェックを入れています。

さぁ、それでは保存をして実際の表示を確認してみましょう。

↓サンプル記事を作成して、そこにCTAボックスを表示させてみました。↓

「画像あり・上下配置」
cocoon_cta

きれいにボタンが表示されていますよね?

「画像あり・左右配置」

あれ?左右配置にしたらボタンが崩れました。これは、ボタンのサイズが大きいせいで崩れています。

本来、CTAボックスの機能で表示させるボタンは、画像とテキストの下に配置されます。画像で確認してみましょう。

↓ブログトップをリンクしたCTAボックス機能のボタン↓
cocoon_cta
クリックで画像拡大

画像とテキストの下にボタン配置されていますよね?

しかし、ここまでで紹介してきた方法でボタンを設置すると、「CTAメッセージ」内にボタンを置いているので、メッセージスペースにボタンが表示されます。

そうすると、画像とテキストを左右配置にしたときに、ボタン(大)では横幅がメッセージスペースに収まりきらず、デザインが崩れるわけです。

画像とテキストが上下配置であれば、ボタンの横幅をジャマするものがないので、デザイン崩れすることはありません。

画像とテキストを左右配置にしたい場合は、リンクボタンを作る際に、「ボタン(中)」、または「ボタン(小)」のサイズで作りましょう。

中か小サイズのボタンであれば、横幅が短いのでデザイン崩れを起こしません。

ボタン(中)で作ったときのリンクボタン
cocoon_cta
ボタン(小)で作ったときのリンクボタン
cocoon_cta

どうでしょうか?だいぶ良くなりましたね。正直これでも十分なのですが、実はボタン(大)にはあった矢印マークがボタン(中)と(小)には無くなっています。

なので、最後に矢印マークを装飾する方法をお伝えしておきたいと思います。

3.装飾をする

正直、ここはおまけみたいなものです。

「矢印マークなんかいらないよ!」という方はスルーしていただいて構いません。

簡単に矢印マークを付ける方法として、2つご紹介したいと思います。

  1. 記号の「>」を使う
  2. Font Awesomeを使ってアイコンを付ける

1.「記号の「>」を使う」は、もうそのままですね。

これが1番手っ取り早い。リンクテキストになる部分の後ろにそのまま入力してください。半角か全角かは、お好みですね。テキストと「>」のあいだに、いくつかスペースを開けると見栄えがよくなります。

cocoon_cta

2.「Font Awesomeを使ってアイコンを付ける」ですが、Font Awesomeについてや導入方法は、サルワカさんの記事が大変参考になりますので、そちらをどうぞ。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

Font Awesomeの導入準備ができたら、あとはサイトから好きなアイコンを探してきて、コードを貼るだけです。

cocoon_cta

クリックで画像拡大

例えば、上記画像のアイコンをリンクテキストの後ろに入れてみましょう。

1.ページ上部にあるコードをコピーします。

2.リンクテキストの後ろにペーストしてください。

↓コピペ前↓

↓コピペ後↓

この場合も、リンクテキストとの間にスペースを入れると、見栄えが良くなりますね。

それでは、更新して実際の表示を確認してみましょう。

cocoon_cta

アイコンが表示されましたね。かなりオシャレです。あとは、お好きなアイコンを選んで変更してくださいね。

ちなみに、サンプルではボタン(中)を使いましたが、メッセージスペースに対して少しボタンの横幅が短く感じますね。

もう少し横いっぱいのボタンにしたい場合は、リンクテキストの文字数を増やすか、スペースをたくさん空けてから矢印マークを入れてあげると、いい感じでボタンの 横幅が広がると思います。

実際の表示を確認しながら調整してみてくださいね。

それでは、お疲れ様でした。長くなりましたが、以上となります。

まとめ

cocoon_cta

この記事では、WordPressテンプレート「Cocoon」のCTAボックスで、アフィリエイトリンクをコード改変せずにボタン化する方法をお伝えしてきました。

とても簡単にできるので、CTAボックスで誘導したいアフィリエイト案件があれば、ぜひ参考にしてみてください。

なお、筆者はプログラミング初心者のため、コードに何か問題が発覚しましたら、コメントより教えていただけると幸いです。

ブログ運営をするにあたっては、プログラミングはある程度できた方がデザインカスタマイズが捗っていいですよね?

筆者も初心者なので、猛勉強中です。正直コードと長時間にらみ合っていると吐き気がしてきます(笑)

あき
あき

でも、おしゃれなブログを作りたいから頑張ろう…

筆者がブログカスタマイズの勉強に買ったおすすめの書籍を紹介

デザインの学校 これからはじめる HTML & CSSの本

HTMLもCSSもほとんど何も分からない人向きの本です。

いちばんよくわかるHTML5&CSS3デザインきちんと入門

初心者にはこちらの本がおすすめです。

最短でプログラミングを学ぶならウェブスクールがおすすめ

プログラミングのオンラインスクールです。独学よりプロに直接教わるという手もあります。

あき
あき

最後まで読んでくれてありがとう☆

スポンサーリンク
スポンサーリンク
スポンサーリンク
✐POOLライターあき✐おすすめの動画配信サービス
Amazonプライムビデオ~日常が3倍楽しくなる~

プライム会員<月額400円>になれば、会員特典対象の映画やドラマ、アニメ、Amazon Original 作品が見放題になります。
30日間の無料体験があるので、まずはお試しください。無料体験中にいつでもキャンセル可能です!

30日間の無料体験はこちらから 

Web
あきをフォローする
この記事を書いた人はだれ?
あき

雑記ブログ「POOL」の運営&ライターをしているアラサー男子。

2019年の5月に1児のパパになります☆

「圧倒的な金」と「圧倒的な自由がほしい」が口癖。ざわざわ…ざわざわ…

あきをフォローする
POOL

コメントはこちらから