収益化・アフィリエイト

【図解で解説!】WordPressでアフィリエイトの貼り方とカスタマイズ方法

2020年12月20日

 

こんにちは、kei(@KeiKei0815blog)です!

 

悩む人
WordPress(ワードプレス)アフィリエイトリンクの貼り方を知りたい。また、記事内以外にもサイドバーや広告を横一列に並べるなど細かい設置方法も知りたいです。

 

こんな悩みに答えます。

 

こんな方におすすめ

  • WordPress(ワードプレス)で広告リンクを貼る方法を知りたい
  • 記事内以外に、サイドバーなどに広告を貼る方法を知りたい
  • 広告リンクをちょっとオシャレに見せたい

 

ブログ開設後は、記事内に広告を貼って収益化したいと考えると思います。

 

ワードプレスに広告リンクを貼るのに、特別な知識は必要なく簡単に設定することができます。

 

そこで、本記事では、前半にアフィリエイトリンク広告の種類と、後半にアフィリエイトリンクの貼り方について、それぞれ詳しく解説します。

 

ワードプレスを始めたばかりで、広告の貼り方を知りたい方向けに、本記事が役立ちましたら幸いです。

 

なお、広告コード(ASP)の登録がお済みでない方は、以下アフィリエイトに登録しておきましょう!

 

 

基本、無料で申請することができ、各ASP5分ほどで登録できますので時間があるときに申請しておくことをオススメします。

 

なお、各ASPの特徴については、以下記事で詳しく紹介していますので申請前にチェックしてみてください。

 

【登録無料】アフィリエイトASPの始め方を紹介【初心者におすすめ7選】

  悩む人 ブログでアフィリエイト(ASP)に登録することで稼げると聞いたけど、登録しておいた方がいいおすすめのASPを知りたいな...   こんな悩みに答えます。   ...

続きを見る

 

それでは、早速始めていきます。

 

 

アフィリエイトリンクを貼る前の前提知識

アフィリエイトリンクを貼る前の前提知識

 

まずは、アフィリエイトリンクの種類について、簡単に紹介します。

 

ワードプレスに貼り付ける広告は、以下2つです。

 

  • 広告リンク(自動型)
  • 商品リンク(手動型)

 

①:広告リンク(自動型)

 

広告リンクは、提供されている広告をコピーして、記事内に貼り付けることで、広告が自動で表示されます。

 

サイトを見ているとページ下や見出しの下など、共通したエリアに表示されているアドセンス広告です!
KEI

 

広告をクリック後のページや、画像サイズ・中のテキストは変更ができません。

 

②:商品リンク(手動型)

 

商品リンク(手動型)は、記事内の好きなエリアに、商品リンクを貼ることができます。

 

そのため、クリック後のページや商品の画像サイズなど、自分好みに設定することができます。

 

例えば、以下のように、ページの途中やページのサイドメニューなどに配置できます。

 

 

 

商品リンクは、広告リンクと違って自動で広告が表示されるわけではないので、都度手入力して設定します。

 

自動広告と比べると少しメンドウに感じるかもしれませんが、一度ルーティン化できれば、簡単に設定できますよ!(後ほど詳しく解説します!)

 

ワードプレスで広告リンクを貼る方法

ワードプレスで広告リンクを貼る方法

 

それでは、ワードプレスで広告リンクを貼る方法について、解説します。

 

今回は、アイキャッチ画像下に表示させる方法を例に、解説していきます!

 

  1. 表示する広告を選択
  2. コピーしたコードをワードプレスに貼り付ける

 

当ブログで使用しているアフィンガー6で設置方法を紹介します。

※お使いのワードプレステーマによって、機能・操作方法が異なりますので、ご了承ください。

 

参考» AFFINGER6(アフィンガー)を使って見ての感想【メリット・デメリットを紹介】

 

step
1
表示する広告を選択

 

まずは、アドセンスの管理画面にログインします。

 

広告ユニット選択します。

 

 

各種広告ユニット

・ディスプレイ

・インフィード

・記事内広告

 

広告は3つありますが、今回はディスプレイ広告を選択します。

 

すると、以下の画面に切り替わりますので、画面左上の入力ボックスに名前を入れて、「作成」をクリックします。

 

 

 

以下の画面になるので、コードをコピーして「完了」をクリックします。

 

 

step
2
コピーしたコードをワードプレスに貼り付ける

 

続いて、コピーした広告用のコードを貼り付けます。今回は、アイキャッチ画像下に貼り付けます。

 

まずは、ワードプレス「外観 → ウィジェット」をクリックします。

 

 

ウィジェットの画面になりましたら、「カスタムHTML」を押したまま「PCのみ投稿記事上に表示」まで持っていきます。

 

 

カスタマム HTML」内に先ほどコピーした広告コードを貼り付けます。

 

 

最後に「保存」をクリックします。

 

念のため広告が表示されているか確認してみましょう。

※すぐに表示されない時があるので、その場合は1時間くらい置いてから確認してみましょう

 

 

これで広告リンクを貼る方法は、完了になります。

 

ワードプレスで商品リンクを貼る方法

ワードプレスで商品リンクを貼る方法

 

続いて、商品リンクの貼り方について、紹介します。

 

  1. アフィリエイトリンクをコピー
  2. 記事内に広告を貼る

 

今回は「旧エディタ」を使用しての貼り方を解説します。

 

step
1
アフィリエイトリンクをコピー

 

まずは、アフィリエイトサイトで設置したい広告用のURLをコピーします。

 

今回は「A8.net」のアフィリエイトリンクを例に、記事内にはりつけをします。
KEI

 

 

A8.netの登録がお済みでない方

A8.netの登録方法はA8.netの登録方法8ステップで紹介しています。登録がお済みでない方は参考にしてみてください。

 

A8.net」にログインして、URLをコピーします。

 

 

コピー漏れがあると反映されないので、コピー時はソース漏れがないよう気をつけてください

 

step
2
記事内に広告を貼る

 

続いて、記事ページを表示しコピーした広告を貼ります。

 

 

「ビジュアル」だと反映されませんので、必ず「テキスト」に切り替えて、HTMLコードを貼り付けます。

 

step
3
プレビューで表示確認

 

最後に「プレビュー」をクリックして、貼り付けた広告が問題なく表示されていれば、OKです。

 

 

Amazon・楽天・Yahooショッピングの商品リンクを貼る方法

Amazon・楽天・Yahooショッピングの商品リンクを貼る方法

 

続いて、Amazon・楽天・Yahooショッピングなど物販関連の広告リンクを設定する方法です。

 

 

冒頭でも紹介したように、上記のようにボタンを配置して表示させる方法です。

 

こちらは『カエレバ』という無料ツールを使用することで、みやすいデザインを簡単に作成できます。

 

カエレバの特徴

・無料ブログでも使用できる

・書籍とKindleの同時表示が可能

・ネットで調べると色んなカスタマイズ方法が紹介されている

 

用意されたCSSコードを貼り付けて、後は、HTMLコードを表示させたい記事に貼れば表示できます。

 

カエレバの利用方法については、以下記事で詳しく紹介していますので、参考にしてみてください。

 

カエレバ・ヨメレバとは?WordPressで利用する方法を紹介します

  悩む人 カエレバ・ヨメレバって何?Amazon、楽天、Yahooのリンクを一緒に出せると聞いたけど、使い方がよく分からず困っています。   こんな悩みに答えます。   ...

続きを見る

 

※もっと簡単に商品リンクを貼る方法

最近は、CSSコードを貼らなくても、もっと簡単に商品リンクを貼るツールが増えています。CSSを貼るのに抵抗がある場合、もしもアフィリエイトのかんたんリンクを使ってみるのもありです。

>>無料で『もしもアフィリエイト公式サイト』をみる

 


 

上記のかんたんリンク(もしもアフィリエイト)の作成方法は、もしもアフィリエイトのかんたんリンク作成方法で詳しく紹介していますのでご覧ください。

 

【おまけ】アフィリエイトリンクの貼り付け位置の調整

【おまけ】アフィリエイトリンクの貼り付け位置の調整

 

最後に、ワードプレステーマ・アフィンガー6を使って、『商品リンクをサイドバーに配置』『広告バナーを横一列に配置』する方法を紹介します。

 

  1. サイドバーに広告を表示させる方法
  2. バナー画像を横一列に設置

 

①:サイドバーに広告を表示させる方法

 

WordPress(ワードプレス)のサイドバー「外観 → ウィジェット」をクリックします。

 

 

「カスタムHTML」を長押しして「サイドバートップ」まで持っていきます。

 

 

「タイトル」は特に入れなくてもOKです。最後に「完了」をクリックします。

 

念のため、表示されているか確認してみましょう。

 

②:横一列にバナー画像を設置

 

先ほど同様に、貼り付けたい広告のURLをコピーします。

 

続いて、ワードプレスから記事ページを開き、エディターの「タグ → レイアウト → PCとTab(959px以上) → 左右50%以上」をクリックします。

 

「タグ → レイアウト → PCとTab(959px以上) → 左右50%以上」

 

テキスト」にして、左右にURLを貼り付けます。

※「このテキストは最後に消して下さい(50%)」は、URLを貼り付け後に削除します。

 

 

ビジュアル」にすると以下のように、バナー広告の画像が横並びに表示されます。

 

 

これで、アフィンガー6を使ってバナー広告の横並び設定は終わりです!
KEI

 

WordPress(ワードプレス)でアフィリエイトリンクの貼り方まとめ

WordPress(ワードプレス)でアフィリエイトリンクの貼り方まとめ

 

いかがでしたか?

 

今回は、ワードプレスで「広告リンク」「商品リンク」を貼る方法について、紹介しました。

 

始めはアフィリエイトリンクを貼る作業がメンドウに感じますが、ルーティーン化できると設定がスムーズになります。

 

本記事を読み、ワードプレスのアフィリエイトリンクの貼り方について、理解できましたら幸いです。

 

 

今回は以上です。

 

ここまで読んでいただき、ありがとうございました!

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】▶︎Webディレクター就職(歴8年)(コーディング・SEOが好きです!)▶︎ブログ開設

-収益化・アフィリエイト