AFFINGER5

【AFFINGER5】記事下にGoogleアドセンス広告を表示させる方法を紹介!

【AFFINGER5】記事下にGoogleアドセンス広告を表示させる方法を紹介!

記事下の広告の表示方法は主に2つあります

  • 大きい広告を1つ
  • 小さい記事を横並び(ダブルレクタングル)にして2つ表示する方法

 

そこで今回はAFFINGER5を使ってこの2つの表示方法について広告コードの取得方法から紹介していきます!

 

他のGoogleアドセンス広告の設置方法はこちらの記事で紹介していますので他の広告も設置したい方はご覧ください!

 

こんな方におすすめ

  • 広告コードの取得方法がわからない人
  • 記事下に広告を表示させたい人
  • 横並び(ダブルレクタングル)のやり方がわからない人

 

 

記事下にGoogleアドセンス広告を1つ表示方法

まずは記事下にGoogleアドセンス広告を1つ表示させる方法を紹介していきます!

 

記事下に1つとはこのような状態です。

AFFINGER5 記事下広告16

 

それではさっそく広告コードの取得からやっていきましょう!

 

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

AFFINGER5 記事下広告

  1. Google AdSenseを開いて「広告」→「サマリー」をクリックします。
  2. 「広告ユニットごと」をクリックします。
  3. 3つのユニットがありますが今回はディスプレイ広告を選択します。

 

AFFINGER5 記事下広告13

  1. 横長タイプを選択します。
  2. 広告のサイズはレスポンシブを選択します。
  3. ユニットの名前を入力したら「作成」をクリックします。

ポイント

広告ユニット名はどんなのでもいいですが、あとで表示回数などを見ることができるので"記事下"などのどこに表示されているかわかるような名前にすることをおすすめします!

 

AFFINGER5 記事下広告12

するとこのようなコードが書かれたページが表示されるので「コードをコピー」をクリックします。

 

ウェジェットで広告コードを設置

AFFINGER5 記事下広告14

  1. WordPressを開いて「外観」→「ウェジェット」をクリックします。
  2. 00_STINGERカスタムHTMLを選択します。
  3. 投稿記事の下に一括表示を選択して「ウェジェットを追加」をクリックします。

 

AFFINGER5 記事下広告15

このようになるので内容に先ほどコピーしたコード貼り付けて「保存」をクリックします。

 

ポイント

data-ad-formatが"auto"になっている場合"rectangle"に変更してください。rectangleにすることにより広告が大きく表示されるようになり表示率&クリック率の上昇に繋がります!

 

これで設置は完了です!

 

最後に広告がきちんと表示されるか確認して終了です!

 

記事下に横並び(ダブルレクタングル)で広告を2つ表示させる方法

次に記事下に横並びダブルレクタングル)で2つ広告を表示させる方法を紹介していきます!

 

横並びに広告を2つとは以下の様な状態です。

AFFINGER5 記事下広告11

このように2つ並べることで異なった広告を表示できるようになり、クリック率を上昇させることが出来ると言われています。

 

しかし、横並び(ダブルレクタングル)はPC閲覧時のみ可能なことなのでスマホは別に設定する必要があります。その方法はあとで紹介します!

 

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

AFFINGER5 記事下広告

  1. Google AdSenseを開いて「広告」→「サマリー」をクリックします。
  2. 「広告ユニットごと」をクリックします。
  3. 3つのユニットがありますが今回はディスプレイ広告を選択します。

 

AFFINGER5 記事下広告2

 

  1. 広告ユニットの名前を入力します。
  2. 広告のサイズは固定を選択します。
  3. 今回は幅336高さ300で行って行きます。
  4. ユニットの名前を入力したら「作成」をクリックします。

ポイント

広告ユニット名はどんなのでもいいですが、あとで表示回数などを見ることができるので"横並び"などのどこに表示されているかわかるような名前にすることをおすすめします!

 

AFFINGER5 記事下広告3

コードが書かれたページが表示されるので「コードをコピー」をクリックしてコードの取得は完了です。

 

ウェジェットで広告コードを設置

AFFINGER5 記事下広告4

  1. WordPressを開いて「外観」→「ウェジェット」をクリックします。
  2. 00_STINGERカスタムHTMLを選択します。
  3. 広告・Googleアドセンス用336px(A)を選択して「ウェジェットを追加」をクリックします。

 

AFFINGER5 記事下広告5

このようになるので内容に先ほどコピーしたコード貼り付けて「保存」をクリックします。

 

AFFINGER5 記事下広告6

広告・Googleアドセンス用336px(B)広告・Googleアドセンス用336px(A)と同様にやっていきます!

 

これで設置は完了です!

 

しかし、このままだと下の図のように横並びではなく縦並びになってしまうのでAFFINGER5管理で設定変更をしていきます。

AFFINGER5 記事下広告7

 

AFFINGER5管理で設定変更

横並び(ダブルレクタングル)に表示するためにはAFFINGER5管理で設定を変える必要があります。

 

AFFINGER5 記事下広告9

  1. AFFINGER5管理を開きます。
  2. デザインを選択してサイト全体のレイアウト一括設定を表示します。
  3. PC閲覧時のサイトの幅をデフォルトの1060pxから1114pxに変更します。

 

AFFINGER5 記事下広告10

 

  1. AFFINGER5管理のまま投稿・固定記事設定を選択します。
  2. PC閲覧時に記事下のアドセンス広告を横並びにするにチェックを入れます。
  3. 最後に「save」をクリックします。

これですべての設定が完了です!

 

最後にしっかりと表示されているかを確認すれば終わりです!

 

スマホ閲覧時に記事下にGoogleアドセンス広告を表示する方法

投稿記事の下に一括表示を選択した場合はPCとスマホ共通の設定なので特にやる必要ないですが、横並びダブルレクタングル)はPC閲覧時のみなので、スマホにも広告を表示させる場合は別途に設定する必要があります。

 

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

AFFINGER5 記事下広告

  1. Google AdSenseを開いて「広告」→「サマリー」をクリックします。
  2. 「広告ユニットごと」をクリックします。
  3. 3つのユニットがありますが今回はディスプレイ広告を選択します。

 

AFFINGER5 記事下広告

  1. スクエアを選択します。
  2. 広告のサイズはレスポンシブを選択します。
  3. ユニットの名前を入力したら「作成」をクリックします。

 

AFFINGER5 記事下広告12

するとこのようなコードが書かれたページが表示されるので「コードをコピー」をクリックします。

 

ウェジェットで広告コードを設置

AFFINGER5 記事下広告

  1. WordPressを開いて「外観」→「ウェジェット」をクリックします。
  2. 00_STINGERカスタムHTMLを選択します。
  3. 広告・Googleアドセンスのスマホ用を選択して「ウェジェットを追加」をクリックします。

 

AFFINGER5 記事下広告17

このようになるので内容に先ほどコピーしたコード貼り付けて「保存」をクリックします。

ポイント

data-ad-formatが"auto"になっている場合"rectangle"に変更してください。rectangleにすることにより広告が大きく表示されるようになり表示率&クリック率の上昇に繋がります!

 

これで設置は完了です!

 

最後に広告がきちんと表示されるか確認して終了です!

 

【AFFINGER5】記事下にGoogleアドセンス広告を表示させる方法を紹介のまとめ

今回は記事下にGoogleアドセンス広告を表示させる方法を紹介しました!

 

広告の表示が1つがいいのか2つがいいのかはまだ意見が分かれている状態なので一定期間で両方を試してみるのもありかもしれませんね!

 

では、また次の記事で会いましょう!!

 

-AFFINGER5

Copyright© kane blog , 2020 All Rights Reserved.