Affinger5は、とても便利にアドセンス広告が設置できます。
設置する位置は、記事上、記事中、記事下。
そして、インフィード広告も設置もできるなど、とても便利なテーマです♪
今回の記事では、Affinger5のアドセンス広告の設置方法を紹介していきます。
Contents
記事中の広告設定：アドセンスのレスポンシブ広告の設定
まずはじめに、投稿した記事の「見出し2の前」に広告が表示されるよう設置を行っていきます。
この時に使用・取得するコードは、アドセンスの「レスポンシブ広告」。
このレスポンシブ広告というのは、PCとスマホ、それぞれの画面サイズにあった広告を表示してくれる機能を持っていますので、大変おすすめです！
では、レスポンシブ広告設定、広告コードの取得手順を以下に記載していきます。
広告ユニットの作成
アドセンス画面を開き、広告の「広告ユニットごと」→「ディスプレイ広告」をクリックします。
↓↓↓
- 名前：ブログ名＋広告を貼る位置（記事中）
- 広告サイズ：レスポンシブ
↓↓↓
広告コードをコピーして、完了ボタンを押す。
これで広告コードの取得が出来ました。
次に、この広告を貼り付ける場所について説明していきます。
広告コードの貼り付け場所
AFFINGER5管理→Google広告／AMP→見出し前に広告挿入
ここで広告コードを編集してください★
広告コードを１箇所だけ修正します。
【修正前】data-ad-format=”auto”
↓
【修正後】data-ad-format=”rectangle”
“auto”のままだと、PCで表示した際に横帯状の広告が表示されてしまうので、よりクリック率の高い正方形で表示されるように設定します。
実際に貼り付けするコードはこのようになります。
見出し前に広告が表示されるように、以下の設定も忘れずにチェックを入れておきましょう。
- 投稿記事
- 1～4番目まで
1番目、2番目・・の意味は、1番最初の見出し2の上、2番目の見出し2の上・・という意味になります。
ひと段落きちんと文字数もあって書けていれば、全てにチェックしておいてOKです。
設定が終わったら、Saveボタンを押して、これで記事中の広告表示は完了です。
記事上の広告設定：アドセンスのレスポンシブ広告の設定
続いて、記事上の広告設置をしていきます。
こちらもレスポンシブ広告を使用します。
広告ユニットの作成
先ほど、記事中でレスポンシブ広告の広告ユニットを作成したように、「記事上」専用の広告ユニットを作成します。
先ほどと手順は同じなので、略しますが、名前は「ブログ名＋記事上」としておくと分かりやすいです。
広告コードの貼り付け場所
貼り付け場所は以下です。
外観→ウィジェット→投稿記事の上に一括表示
↓↓↓
広告コードを貼り、ここでも
data-ad-format=”auto”
→ data-ad-format=”rectangle” へ修正します。
完了ボタン→ Save（保存）をクリックします。
記事上の広告設置は、以上で完了です。
記事下の広告設定
記事下の広告は、スマホ用と、PC用の広告をそれぞれ設置する必要がありますので、詳しく解説していきます。
使用する広告は、それぞれ違いますので、ご注意ください。
スマホ用：レスポンシブ広告を使用
PC用：ダブルレクタングルを使用
スマホ用：レスポンシブ広告を設置
スマホ用の記事下の広告設置をしていきます。
スマホ用の広告は、レスポンシブ広告で、「記事下」の広告ユニットを作成します。
こちらも手順は上記と同じなので略します。（名前の例：「ブログ名＋記事下」）
広告コードの貼り付け場所は、ウィジェットの広告・Googleアドセンス（スマホ用）です。
広告コードを貼り、
data-ad-format=”auto”
→ data-ad-format=”rectangle” へ修正します。
完了ボタン→ Save（保存）をクリックします。
※補足※
レスポンシブ広告を、記事上、記事中、記事下とそれぞれの箇所の広告ユニットを作成するのには意味があって、
１つの広告ユニットをサイト内で使い回すよりも、どの広告場所が一番クリックされているのか分かるようになります。
【レスポンシブ広告の広告ユニットを作成するのは3つ！】
- 記事上
- 記事中
- 記事下（スマホ用）
PC用：ダブルレクタングル
広告・Googleアドセンス用336pxは、（A）・（B）と、2つ貼り付け場所があるので、2つ広告ユニットを336pxの幅で取得し設置します。
（A）左、（B）右になります。
同じ広告コードを貼り付けてもOKですが、それぞれ別のコードを取得しておくと、
どちらがクリックされているのか、より詳しいデータを測定することができます。
ディスプレイ広告で336pxを取得
336pxの広告ユニットは、ディスプレイ広告より取得します。
↓↓↓
スクエア、固定をクリックする
↓↓↓
ユニット名：例）ブログ名ダブルレクタングル
広告サイズを、幅336px、高さを300~336pxぐらいに変更し、作成ボタンをクリックします。
コードを取得したら、ウィジェットで貼り付けをします。
広告コードの貼り付け場所
広告コードの貼り付け場所は、2つあります。
広告・Googleアドセンス用336px（A）
広告・Googleアドセンス用336px（B）
同じ広告コードを貼り付けてもOKですが、それぞれ別のコードを取得しておくと、
どちらがクリックされているのか、より詳しいデータを測定することができます。
ウィジェットにコードを貼り付けたら、横並びにするように設定します。
横並びの設定
①AFFINGER管理→投稿・固定記事
を開き、
「PC閲覧時に記事下のアドセンス広告を横並びにする」 にチェックを入れ、設定をSave（保存）します。
②AFFINGER5管理→デザイン
を開き、
サイト全体のレイアウトのサイトの幅を1114に変更し、Save（保存）します。
これで記事下の設定は完了です！
トップページの記事一覧にアドセンスを設置する：インフィード広告の設定方法
トップページの記事一覧の間に、アドセンス広告を表示させることができます。
アドセンス広告のインフィード広告の設定をやってみました。
インフィード広告コードの取得
広告ユニットから、新しい広告ユニットの作成をします。
→インフィード広告を選択。
自動で広告スタイルを選択か、手動か、が選べます。
今回は自動で作成しました。
運営しているブログURLを貼り、ページをスキャンします。
広告プレビューが出るので、OKであれば右下の次へ。
広告ユニット名をわかりやすい管理しやすい名前に設定します。
（例：サイト名＋インフィード）
それと、広告だと目立たせるために背景に色をつけてみました。
これでOKであれば、保存してコードを取得。
広告コードの貼り付け場所
取得したコードを外観→ウィジェットの、広告・Googleインフィード広告の項目を開きます。
→HMHLのカスタムを挿入し、広告コードを貼り付け、完了＆保存をします。
Affinger5管理で表示の設定
続いて、Affinger5管理＞Google連携/広告のインフィード広告の設定を開きます。
トップページ・サイドバーの新着一覧・関連記事一覧にインフィード広告を入れるタイミングを設定します。
3記事ごとぐらいに広告が入るぐらいがちょうどいいかなと思うので、今回は3で設定しました。
Saveボタンを押して、設置が完了です。
ページ移動時の自動広告の設置
ブログサイトのページを移動するときに表示される「自動広告設置」もオフからオンにしておきましょう♪
以上で広告設置は完了です！お疲れ様でした！
