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

 

こんにちは、kei（@KeiKei0815blog）です！

 

 

こんな悩みに答えます。

 

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

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

続きを見る

 

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

 

 

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

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

 

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

 

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

 

 

①：広告リンク（自動型）

 

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

 

 

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

 

②：商品リンク（手動型）

 

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

 

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

 

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

 

 

 

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

 

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

 

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

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

 

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

 

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

 

 

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

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

 

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

 

step
1表示する広告を選択

 

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

 

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

 

 

 

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

 

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

 

 

 

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

 

 

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

 

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

 

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

 

 

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

 

 

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

 

 

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

 

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

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

 

 

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

 

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

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

 

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

 

 

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

 

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

 

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

 

 

 

 

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

 

 

 

step
2記事内に広告を貼る

 

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

 

 

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

 

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

 

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

 

 

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

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

 

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

 

 

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

 

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

 

 

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

 

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

 

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

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

続きを見る

 

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

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

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

 

 

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

 

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

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

 

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

 

 

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

 

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

 

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

 

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

 

 

 

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

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

 

いかがでしたか？

 

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

 

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

 

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

 

 

今回は以上です。

 

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