- A8.netやもしもアフィリエイト、バリューコマースなどのASPと提携したけど、自分のブログにどうやって広告を貼ればいいかわからない
- コードをコピーしてブログに貼り付けるとはどういうことだ？
私もブログを立ち上げた当初、もう収益が欲しくていきなりアフィリンクを記事に貼ってやろう！と意気込んでいたのですが、やり方がま～よくわからない。
ここも初心者ブロガーつまづきポイントの一つですよね。
ASPのページにも一応広告の貼り方の解説記事はあるんですけどね、一般的すぎてちょっと初心者にはついていけないんですよね。
解説ページの例>>A8サポートガイド操作マニュアル
ということで、本記事ではWordPressテーマCocoonを使っている方へ向けて、アフィリエイトリンクの貼り方を始めから丁寧に解説していきます。
ブロックエディタ（Gutenberg）使用者向けの記事になります。クラシックエディタは解説しておりません。
登録はこちら>>もしもアフィリエイト
本文に[affi id=○○]と書くと…
 | A8 |
 | もしも |
| バリュコマ |
あなたのパソコンスキルによってはとても難しく感じる人もいるでしょうし、簡単に感じる人もいるでしょう。
ただ、スキルに関係なく本記事はブログ収益化にとっては非常に大切な内容になりますので、あきらめることなく最後まで読んでいただきたいと思います。
また、グーグルアドセンスやAmazon・楽天のアフィリエイト広告の貼り方は本記事では詳しく紹介していきません。
別の記事にて解説していますので、詳しく知りたい方は下のリンクから見ていただければと思います。
関連記事【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
関連記事ヤフーショッピングをブログでアフィリエイトしよう！商品リンクのやり方から料率まで詳しく解説します
それでは順番に見ていきましょう！
Cocoonアフィリエイト広告の貼り方【基礎編】
まずは基礎編として、
- バナー広告の貼り方
- テキスト広告の貼り方
- アフィリエイトボタンの作り方
を見ていくことにします。画像付きで丁寧にやっていくので、あなたも自分のパソコンでやりながら進めていきましょう。
既にASP各社には提携済みという前提でお話ししていきます。まだASPと提携していないという方は下のリンクから各所へ提携お願いいたします。
登録無料で審査もないので、誰でも簡単にできます。
- A8.net
…定番中の定番、ほぼ全員登録している - もしもアフィリエイト
…Amazon楽天ならここ
バリューコマース…Yahoo!ショッピングならここ
提携が完了したらどのASPでもいいので、プログラム申請および提携を完了し、広告リンク作成画面までいきましょう。
参加中プログラム押す
バナー広告用のコードやテキスト広告用のコードが表示されますので、あなたの都合に合わせてコードを選択していきましょう。
次の項目へ続きます
バナー広告の貼り方
ASPの広告作成画面にて、バナー広告のコードをコピーします。
コピーしたら、WordPressの投稿画面を開きましょう。投稿画面を開いたら空白の段落ブロックを選択し、ツールバーの︙からHTMLとして編集を選択します。
しっかり注意書きと画像を追っていけばわかるので、集中して読んでくださいね。
︙ボタンがない人は次の緑のところに注目です
投稿画面のトップにツールバーを表示させます。下の画像を参考にして操作しましょう。
投稿画面右上の歯車マーク（⚙）の右となりの︙からトップツールバーをチェックです。
これで投稿画面トップに常時ツールバーが表示されました。改めてツールバー︙からHTMLへ編集を押しましょう。
つづいて表示された<p>と</p>の間にコピーしたコードを貼り付けます。
これでコードの貼り付けが完了しました。プレビュー画面で見てみるとちゃんとバナーが表示されています。
バナーを中央寄せにしたり投稿画面でもビジュアルを確認したい場合は、コードをコピペしたブロックを選択し、再度ツールバーの︙からビジュアル編集をクリックです。
出来上がりです。
Cocoonマイクロコピーブロックのマイクロテキストを使っています。
以上がバナー広告の貼り方です
テキスト広告の貼り方
続いてテキスト広告の貼り方です。ほとんどバナー広告の貼り方と同じやり方で貼り付けることができます。
ASPの広告作成画面にて、テキスト広告のコードをコピーします。
コピーしたら、WordPressの投稿画面を開きましょう。投稿画面を開いたら空白の段落ブロックを選択し、ツールバーの︙からHTMLとして編集を選択します。
しっかり注意書きと画像を追っていけばわかるので、集中して読んでくださいね。
︙ボタンがない人は次の緑のところに注目です
投稿画面のトップにツールバーを表示させます。下の画像を参考にして操作しましょう。
投稿画面右上の歯車マーク（⚙）右となりの︙からトップツールバーをチェックです。
これで投稿画面トップに常時ツールバーが表示されました。改めてツールバー︙からHTMLへ編集を押しましょう。
つづいて表示された<p>と</p>の間にコピーしたコードを貼り付けます。
これでコードの貼り付けが完了しました。プレビュー画面で見てみるとちゃんとテキスト広告が表示されています。
テキストを中央寄せにしたり本文を追加したり、投稿画面でもビジュアルを確認したい場合は、
コードをコピペしたブロックを選択し、再度ツールバーの︙からビジュアル編集をクリックです。
登録はこちら>>A8.net みたいに自然な感じでアフィリエイトリンクを貼ることができます。
登録はこちら>>はツールバーにあるバッジの機能を使っています。マーカー引く機能などと一緒です。
- 普通に段落ブロックに「登録はこちら>>」と書く
- 書いた「登録はこちら>>」をドラッグする
- バッジの好きな色を選択
- 装飾した文字を取り消すときはもう一度文字をドラッグして装飾したバッジを押す
詳しくは関連記事【Cocoon】投稿画面ツールバー機能一覧｜文字色・ルビほか【初心者向け】をご覧ください。
そしたら次はアフィボタンの作り方です。
アフィリエイトリンクボタンの作り方
アフィリエイトリンクボタンはCocoonブロックの囲みボタンで作ることができます。まずはASPの広告作成画面にて、テキスト広告のコードをコピーします。
コピーしたら、WordPressの投稿画面を開きましょう。投稿画面が開けたら、ブロックの追加（＋ボタン）から囲みボタンを選択します。
囲みボタンを表示できたら、囲みボタンを選択した状態で右側のサイドバーを見ましょう。囲みボタン設定のリンクタグ・ショートコードにコピーしたコードを貼り付けます。
貼り付けたら、そのままサイドバーにてボタンの装飾をしましょう。
ボタンを横並びにする方法
パソコン表示の時にボタンを2つ3つと横並びにしたいときは、カラムブロックを使うとできます。※スマホ表示の時は、横幅が狭いため縦並びになります。
ブロックの追加（+）のデザイン→カラムを使うか、ブロックの追加（+）のCocoonレイアウト→2カラム,３カラムを選択しましょう。
これであなたのブログにもアフィリエイト広告が貼れるようになりました！
Cocoonアフィリエイト広告の貼り方【応用編】
続いては応用編です。基礎編で習ったことを使ってより見やすかったりクリックされやすい広告を貼れるようにしていきます。
アフィリエイトタグショートコードを使う
Cocoonにはアフィリエイトタグショートコードという機能があります。複数の記事で同じ広告を貼るときにとても威力を発揮します。
試しにやってみましょう。まずはASPのサイトから広告コードをコピーです。
コピーしたら、WordPressの画面からCocoon設定→アフィリエイトタグと進みます。
- あなたが区別しやすいタイトルを入力
- コピーしたコードを「内容」に貼り付け
- エディターのリストに表示にチェック
- 保存する
タグが登録できたので、投稿画面に移りましょう
段落ブロックを選択後、ツールバーからアフィリエイトタグを押し、先ほど登録したタグを押す
[affi id=〇〇]のショートコードが段落ブロックに貼られる、プレビューを見ると実際には登録した広告が貼られています。
これでアフィリエイトタグによる広告の貼り付けが完了しました。このタグの良いところはもしも案件が停止したとき、タグ登録してある部分を修正するだけで広告を貼ってある全記事に反映されます。
例えば、あなたが5記事の目次上に転職サイトの案件を貼っていたとして、その案件が停止したとします。
いちいち5記事全部別の案件に貼りなおすのはだるいですね。この時アフィリエイトタグを使っていると、登録したタグを代わりの案件のコードに直すだけで5記事とも直すことができます。
省エネで貼り替えが完了しますね
当ブログは雑記ブログなので、そこまで何記事にもわたって同じ広告を貼るっていうことはしないのですが、それでもたくさんのアフィリエイトタグを登録しています。
あなたのブログが特化になればなるほど使うべき機能だと私は思います。
リスト（箇条書き）にアフィリエイトリンクを貼る
やり方は2通りあります。
- アフィリエイトタグを使う
- HTMLとして編集をやる
アフィリエイトタグを使う
アフィリエイトタグを使う場合は、まずリストに貼るテキスト広告を全部Cocoon設定のアフィリエイトタグで事前に登録します。
登録が完了したら、リストブロックにタグを貼るだけ。
- [affi id=1]
- [affi id=2]
- [affi id=3]
HTMLとして編集をやる
HTMLとして編集をやる場合は、広告を貼る前にリストを作成します。
- A8をはる
- もしもをはる
- バリューコマースを貼る
次は、ASPからコードをコピーです。
コピーしたらWordPressの投稿画面に戻ります。先ほど作ったリストブロックを選択し、ツールバーからHTMLとして編集です。
投稿画面のトップにツールバーを表示させます。下の画像を参考にして操作しましょう。
投稿画面右上の歯車マーク（⚙）右となりの︙からトップツールバーをチェックです。
これで投稿画面トップに常時ツールバーが表示されました。改めてツールバー︙からHTMLへ編集を押しましょう。
貼り付けたい広告の文字部分を消して、コピーしておいたコードを貼り付けます。
同様にもしもとバリュコマのコードもコピーしてきて貼り付けると完成します。
HTMLとして編集からビジュアル編集に戻す場合は、リストを選択して、ツールバーの︙からビジュアル編集をクリックしましょう。
以上がリストにアフィリエイトリンクを貼る方法です。
テーブル（表）にアフィリエイトリンクを貼る
| A8 |
| もしも |
| バリュコマ |
リストのアフィリエイトリンク作成方法と同様です。こちらも2通りあります。
- アフィリエイトタグを使う
- HTMLとして編集をやる
やり方はリストからテーブルになっただけで、ほとんど同じですのでザっと簡単に説明して終わりにしたいと思います。
詳しく見たいという方は一つ手前の項目（リスト（箇条書き）にアフィリエイトリンクを貼る）をご確認ください。
- 事前に表に入れたい広告をCocoon設定→アフィリエイトタグで登録する
- 投稿画面で表を作る
- 表のセル（マス）ひとつひとつに登録したアフィリエイトタグを入れる
- 完成
- 貼りたい広告をイメージして表を作る
- ASPから広告のコードをコピー
- 表のブロックを選択してツールバーからHTMLとして編集を選択
- 貼りたい広告部分の文字を消してコードを貼り付け
- 広告の数だけ４を繰り返す
- 貼り付け終わったら表ブロックを選択してツールバーよりビジュアル編集を押す
- 完成
じっくり読めば絶対いけます
サイドバーやヘッダー、フッターにアフィリエイトリンクを貼る
サイドバーやヘッダー、フッターなんかにアフィリエイト用のバナーを貼りたいってこともよくあると思います。
その場合は、ウィジェットで広告を貼ることができます。
- ステップ１WordPressの画面から外観→ウィジェット
- ステップ２利用できるウィジェットから広告を見つけましょう
PCだけに表示させたいなら広告（PC用）、スマホだけに表示させたいなら広告（モバイル用）を選択。両方に表示なら広告を選択
- ステップ３広告を選択し、貼りたい場所にチェックしてウィジェットを追加を押す
- ステップ４ASPから広告コードをコピーして、追加された広告ウィジェットの広告タグのところにペースト
- ステップ５保存して完了
文字で書くとざっくり上記のような感じになります。
「これではよくわからない」という場合は画像付きでサイドバーやウィジェットの設定方法を説明した記事がありますので、下のリンクから確認してもらえればと思います。
関連記事【Cocoon】サイドバーの基本的な使い方【初心者向け】
以上でアフィリエイト広告の貼り方についての紹介はすべて終了です。以降は補足や関連情報になります。
コードをそのまま段落ブロックにコピペをすすめない理由
私はブログを開設した当初、何にも知らずに広告コードをコピーし、段落ブロックにそのまま貼り付けました。
実はその方法でもリンクは作れてしまうので、それでいいと思ってました。しかし知識を得ていくにつれて、段落ブロックにそのままコード貼り付けはよくないことがわかりました。
なぜなら、コードをそのままコピペしているにも関わらず、貼り付けられたコードはコピーしたコードとは異なったものになっているからです。
理由は不明です。私は詳しくないのでよくわかりません。
ですが、ASP各社には「生成された広告コードを広告主に無断で変更することは禁止しております」といった文言が書かれています。
意図せずとも違反となってしまいますのでそのまま段落ブロックにコピペはやめる方がいいのではないかと思っています。
さらに言えば、計測のためのタグがはずれてしまうため、うまく計測もできないという事態に陥ります。
やっちまっていた方はぼちぼち修正をしていきましょう。
ほかにもやり方はあるけれど
本記事で私が紹介したやり方のほかに、アフィリエイト広告を貼り付けるやり方はあります。
少なくともあと２つは知ってます
- カスタムHTMLブロックを使う方法
- クラシックブロックを使う方法
いずれもコピーしたコードをそのブロックに貼り付ければ広告が完成します。
ただ、本記事で紹介していない理由があって、
ということで今回は主にHTMLとして編集を使って広告を貼る方法を紹介させてもらっています。
Googleアドセンス・Amazon・楽天の広告の貼り方
本記事ではアフィリエイト広告の貼り方ということで、GoogleAdSenseの貼り方やAmazon楽天の物販系商品リンクの貼り方は扱ってきませんでした。
Googleアドセンスの貼り方や物販系商品リンクの使い方については下の関連記事に書いてありますので、そちらをご覧ください。
関連記事【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
関連記事ヤフーショッピングをブログでアフィリエイトしよう！商品リンクのやり方から料率まで詳しく解説します
アフィリエイト広告を正しく貼ろう
本記事では【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
ということで、ブロックエディタを使用しているかたに向けてASP案件の広告の貼り方をご紹介してきました。
３記事分くらいの執筆パワーを使いました！
- ブロックエディタでコードを正しく貼ること
- 工夫してよりクリックされやすいように広告を貼ること
それが伝わるように全力で書いてきました。
あなたのブログで収益が１円でも増えるように祈っています。その手助けが少しできたなら私は嬉しく思います。
ブログ運営頑張っていきましょー
Cocoon関連記事
本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。
コメント