【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】

私もブログを立ち上げた当初、もう収益が欲しくていきなりアフィリンクを記事に貼ってやろう！と意気込んでいたのですが、やり方がま～よくわからない。

ASPのページにも一応広告の貼り方の解説記事はあるんですけどね、一般的すぎてちょっと初心者にはついていけないんですよね。
解説ページの例>>A8サポートガイド操作マニュアル

ということで、本記事ではWordPressテーマCocoonを使っている方へ向けて、アフィリエイトリンクの貼り方を始めから丁寧に解説していきます。

ブロックエディタ（Gutenberg）使用者向けの記事になります。クラシックエディタは解説しておりません。

あなたのパソコンスキルによってはとても難しく感じる人もいるでしょうし、簡単に感じる人もいるでしょう。

ただ、スキルに関係なく本記事はブログ収益化にとっては非常に大切な内容になりますので、あきらめることなく最後まで読んでいただきたいと思います。

また、グーグルアドセンスやAmazon・楽天のアフィリエイト広告の貼り方は本記事では詳しく紹介していきません。

別の記事にて解説していますので、詳しく知りたい方は下のリンクから見ていただければと思います。
関連記事【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
関連記事【Cocoon】商品リンクの貼り方を始めから丁寧に【解説】

Cocoonアフィリエイト広告の貼り方【基礎編】

まずは基礎編として、

を見ていくことにします。画像付きで丁寧にやっていくので、あなたも自分のパソコンでやりながら進めていきましょう。

既にASP各社には提携済みという前提でお話ししていきます。まだASPと提携していないという方は下のリンクから各所へ提携お願いいたします。

登録無料で審査もないので、誰でも簡単にできます。

提携が完了したらどのASPでもいいので、プログラム申請および提携を完了し、広告リンク作成画面までいきましょう。

バナー広告用のコードやテキスト広告用のコードが表示されますので、あなたの都合に合わせてコードを選択していきましょう。

バナー広告の貼り方

ASPの広告作成画面にて、バナー広告のコードをコピーします。

コピーしたら、WordPressの投稿画面を開きましょう。投稿画面を開いたら空白の段落ブロックを選択し、ツールバーの︙からHTMLとして編集を選択します。

しっかり注意書きと画像を追っていけばわかるので、集中して読んでくださいね。

つづいて表示された<p>と</p>の間にコピーしたコードを貼り付けます。

これでコードの貼り付けが完了しました。プレビュー画面で見てみるとちゃんとバナーが表示されています。

バナーを中央寄せにしたり投稿画面でもビジュアルを確認したい場合は、コードをコピペしたブロックを選択し、再度ツールバーの︙からビジュアル編集をクリックです。

出来上がりです。

テキスト広告の貼り方

続いてテキスト広告の貼り方です。ほとんどバナー広告の貼り方と同じやり方で貼り付けることができます。

ASPの広告作成画面にて、テキスト広告のコードをコピーします。

コピーしたら、WordPressの投稿画面を開きましょう。投稿画面を開いたら空白の段落ブロックを選択し、ツールバーの︙からHTMLとして編集を選択します。

しっかり注意書きと画像を追っていけばわかるので、集中して読んでくださいね。

つづいて表示された<p>と</p>の間にコピーしたコードを貼り付けます。

これでコードの貼り付けが完了しました。プレビュー画面で見てみるとちゃんとテキスト広告が表示されています。

テキストを中央寄せにしたり本文を追加したり、投稿画面でもビジュアルを確認したい場合は、

コードをコピペしたブロックを選択し、再度ツールバーの︙からビジュアル編集をクリックです。

登録はこちら>>A8.net みたいに自然な感じでアフィリエイトリンクを貼ることができます。

そしたら次はアフィボタンの作り方です。

アフィリエイトリンクボタンの作り方

アフィリエイトリンクボタンはCocoonブロックの囲みボタンで作ることができます。まずはASPの広告作成画面にて、テキスト広告のコードをコピーします。

コピーしたら、WordPressの投稿画面を開きましょう。投稿画面が開けたら、ブロックの追加（＋ボタン）から囲みボタンを選択します。

囲みボタンを表示できたら、囲みボタンを選択した状態で右側のサイドバーを見ましょう。囲みボタン設定のリンクタグ・ショートコードにコピーしたコードを貼り付けます。

貼り付けたら、そのままサイドバーにてボタンの装飾をしましょう。

ボタンを横並びにする方法

パソコン表示の時にボタンを2つ3つと横並びにしたいときは、カラムブロックを使うとできます。※スマホ表示の時は、横幅が狭いため縦並びになります。

ブロックの追加（+）のデザイン→カラムを使うか、ブロックの追加（+）のCocoonレイアウト→2カラム,３カラムを選択しましょう。

Cocoonアフィリエイト広告の貼り方【応用編】

続いては応用編です。基礎編で習ったことを使ってより見やすかったりクリックされやすい広告を貼れるようにしていきます。

アフィリエイトタグショートコードを使う

Cocoonにはアフィリエイトタグショートコードという機能があります。複数の記事で同じ広告を貼るときにとても威力を発揮します。

試しにやってみましょう。まずはASPのサイトから広告コードをコピーです。

コピーしたら、WordPressの画面からCocoon設定→アフィリエイトタグと進みます。

1. あなたが区別しやすいタイトルを入力
2. コピーしたコードを「内容」に貼り付け
3. エディターのリストに表示にチェック
4. 保存する

段落ブロックを選択後、ツールバーからアフィリエイトタグを押し、先ほど登録したタグを押す

[affi id=〇〇登録番号]のショートコードが段落ブロックに貼られる、プレビューを見ると実際には登録した広告が貼られています。

これでアフィリエイトタグによる広告の貼り付けが完了しました。このタグの良いところはもしも案件が停止したとき、タグ登録してある部分を修正するだけで広告を貼ってある全記事に反映されます。

例えば、あなたが5記事の目次上に転職サイトの案件を貼っていたとして、その案件が停止したとします。

いちいち5記事全部別の案件に貼りなおすのはだるいですね。この時アフィリエイトタグを使っていると、登録したタグを代わりの案件のコードに直すだけで5記事とも直すことができます。

当ブログは雑記ブログなので、そこまで何記事にもわたって同じ広告を貼るっていうことはしないのですが、それでもたくさんのアフィリエイトタグを登録しています。

あなたのブログが特化になればなるほど使うべき機能だと私は思います。

リスト（箇条書き）にアフィリエイトリンクを貼る

やり方は2通りあります。

アフィリエイトタグを使う

アフィリエイトタグを使う場合は、まずリストに貼るテキスト広告を全部Cocoon設定のアフィリエイトタグで事前に登録します。

登録が完了したら、リストブロックにタグを貼るだけ。

HTMLとして編集をやる

HTMLとして編集をやる場合は、広告を貼る前にリストを作成します。

次は、ASPからコードをコピーです。

コピーしたらWordPressの投稿画面に戻ります。先ほど作ったリストブロックを選択し、ツールバーからHTMLとして編集です。

貼り付けたい広告の文字部分を消して、コピーしておいたコードを貼り付けます。

同様にもしもとバリュコマのコードもコピーしてきて貼り付けると完成します。

HTMLとして編集からビジュアル編集に戻す場合は、リストを選択して、ツールバーの︙からビジュアル編集をクリックしましょう。

以上がリストにアフィリエイトリンクを貼る方法です。

テーブル（表）にアフィリエイトリンクを貼る

	A8
	もしも
	バリュコマ

リストのアフィリエイトリンク作成方法と同様です。こちらも2通りあります。

やり方はリストからテーブルになっただけで、ほとんど同じですのでザっと簡単に説明して終わりにしたいと思います。

詳しく見たいという方は一つ手前の項目（リスト（箇条書き）にアフィリエイトリンクを貼る）をご確認ください。

サイドバーやヘッダー、フッターにアフィリエイトリンクを貼る

サイドバーやヘッダー、フッターなんかにアフィリエイト用のバナーを貼りたいってこともよくあると思います。

その場合は、ウィジェットで広告を貼ることができます。

文字で書くとざっくり上記のような感じになります。

「これではよくわからない」という場合は画像付きでサイドバーやウィジェットの設定方法を説明した記事がありますので、下のリンクから確認してもらえればと思います。
関連記事【Cocoon】サイドバーの基本的な使い方【初心者向け】

以上でアフィリエイト広告の貼り方についての紹介はすべて終了です。以降は補足や関連情報になります。

コードをそのまま段落ブロックにコピペをすすめない理由

私はブログを開設した当初、何にも知らずに広告コードをコピーし、段落ブロックにそのまま貼り付けました。

実はその方法でもリンクは作れてしまうので、それでいいと思ってました。しかし知識を得ていくにつれて、段落ブロックにそのままコード貼り付けはよくないことがわかりました。

なぜなら、コードをそのままコピペしているにも関わらず、貼り付けられたコードはコピーしたコードとは異なったものになっているからです。

理由は不明です。私は詳しくないのでよくわかりません。

ですが、ASP各社には「生成された広告コードを広告主に無断で変更することは禁止しております」といった文言が書かれています。

意図せずとも違反となってしまいますのでそのまま段落ブロックにコピペはやめる方がいいのではないかと思っています。

さらに言えば、計測のためのタグがはずれてしまうため、うまく計測もできないという事態に陥ります。

やっちまっていた方はぼちぼち修正をしていきましょう。

ほかにもやり方はあるけれど

本記事で私が紹介したやり方のほかに、アフィリエイト広告を貼り付けるやり方はあります。

いずれもコピーしたコードをそのブロックに貼り付ければ広告が完成します。

ただ、本記事で紹介していない理由があって、

ということで今回は主にHTMLとして編集を使って広告を貼る方法を紹介させてもらっています。

Googleアドセンス・Amazon・楽天の広告の貼り方

本記事ではアフィリエイト広告の貼り方ということで、GoogleAdSenseの貼り方やAmazon楽天の物販系商品リンクの貼り方は扱ってきませんでした。

Googleアドセンスの貼り方や物販系商品リンクの使い方については下の関連記事に書いてありますので、そちらをご覧ください。

関連記事【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
関連記事【Cocoon】商品リンクの貼り方を始めから丁寧に【解説】

アフィリエイト広告を正しく貼ろう

本記事では【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】

ということで、ブロックエディタを使用しているかたに向けてASP案件の広告の貼り方をご紹介してきました。

それが伝わるように全力で書いてきました。

あなたのブログで収益が１円でも増えるように祈っています。その手助けが少しできたなら私は嬉しく思います。

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。