PR
ブログ運営/副業

【cocoon】サイドバーやヘッダー、フッターにアフェリエイト広告を貼る方法

お悩みさん
お悩みさん

アフェリエイト広告を
ブログの目につきやすい位置に貼りたい!

この記事では、WordPressのテーマcocoonを使用してブログ運営をしている方向けにアフェリエイト広告の貼り方を紹介しています。

サイドバーやヘッダー、フッターなどにアフェリエイトの広告を貼る方法を画像付きで紹介します。

ブログの収益化を目指す上で、アフィリエイト広告を貼る位置は重要なポイントです。

ぜひ、cocoonの機能をフル活用して、アフィリエイトを意識したサイトを完成させましょう

この記事はこんな方におすすめ
  • A8.netやもしもアフィリエイト、バリューコマースなどのASPと提携した後の手順がわからない
  • 目立つ場所にアフェリエイト広告を掲載したい
  • ブログで収益を得るために工夫したレイアウトに変更したい

ブログ初心者の方でも簡単にアフィリエイト広告は使いこなせるようになります。

実際に、筆者もブログ開設から3ヶ月程度で、アフィリエイト広告を活用できるようになり、ブログ開設から半年後には収益は5桁に到達しました。

この記事で、効果的なアフィリエイト広告の活用方法を習得していただけたらと思います。

この記事で習得できる内容

ブログの好きな場所にアフィリエイト広告を挿入

アフェリエイトを一から始めるならこちら

アフェリエイト広告の貼り方についての基本知識はこちら

この記事を書いている人

  • メガバンク勤務の30代女性
  • 夫と共同でブログを運営中
  • ブログ開設から半年で月間1万PV &収益5万円到達
  • ブログ運営、ファッション誌のモニターや記事執筆などの副業で収入を得ている
スポンサーリンク

【cocoon】アフェリエイト広告の利用方法

初めに、アフィリエイト広告の利用方法について簡単に紹介していきます。

アフィリエイト広告の利用方法について理解されている方は、読み飛ばして、サイドバーなどにアフィリエイト広告を貼る方法を確認してください。

サイドバーなどにアフィリエイト広告を貼る方法を読む(記事内リンク)

ASPへ登録

ブログにアフェリエイト広告を掲載するためには、ASPと呼ばれるアフィリエイト広告を取り扱うサイトに登録する必要があります。

APSは、ブログを開設していれば、誰でも無料で登録が可能です。

ASPサイトごとに、取り扱っている広告が異なりますので、一通り有名なASPサイトへ登録しておくことをおすすめします。

登録しておきたいアフェリエイト

ASPサイトから広告リンクを取得する

ASPサイトに登録し、広告を表示したい企業と提携が完了したら、ブログへ掲載する広告リンクを取得します。

ここでは、A8.netのアフィリエイト広告を例にあげて紹介します。

アフィリエイト広告の提携方法

キーワード検索やカテゴリー検索から、提携するアフェリエイト広告を探します。

気になるアフィリエイト広告が見つかれば、『詳細を見る』を開き、ページ下部に表示されている『提携を申請』ボタンを押下します。

即時で広告を利用できるようになるサイトもあれば、広告を掲載できるか審査が必要なサイトもあります。

広告リンクの取得方法

プログラム管理』から、『参加中プログラム』を開きます。

ブログに広告を掲載したい案件の『広告リンク』を開きます。

ブログに掲載したい広告素材を選び、『素材をコピーする』というボタンをクリックして、広告リンクをコピーします。

【cocoon】サイドバーなどにアフィリエイト広告を貼る方法

サイドバーなどにアフィリエイト広告を貼る方法を紹介します。

基本的にウィジェットが追加できる部分であれば、これから紹介する手順でアフィリエイト広告を挿入することができます。

慣れるとさほど難しくはありませんので、ぜひ習得して、収益に繋がりやすいサイトを作りましょう。

アフィリエイト広告を挿入する3ステップ
  • ASPサイトでアフェリエイトの広告リンクを取得
  • 広告を挿入するウィジェットを作成
  • CSSで微調整を行う

ASPサイトでアフェリエイトの広告リンクを取得

アフェリエイトサイトから、ブログに掲載したい広告リンクを取得します。

アフェリエイト広告は、バナー広告とテキスト広告の2種類あり、どちらでもブログの好きな場所に挿入することができます。

アフェリエイト広告の種類

バナー広告

テキスト広告

おすすめのASPサイト>>A8.net

収益をあげることを重視したい場合は、バナー広告を活用するのがおすすめです。

バナー広告の方が、画像に情報が集約されているため、サイト訪問者の目を引くことができるからです。

バナー広告はインパクトがある一方で、バナー広告の画像がサイトのデザインから浮いてしまうというデメリットがあります。

統一感のあるお洒落なサイトを目指したい方は、テキスト広告を活用するのがおすすめです。

広告リンクを取得

ブログに掲載したい広告素材の広告リンクをコピーします。

バナー広告をブログに表示させる場合、ページのレイアウトに合ったサイズのバナー広告を選択しましょう。

広告を挿入するウィジェットを作成

アフィリエイト広告を設置するために、ウィジェットを追加します。

ここでは、サイドバーにアフィリエイト広告を設置する流れを紹介しています。

ヘッダーやフッターなど別の場所にアフィリエイト広告を設置する場合も手順は同じになりますので、図の通りに進めてください。

STEP1 ウィジェットを追加

ワードプレスのダッシュボードを開き、『メニュー』を選択して『ウィジェット』を開きます。

ウィジェットの一覧のなかから、中段にある『カスタムHTML』を選択する。

アフェリエイト広告を設置したい位置を選択し、ウィジェットを追加する。

STEP2 ウィジェットに広告リンクを挿入

サイドバーに追加されているウィジェット一覧を確認します。

先ほど追加した『カスタムHTML』がウィジェット一覧に表示されています。

(ヘッダーやフッターに広告を表示したい場合は、ヘッダーやフッターのウィジェット一覧を確認します。)

カスタムHTML』を開き、内容部分に先ほどコピーした広告リンクを挿入して、保存します。

タイトルに文言を入力すると、挿入する広告の上に文言が表示されます。

タイトルは、ブランクで問題ありません。

『カスタムHTML』に広告リンクを挿入して保存をすれば、ウィジェットを追加した場所に広告リンクが表示されます。

CSSで微調整を行う

ウィジェットに追加した『カスタムHTML』に広告リンクを挿入したら、一度ページを確認します。

広告の表示位置など気になる点があれば、CSSを追加して、レイアウトを整えます。

広告を中央に表示したい場合

通常、ウィジェットで追加した広告は左寄せで表示されます。

広告を中央に表示させたい場合、『カスタムHTML』にCSSコードを追加します。

<center>表示する広告素材のリンク</center>

広告リンクを<center></center>で囲うことで、広告を中央に表示することができます。

前後のコンテンツとスペースを取りたい

サイドバーなどに複数のウィジェットを追加する場合、余白なくコンテンツが並んでしまいます。

広告と前後のコンテンツの間に余白を設けたい場合、『カスタムHTML』にCSSコードを追加します。

下図のように、広告の上部にスペースが欲しい場合は、広告リンクの前に<br>と入力します。

<br>表示する広告素材のリンク

<br>は一行分の改行という意味ですので、スペースを多めに確保したい場合、<br>を複数追加します。

CSSを追加して、アフェリエイト広告のレイアウトを整えて完成です。

完成形

今回は、サイドーにバナー広告を追加する手順を紹介しましたが、ヘッダーやフッターに追加する場合でも同じ手順となります。

【cocoon】サイドバーなどにアフィリエイト広告を貼る方法〜応用篇〜

先ほどご紹介した手順通りに進めれば、サイドバーやヘッダー、フッターなどにアフェリエイト広告を貼ることができます。

ここからは応用編として、ページやカテゴリーごとに表示するアフィリエイト広告を変える方法について紹介します。

ページやカテゴリーごとに表示するアフィリエイト広告を変える方法

『カスタムHTML 』の表示設定を変更することで、特定のカテゴリーや記事ページ、固定ページなどを指定してアフィリエイト広告を設置することができます。

この機能を活用することで、カテゴリーやブログの記事の内容ごとに、異なるアフィリエイト広告を表示することができます。

カテゴリーやブログの記事の内容ごとに関連する広告を設置することで、サイト訪問者の関心のある広告を表示することができます。

今回は例として、3つのカテゴリーで記事を投稿しているブログという設定で、アフィリエイト広告を設置したいと思います。

ブログのカテゴリーと掲載する広告(イメージ)

カテゴリーの内容掲載する広告
カテゴリー①旅行旅行会社の広告
カテゴリー②子育てベビー用品通販サイトの広告
カテゴリー③時短アイテムミールキットの広告

STEP1 カスタムHTMLのウィジェットを追加

ワードプレスのダッシュボードを開き、『メニュー』を選択して『ウィジェット』を開きます。

広告リンクを挿入するために『カスタムHTML』のウィジェットを3つ追加します。

今回は、例としてサイドバーに追加しますが、ヘッダーやフッターの場合も同じ手順になります。

サイドバーに『カスタムHTML』が3つ追加されていることを確認します。

STEP2 カスタムHTMLの表示設定を行う

『カスタムHTML』を開き、内容に表示する広告リンクを挿入します。

その後、『表示設定』を開き、広告リンクを表示するカテゴリーを選択します。

カテゴリー一覧が表示されますので、広告を表示したいカテゴリーに✔︎をつけて保存します。

特定の投稿記事や固定ページのみに広告を表示したい場合は、『投稿』や『固定ページ』というタブを開き、詳細設定を行います。

同じ手順で、追加した3つの『カスタムHTML』ウィジェットに、広告リンクを挿入して、表示設定を行います。

表示設定で『チェック・入力したページで非表示』を選択すると、アフェリエイト広告を表示させたくない固定ページや記事を指定することもできます。

この機能を使いこなすと

  • TOPページはすっきりとしたデザインにしたいので広告を表示したくない
  • この記事には、広告を表示したくない

というようなときに便利です。

上記の手順通り設定を行えば、3つのカテゴリーごとに表示するアフェリエイト広告を変えることができます。

記事の内容に合ったアフェリエイト広告をサイドバーやヘッダーなどに表示させることは、収益化への近道です。

戦略を練って、効果的な場所に読者が求めているようなアフェリエイト広告を設置するようにしましょう。

ブログのカテゴリーと掲載する広告(イメージ)

カテゴリーの内容掲載する広告
カテゴリー①旅行旅行会社の広告
カテゴリー②子育てベビー用品通販サイトの広告
カテゴリー③時短アイテムミールキットの広告

【cocoon】ウィジェットにアフェリエイト広告を貼る方法/まとめ

サイドバーやヘッダー、フッターなどは、サイト訪問者の目につきやすい場所ですので、そのスペースを有効に活用することがブログの収益化への近道です。

googleアドセンスを利用している場合は、アドセンスの広告位置とアフィリエイト広告の位置が重ならないように注意しましょう。

サイドバーやヘッダーなどに表示される広告が多すぎると、サイト訪問者が不快に感じる可能性もあります。

サイト訪問者が、快適にサイト内を回遊できる適度な量の広告を設置するようにしましょう。

スポンサーリンク
オムタンケ|FP1級保有銀行員の「お金」の話
タイトルとURLをコピーしました