AFFINGER(アフィンガー)

【初心者向け】AFFINGER5(アフィンガー5)でアドセンス広告を貼る方法まとめ

2020年12月22日

 

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

 

悩む人
Googleアドセンスに合格しました!ワードプレステーマのアフィンガー5を利用していて、アドセンス広告を貼る方法を知りたい。

 

こんな悩みに答えます。

 

こんな方におすすめ

  • AFFINGER5(アフィンガー5)でアドセンス広告の貼り方を知りたい
  • アドセンスのオススメの貼り方を知りたい

 

まずは、アドセンスの合格おめでとうございます!

 

アドセンスの審査が通過しましたら、次にやることはアドセンス広告を貼る作業ですね。

 

AFFINGER5(アフィンガー5)では、広告を貼る位置によって、他と同じような方法もあれば、アフィンガー独自の貼る方法があります。

 

今回は、AFFINGER5(アフィンガー5)を使ってアドセンス広告を貼る方法・オススメの配置について図解で紹介します。

 

なお、phpファイルに直接コードを加える方法は紹介していませんので、予めご了承ください。

 

本記事を読み進めることで、アフィンガー5でアドセンスの貼り方、配置位置を理解できると思いますので、ぜひ参考にしてみてください!

 

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

 

 

アドセンス広告の種類3つ【前提知識】

アドセンス広告の種類3つ【前提知識】

 

アフィンガー5の広告貼り付け方法の前に、アドセンスの種類と特徴について、簡単に紹介します。

 

アドセンス広告の種類は、主に以下3つです。

 

アドセンス広告の種類

①:ディスプレイ
②:インフィード
③:記事内広告

 

①:ディスプレイ

 

ディスプレイ広告は、基本どこにでも貼り付けることができる万能な広告です。

 

『スクエア』『横長タイプ』『縦長タイプ』の3つから選ぶことができます。

 

ディスプレイの「スクエア」を使って、ページ下2列に配置して表示させているブロガーさんをよく見かけます!
KEI

 

また、レスポンシブ表示のため画面サイズによって、見え方が変わります。

 

②:インフィード

 

インフィード広告は、簡単に言いますと、コンテンツ同様になじませる広告です。

 

特徴として、ブログ毎に合わせて、広告デザインを自動で表示してくれます。

 

ブロガーさんでよく見かけるのが、「関連記事」や「トップページのコンテンツ一覧の中」で広告を表示している方が多い印象です。

 

また、インフィードは、「自動で広告を入れるやり方」と「手動で広告を作成して挿入する方法」がそれぞれある感じです。

 

③:記事内広告

 

記事内広告は、記事内に広告を入れるネイティブ広告です。

 

ネイティブ広告とは、「記事(コンテンツ)と広告が自然に融合している広告」のことです。
引用:ネイティブ広告(ネイティブアド)とは?メリットや種類を徹底解説

 

特徴として、記事の途中や、ページの1番下に配置させたりします。

 

以上が、各種アドセンス広告の特徴になります。

 

どの広告にも言えることですが、広告のページ先を手動で変更することができません。

 

そのため、アドセンスでの収益は置く位置を工夫したりして、収益化していきます。

 

次から、具体的にアドセンスの取得から、アフィンガー5の設置方法までを解説していきます!

 

アドセンス広告の取得方法

アドセンス広告の取得方法

 

それでは、アドセンス広告の取得方法から解説していきます。

 

※アドセンスのURLの取得方法が分かる方は、飛ばしてOKです。

 

step
1
サイドメニューをクリック

 

まずは、アドセンスにログインします。

 

ログインができましたら管理画面サイドメニューから「広告」をクリックします。

 

 

step
2
広告ユニットごとをクリック

 

続いて「広告ユニットごと」をクリックします。

 

 

step
3
ディスプレイ広告を選択

 

以下、表示させたい広告を選ぶことができます。

 

今回は、「ディスプレイ広告」を選択します。

 

 

step
4
広告ユニットの名前を入力

 

広告ユニット名』を入力していきます。

 

記事ページ下に広告を配置するのであれば、例えば「記事ページ下」など分かりやすい広告名にします。

 

 

ディスプレイ広告は、「スクエア」「横長タイプ」「縦長タイプ」から、お好みで選択できます。

 

広告サイズは、レスポンシブに選択しておけばOKです。

 

最後に「作成」をクリックします。

 

step
5
コードをコピー

 

以下、HTMLコードをコピーしたら完了です!

 

 

広告コードの取得手順は、上記の流れでできる感じです。

 

続いて、アフィンガー5で各エリアで、コードを配置させる方法について、解説します。

 

AFFINGER5にアドセンス広告を設置する方法一覧

AFFINGER5にアドセンス広告を設置する方法一覧

 

それでは、アフィンガー5でアドセンスのコードを貼る手順について、それぞれ解説していきます。

 

今回は、以下の設置方法について、紹介していきます。

 

アドセンスを設置する

①:投稿記事上下
②:記事下の関連エリア
③:見出し前(上)に設定する

 

①:投稿記事上下

 

まずは、投稿記事上下に設置する方法です。

 

投稿記事(上)

 

投稿記事(下)

 

手順は、以下の通りです。

 

投稿記事上下

①:アドセンスの「ディスプレイ広告」を選択
②:コードを取得
③:「外観 → ウィジェット」をクリック
④:「カスタムHTML」にコードを挿入

 

1つずつ解説していきます。

 

step
1
「ディスプレイ広告」を選択

 

まずは、アドセンス画面から「ディスプレイ広告」を選択します。

 

 

step
2
コードを取得

 

ディスプレイ広告のコード作成をします。

 

 

上記赤ワクの設定ができれば、「作成」をクリックします。

 

以下画面からコードをコピーします。

※『完了』ボタンのクリックは、コードを貼る前後どちらでもOKです。

 

 

step
3
「外観 → ウィジェット」をクリック

 

続いて、ワードプレスのサイドメニュー「外観 → ウィジェット」をクリックします。

 

 

step
4
「カスタムHTML」にコードを挿入

 

「カスタムHTML」をドラックして、以下2つに入れます。

 

  • 投稿記事の上に一括表示
  • 投稿記事の下に一括表示

 

先ほど、コピーしたコードを貼りつけます。

 

 

あとは「完了」をクリックして終わりです。

 

②:記事下の関連エリア

 

記事下の関連エリア』の手順は、以下の通りです。

 

記事下の関連エリア

①:アドセンスの『インフィード広告』を選択
②:コードを取得
③:広告・Googleインフィード広告にコード貼り付ける
④:『インフィード広告の設定』をする

 

1つずつ解説していきます。

 

step
1
アドセンスの「インフィード広告」を選択

 

まずは、『インフィード広告』を選択します。

 

step
2
コードを取得

 

続いて、以下を設定していきます。

 

  • ①:『自動で広告スタイルを作成する』を選択
  • ②:関連記事のあるページのURLを入力
  • ③:『モバイル』を選択
  • ④:『ページをスキャン』をクリック

 

続いて、関連エリアの広告デザインを調整します。

 

 

選択ができましたら、「次へ」をクリックします。

 

 

上記、『広告ユニット名』と細かい設定ができましたら、『保存してコードを取得』をクリックします。

 

step
3
広告・Googleインフィード広告にコード貼り付ける

 

続いて、ワードプレス『外観 → ウィジェット』をクリックします。

 

 

「カスタムHTML」を「広告・Googleインフィード広告」にドラック&ドロップして、コピーしたコードを貼り付けます。

 

step
4
『インフィード広告の設定』をする

 

続いて、『AFFINGER5管理 → Google・広告/AMP』をクリックします。

 

『インフィード広告の設定』の関連記事に挿入に、何番目に表示させるかの数字を入力します。

 

 

今回は、仮で3と入力します。

 

最後にページ下の「save」をクリックして完了です。

 

また、以下エリアの設定している場合に、同じ要領で数字を入れることによって、インフィード広告を表示できます。

 

  • トップページの記事一覧及びアーカイブに挿入
  • サイドバーの新着記事一覧に挿入

 

これで「記事下の関連エリア」の広告設定は終わりです。

 

③:見出し前(上)に設定する

 

『見出し前(上)に設定する』手順は、以下の通りです。

 

見出し前(上)の設定方法

①:アドセンスの『記事内広告』を選択
②:コードを取得
③:『見出し前に広告挿入』に貼り付け
④:何番目に表示させるかを選択

 

1つずつ解説していきます。

 

step
1
アドセンスの『記事内広告』を選択

 

まずは、アドセンスの「記事内広告」を選択します。

 

 

続いて「広告ユニット名」を入力します。

 

 

広告ユニット名は、何番目の見出し前に表示させるのか分かる名前にしておくと良いですよ!

 

今回は、h1見出し・h3見出しの前に広告を表示させるとして、「記事内:1番目、3番目」としておきます。

 

また、スタイルから「フォント・タイトル色」を変更することができます。

 

step
2
コードを取得

 

全ての設定が完了しましたら「保存してコードを取得」をクリックします。

 

step
3
『見出し前に広告挿入』に貼り付け

 

ワードプレス画面『AFFINGER5管理 → Google・広告/AMP』をクリックします。

 

「見出し前に広告挿入」に、コピーしたコードを貼り付けます。

 

 

step
4
何番目に表示させるかを選択

 

コードの貼り付けが完了したら、見出しの何番目に表示させるチェックします。

 

今回は、投稿記事の1、3番目の見出し前に表示なので、「1番目」「3番目」にチェックを入れます。

 

全ての設定が完了したら、「save」をクリックして完了です!

 

もし、アドセンス広告の表示されていない場合は、30分ほど時間を置いてシークレットモードで確認してみることをオススメします。

 

AFFINGER5にアドセンスの貼り方まとめ

AFFINGER5にアドセンスの貼り方まとめ

 

いかがでしたか?

 

ここまで、AFFINGER5(アフィンガー5)のアドセンス広告の設置方法について、解説しました。

 

アフィンガー5の機能をうまく使うことで、簡単にアドセンスの配置設定をすることができます。

 

今回紹介した広告や配置の仕方は、必ずしも正解ではありませんので、自サイトに合わせてお好みの広告を配置してみてください。

 

本記事を読み、アフィンガー5でのアドセンスの貼り方について、理解できましたら幸いです。

 

最後に、アドセンス以外で報酬単価を獲得したい方は、アフィリエイトの登録をおすすめします。

 

アフィリエイトの登録がお済みでない方は、以下を参考にしてみてください。

 

関連記事
【無料】アフィリエイトASPの始め方を紹介【おすすめ5選】

続きを見る

 

関連記事
【初心者におすすめ】アプリ系に強いおすすめのASP(アフィリエイト)3選を紹介

続きを見る

 

今回は以上です。

 

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

 

  • この記事を書いた人

keiblog

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

-AFFINGER(アフィンガー)