WordPressでブログを始めたけど
アフェリエイト広告はどうやって貼ればいいの？
この記事では、WordPressのテーマcocoonを使用してブログ運営をしている方向けにアフェリエイト広告の貼り方を紹介しています。
ブログの収益化を目指す上で、アフィリエイト広告の貼り方は重要なポイントです。
アフィリエイトで得られる収益は、広告の貼り方によって大きく左右されます。
ぜひ、cocoonの機能をフル活用して、稼げるアフィリエイト記事を作成できるようになりましょう。
- A8.netやもしもアフィリエイト、バリューコマースなどのASPと提携した後の手順がわからない
- アフェリエイト広告をブログに貼り付ける方法が知りたい
- ブログに貼り付けることができる広告のバリエーションを増やしたい
ブログ初心者の方でも簡単にアフィリエイト広告は使いこなせるようになります。
実際に、筆者もブログ開設から3ヶ月程度で、アフィリエイト広告を活用できるようになり、ブログ開設から半年後には収益は5桁に到達しました。
この記事で、正しいアフィリエイト広告の活用方法を習得していただけたらと思います。
バナー広告
テキスト広告
おすすめのASPサイト＞＞A8.net 
ボタン広告
リスト広告
テーブル広告
 |  | |
| 登録必須のASPサイト | アフェリエイト数が多い | 物販アフェリエイト向き |
この記事を書いている人
- メガバンク勤務の30代女性
- 夫と共同でブログを運営中
- ブログ開設から半年で月間1万PV &収益5万円到達
- ブログ運営、ファッション誌のモニターや記事執筆などの副業で収入を得ている
【cocoon】アフェリエイト広告の利用方法
初めに、アフィリエイト広告の利用方法について簡単に紹介していきます。
ASPへ登録
ブログにアフェリエイト広告を掲載するためには、ASPと呼ばれるアフィリエイト広告を取り扱うサイトに登録する必要があります。
APSは、ブログを開設していれば、誰でも無料で登録が可能です。
ASPサイトごとに、取り扱っている広告が異なりますので、一通り有名なASPサイトへ登録しておくことをおすすめします。
- A8.net
登録者数No1。まずは登録しておきたいASPサイト バリューコマース
ASPの種類が豊富。Yahoo!ショッピングのアフェリエイトならここ- もしもアフィリエイト
Amazonや楽天アフェリエイトならここ
ASPサイトから広告リンクを取得する
ASPサイトに登録し、広告を表示したい企業と提携が完了したら、ブログへ掲載する広告リンクを取得します。
ここでは、A8.netのアフィリエイト広告を例にあげて紹介します。
アフィリエイト広告の提携方法
キーワード検索やカテゴリー検索から、提携するアフェリエイト広告を探します。
気になるアフィリエイト広告が見つかれば、『詳細を見る』を開き、ページ下部に表示されている『提携を申請』ボタンを押下します。
即時で広告を利用できるようになるサイトもあれば、広告を掲載できるか審査が必要なサイトもあります。
広告リンクの取得方法
『プログラム管理』から、『参加中プログラム』を開きます。
ブログに広告を掲載したい案件の『広告リンク』を開きます。
ブログに掲載したい広告素材を選び、『素材をコピーする』というボタンをクリックして、広告リンクをコピーします。
【Cocoon】アフィリエイト広告の貼り方〜基礎編〜
まずは、基本的なアフェリエイト広告の貼り方について紹介します。
上記3つのアフィリエイト広告の貼り方をマスターしておけば、十分アフィリエイト記事を投稿することができます。
バナー広告の貼り方
はじめに、バナー広告の貼り方について紹介します。
完成図
バナー広告とは、画像がアフェリエイトサイトへのリンクとなっている広告のことをいいます。
バナー広告は、画像に必要な情報が集約されているため、サイト訪問者が広告をクリックする確率が高い傾向にあります。
しっかりとアフィリエイトの内容をPRしたい場合は、バナー広告を利用するのがおすすめです。
バナー広告には様々なサイズの素材が存在しますが、ブログへの掲載手順は同じ方法です。
ブログのレイアウトに合わせて、最適なバナー広告を選んで、記事に掲載しましょう。
STEP1 広告リンクを取得
ブログに掲載したいバナー広告の広告リンクをコピーします。
STEP2 広告リンクを記事に挿入
ワードプレスを開き、記事作成画面を開き、広告を挿入したい空白のブロックで左クリックします。
左クリックすると編集画面上に表示されるトップツールバーより『HTMLとして編集』を選択。
開いたHTMLの編集画面の<p>と</p>の間に、コピーした広告リンクのコードを貼り付けます。
プレビュー画面から広告の表示を確認します。
トップツールバーが表示されない場合
記事投稿の右上にあるボタンを押下し、『トップツールバー』を選択すると、投稿ページにトップツールバーが表示されます
STEP2までの方法で、アフィリエイト広告をブログに掲載すると、バナー広告は左寄せで表示されます。
バナー広告をセンタリングするためには、下記の手順で広告の表示位置を指定します。
STEP3 広告の表示位置をカスタマイズ
広告リンクを挿入したブロックを下記の手順で『ビジュアル編集』に戻す。
ビジュアル編集の画面より、画像の表示位置を指定します。
バナー広告の貼り方は以上です。
バナー広告を活用すると以下のような視覚に訴えるアフェリエイト広告の掲載が可能です。
イメージ
＼アフェリエイトを始めるならA8.net／
テキスト広告の貼り方
続いてテキスト広告の貼り方を紹介します。
手順は、バナー広告の貼り方とほとんど同じです。
テキスト広告を活用すれば、文章のアフェリエイトリンクを設置することが可能です。
テキスト広告は、広告画像を使わず、自然とアフィリエイトを紹介したい方におすすめです。
STEP1 広告リンクを取得
ブログに掲載したいテキスト広告の広告リンクをコピーします。
STEP2 広告リンクを記事に挿入
ワードプレスを開き、記事作成画面を開き、広告を挿入したいブロックで左クリックします。
左クリックすると編集画面上に表示されるトップツールバーより『HTMLとして編集』を選択。
開いたHTMLの編集画面の<p>と</p>の間に、コピーした広告リンクのコードを貼り付けます。
プレビュー画面から広告の表示を確認します。
トップツールバーが表示されない場合
記事投稿の右上にあるボタンを押下し、『トップツールバー』を選択すると、投稿ページにトップツールバーが表示されます
アフィリエイトリンクのセンタリングや文字スタイルを編集することも可能です。
STEP3 広告の表示位置をカスタマイズ
広告リンクを挿入したブロックを下記の手順で『ビジュアル編集』に戻す。
ビジュアル編集の画面より、画像の表示位置や文字のスタイルを指定します。
テキスト広告の貼り方は以上です。
テキスト広告を活用すると以下のように、本文中にアフェリエイト広告を設置することができます。
イメージ
必ず登録しておきたいASPはA8.netです。
テキスト広告の注意点
テキスト広告の文字内容を勝手に変更することはできません。
自分で考えた文章をテキスト広告として表示させたい場合は、必ず『自由テキスト』となったテキスト広告を使用するようにしましょう。
アフィリエイトリンクボタンの作り方
つづいてアフィリエイトリンクボタンの作り方を紹介します。
アフィリエイトリンクボタンは、cocoonブロックの囲みボタンで作ることができます。
STEP1 広告リンクを取得
テキストリンクを作成したい広告リンクをコピーします。
※オリジナルの文言を使用したい場合は『自由テキスト』という素材のリンクをコピーするようにしましょう。
STEP2 囲みボタンを作成
ワードプレスの記事の投稿画面を開き、『囲みボタン』のブロックを追加します。
※間違えて『ボタン』ブロックを選択しないように注意しましょう。
『囲みボタン』を追加すると、下図のようなブロックが追加されます。
STEP3 囲みボタンの詳細設定
『囲みボタン』の下図のブロックを左クリックすると、投稿画面右に『囲みボタン』の詳細設定画面が表示されます
『囲みボタン』ブロックの設定画面にある『リンクタグ』という箇所にコピーした広告リンクを貼り付けます。
『囲みボタン』のサイズや色を変更して、好みのスタイルのボタンを作ります。
好みのスタイルに編集が完了したら、プレビュー画面で確認します。
アフィリエイトリンクボタンの作成方法は以上です。
cocoonでは、サイズやボタンの形状や色などを変えて、様々なボタンを作ることができます。
記事のレイアウトに合わせて好みのボタンを作成してみましょう。
楽天アフェリエイトなど、一部のアフェリエイトサイトではアフィリエイトリンクがURLで付与されることがあります。
広告コードがURLの場合は、cocoonの『ボタン』を活用して、アフィリエイトリンクボタンを作ります。
※デザインという項目にも『ボタン』が存在しますが、cocoonのボタンの方が編集しやすい印象です。
【Cocoon】アフィリエイト広告の貼り方〜応用編〜
アフィリエイト広告の貼り方の応用編を紹介します。
複数のアフェリエイト広告をまとめて表示したいときや、比較して紹介したいときは、リストやテーブル（表）を活用するのがおすすめです。
リストにアフィリエイトリンクを貼る方法
応用編として、リストにアフィリエイトリンクを貼る方法について紹介します。
完成図
複数のアフェリエイト広告をまとめて表示したいときなどに、リスト機能を活用すると便利です。
STEP1 リストを作成する
ワードプレスの記事投稿画面からアフェリエイトリンクを設定するリストを作成します。
アフィリエイトリンクを貼りたい位置に『リスト』または『アイコンリスト』のブロックを追加します。
通常のリストを表示する場合
アイコン付きリストを表示する場合
リストのどの部分にアフィリエイトリンクを挿入するかを決めて、リストを完成させます。
アフィリエイトリンクを貼る位置がわかりやすいよう、リストに文字を入力しておきます。
STEP2 広告リンクを取得
テキストリンクを作成したい広告リンクをコピーします。
※オリジナルの文言を使用したい場合は『自由テキスト』という素材のリンクをコピーするようにしましょう。
STEP3 リストに広告リンクを挿入
リストを『HTMLとして編集』します。
あらかじめ入力しておいた目標となる文字を消し、そこに広告リンクを添付します。
『HTML編集』から『ビジュアル編集』に切り替えて、完成したリストを確認します。
テーブル（表）にアフィリエイトリンクを貼る方法
次に、テーブル（表）にアフィリエイトリンクを貼る方法について紹介します。
先ほど紹介したリストを活用したアフィリエイト広告の貼り方と手順はほとんど同じになります。
完成図
| | |
| 登録必須のASPサイト | アフェリエイト数が多い | 物販アフェリエイト向き |
複数の商品やサービスを比較して紹介したいようなときにテーブル（表）を利用すると便利です。
テーブル内はスペースが限られるため、バナー広告を挿入したい時は、小さめの広告を選ぶようにしましょう。
STEP1 テーブル（表）を作成
ワードプレスの記事投稿画面を開き、アフィリエイト広告を表示したい位置に『テーブル』のブロックを追加します。
『テーブル』のブロックを追加する際に、あらかじめ表示するカラム数や行数を指定します。
表のどの部分にアフィリエイトリンクを挿入するかを決めて、表を完成させます。
アフィリエイトリンクを貼る位置がわかりやすいよう、表に文字を入力しておきます。
STEP2 広告リンクを取得
表に挿入したい広告リンクをコピーします。
※バナー広告、テキスト広告いずれでもOKです
STEP3 テーブルに広告リンクを挿入
テーブルを『HTMLとして編集』します。
あらかじめ入力しておいた目標となる文字を消し、そこに広告リンクを添付します。
『HTML編集』から『ビジュアル編集』に切り替えて、完成したリストを確認します。
【cocoon】アフェリエイト広告の貼り方／まとめ
いかがでしたか。
この記事で紹介した5種類のアフェリエイト広告の貼り方を活用して、ブログの収益化を目指してください。
このブログでは、ブログの始め方やcocoonのカスタマイズに関する情報を発信しています。
ぜひ別記事も合わせてご覧ください。
最後までご覧いただきありがとうございました。
