【筆者体験ベース】おすすめ副業10選>>>

Cocoonアフィリエイトタグ・リンクの貼り方3つ【全手順画像つき解説】

Cocoonアフィリエイトタグ・リンク貼り方
とち
とち

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。
※本記事にも触れてますが現在は、法人たててやっております。

赤ちゃん画像
Cocoonを使ってるけど、アフィリエイトタグの貼り方がわからない。
一応貼ってるけど、正しく貼れてるか不安でねむれない。。。

こういったCocoonユーザーの悩みを解決する記事です。

Cocoonはアフィリエイト機能が、とても使いやすいテーマです。

ただCocoonを使い始めたばかりの方にとって、アフィリエイトタグの貼り方はつまづきポイントです。

本記事では、Cocoonでできる以下3つのアフィリエイトタグ・リンクの貼り方を解説します。

  • HTMLコード直貼り
  • リンクボタン1←通常ボタン使用
  • リンクボタン2←囲みボタン使用

本記事を読めば、Cocoonでアフィリエイトは、バッチリできます。

本記事の信頼性

この記事を書いている僕はブログ歴1年、Cocoon使用歴も同じく1年。
これからご紹介するASPとアフィリエイトで、月5万円の収益を達成してます。

本題に入る前の注意点2つ
アフィリエイトの仕組みとASPの役割
  • 本記事のアフィリエイトタグ・リンクの貼り方は、ブロックエディタでご説明します。
    →Cocoonが比較的新しいテーマでブロックエディタ利用者が多い
    →クラシックエディタへのサポートが2021年末で終了する
    →アップデートでブロックエディタが使いやすく進化
    この3つが理由です。

Cocoonアフィリエイトタグ・リンクの貼り方1:HTML直貼り

Cocoonアフィリエイトタグ・リンクの貼り方1:HTML直貼り

まずhtmlコードを貼って、以下のようなテキストやバナー広告を作成する方法です。

↓テキストリンク↓
レンタルサーバー Xserver ↓バナーリンク↓
本記事では大手ASPのA8.netの画面でご説明します。
※手順は、どのASPでも同じです。

テキストタイプでもバナータイプでも、貼り方は同じです。
以下テキストタイプで説明します。

STEP1:広告と表示形式(テキストorバナー)を決める

貼る広告を決めたら(※事前提携が必要)、広告リンク作成から広告表示タイプを選択します。

A8広告作成画面

STEP2:コードをコピーする

テキストタイプなら、表示したい文面のコードを取得(全コピー)します。

A8広告選択画面

ASP側の作業は終わりです。

STEP3:「カスタムHTML」に取得したコードをペースト

ここからWordPress編集画面です。

ブロックから「カスタムHTML」を選択、ASPで取得したコードをペーストします。

カスタムHTML選択画面
カスタムHTML画面
カスタムHTMLにコード入力画面

下記のように表示されているか、プレビューで確認してみましょう。

レンタルサーバー Xserver

「カスタムHTML」でなくても、そのまま段落ブロックでペーストしたら広告表示できます。
ただこの場合、コード中の<img>タグが消える現象が起きます。

<img>はインプレッション取得のためのタグなので成果発生に影響はない、とされてますが基本的にASPはコードの改変を禁じています。

不安な方は「カスタムHTML」を使用するのが、無難です!

Cocoonアフィリエイトタグ・リンクの貼り方2:通常ボタン

Cocoonアフィリエイトタグ・リンクの貼り方2:通常ボタン

次に「Cocoonボタン」で、アフィリエイトのリンクを作成する方法です。

WordPress5.5からは、WordPressデフォルトのボタンが追加されて選べるパターンが増えました!

Cocoonボタンは、シンプルにURL(https://〜)を挿入するものです。

ASPを使う場合、単純なリンク挿入は少ないですが、海外プログラムのアフィリエイトでは多用します。
国内でもLINK-AといったASPで下記のような、URLを直接挿入するアフィリエイトができます。

リンクエー画面

STEP1:Cocoonボタンを選択

編集画面のブロックから「ボタン」を選択します。

ボタン選択画面

STEP2:リンクを挿入

編集画面右の「ボタン設定」からURLを挿入します。

ボタン設定画面

STEP3:ボタンのテキスト編集&加工

リンクを挿入したら、ボタン内のテキストも記入しましょう。
(ボタンをダブルクリックでテキスト編集できます)

ボタンの表示パターンも、Cocoonは多彩です。

<サイズ>

・小
・中
・大

<円形>

<光らせる>

クリック率がアップする色がある?

余談ですが「補色」って知ってますか?
色には下記の十二色相環というモデルがあり、「補色」とは色相環の反対にある色を指します。

マーケティング会社の研究で、活発な補色を用いて購入ボタンや問い合わせボタンを作ると、クリックされやすくなる結果が出ています。

(例)当ブログのメインカラーが下記の紺系

メインカラーだ!

メインカラーに対する「補色」のボタンがこちら↓↓↓

Cocoonアフィリエイトタグ・リンクの貼り方3:囲みボタン

Cocoonアフィリエイトタグ・リンクの貼り方3:囲みボタン

Cocoonでアフィリエイトボタンを作るときに通常、使用するのが「囲みボタン」です。

STEP1:広告と表示形式(テキストorバナー)を決める

コード取得までは「カスタムHTML」に貼る手順と同じです。

A8広告作成画面

STEP2:コードをコピーする

表示したいテキストのコードを取得(全コピー)します。

A8広告選択画面

ASP側の作業は終わりです。

STEP3:「囲みボタン」の「囲みボタン設定」にペースト

ここからWordPress編集画面です。

ブロックタイプから「囲みボタン」を選択します。

囲みボタン画面

編集画面右の「囲みボタン設定」に、ASPで取得したコードをペーストします。

囲みボタン設定画面

自由テキストの場合は、任意でボタン内テキストを変えてください。

ボタンの表示形式は、通常ボタンと同様です。

Cocoonアフィリエイトタグ・リンクの便利な貼り方

Cocoonアフィリエイトタグ・リンクの便利な貼り方

Cocoonでは、よく使うアフィリエイトタグをショートコードにして呼び出せるようになってます。

<アフィリエイトタグ登録・挿入手順>

STEP1:管理画面Cocoon設定「アフィリエイトタグ」でコード入力

Cocoon設定画面

STEP2:「アフィリエイトタグ」でコード入力

編集画面でアフィリエイト広告を挿入したい箇所で、「$」マーク(?)から登録したタグを呼び出します。

アフィリエイトタグ入力画面

このようにCocoonなら、いつでもどこでも簡単にアフィリエイトタグを呼び出せます。

僕は別でアフィリエイトサイトも運営していますが、アフィリエイト機能に関してCocoonはWordPress有料テーマに全く引け取らないです。

テーマ導入コストもないので、収益化向きのテーマとも言えますね。

ほんと、Cocoon、神。


最後に余談ですが、僕が別サイトで使用するWordPressテーマ・SWELLのボタン機能には、驚かされました。
編集画面でボタンのクリック率がわかるんです。

SWELLボタン機能画面

通常、プラグインか高額ヒートマップで導入する機能です。
やはり、SWELLも、神。

他にもアフィリエイトタグのクリック回数もとれたりと、アフィリエイトの機能性も良いです。

無料のCocoon対して、SWELLは17,600円。
高額に感じるかもですが、その分の感動が詰まっているテーマが、SWELLです。

すいません。
鬼の脱線しました、、、。

ただ最近あまりにSWELLに感動したもので、共有したいなと。

多少資金に余裕のある方は、是非、一度SWELL体感してみてください。
>>>SWELL公式ページ

CocoonとSWELLのテーマ比較は、下記の記事に詳しいんで、参考にしてみてください。

Cocoonアフィリエイトタグ・リンクの貼り方3つ【全手順画像つき解説】:まとめ

Cocoonアフィリエイトタグ・リンクの貼り方3つ【全手順画像つきで解説】:記事まとめの画像

Cocoonのアフィリエイトタグ・リンクの貼り方は以上になります。

手順は簡単なんですが、コードを見慣れていないと不安ですもんね。

僕もASP数社に、問い合わせしたことがあります。
「成果が発生しないけど、貼り方合ってる?」と。

結論、アフィリエイトタグの貼り方に問題はありませんでした。
単に、売れなかっただけ^^;

本記事で紹介したCocoonアフィリエイトタグ・リンクの正しい貼り方を実践して、大きな成果をあげましょう。

今回はこの辺で!

↓アフィリエイトするなら必須↓

コメント待ってます!

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