広告

Google AdSenseの広告の編集方法と貼り方

Google AdSenseの広告の貼り方

Google AdSenseの広告をサイトに導入するための流れは、以下の3ステップです。

  1. Google AdSenseで広告コードを取得
  2. 広告コードを編集
  3. 記事内に挿入

それでは、順番に解説をしていきます。

広告コードを取得

Google AdSenseの管理画面にログインし、
広告→広告ユニットをクリック、
「新しい広告ユニットの作成」の中から「ディスプレイ広告」を選択します。

アドセンス記事中広告の取得方法解説画像

続いて、以下のように広告を新規作成していきましょう。

アドセンス記事中広告の取得方法解説画像

  1. 名前：自分で管理するためのものなので、後から見て分かればなんでもOK
  2. 広告の種類：スクエア
  3. 広告サイズ：レスポンシブ

選択ができたら「作成」をクリックします。

すると広告コードが表示されますので、これをコピーしましょう。

アドセンス記事中広告の取得方法解説画像

このコードを編集してからWordPress内に貼り付けていきます。

コードを編集しよう

次に、取得したコードを編集します。

コード編集の目的は、
広告サイズを正しく最適化させることです。

初心者の方は「？」といった感じかもしれませんが、
取得したコードをそのまま使用するとよりも
手を加えた方がクリック率が高い表示になります。

これから解説する方法でコード編集を行なっていきましょう。

まず、初期のコードは以下のようになっています。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!– 自分で設定した広告の名前–>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-個別で割り当てられた数字"
data-ad-slot="個別で割り当てられた数字"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

このコードについて、
これから3箇所に渡り編集を行なっていきます。

コードを編集する際にはスペルミスやスペースミス、
引用符の変換などに気をつけましょう。

PCのメモ帳を使う時に「""」が勝手に変換されることがありますが、
元のコード通りのものを使いましょう。

①初期コードの直前にコードを追加

まず、初期のコードの直前にこのコードを追加してください。

<style>
.自分で設定した広告の名前 { width: 300px; height: 250px; }
@media(min-width: 340px) { .example { width: 336px; height: 280px; } }
</style>
自分で設定した広告の名前の前の「.」や、
スペースなどを消さないように気をつけましょう。

このコードを入れることで

  1. 横幅が340px以下のデバイスでは『レクタングル中』の広告が表示
  2. 横幅が340px以上のデバイスでは『レクタングル大』の広告が表示

と、正しく最適化がなされるようになります。

②初期コードを一部書き換え

続いて、コードの一部書き換えを行います。

初期のコードから以下のコードを探してください。

<ins class="adsbygoogle"

この部分を、以下のように書き換えてください。

<ins class="adsbygoogle あなたが設定した広告名"

adsbygoogleの後ろに、
半角スペースとあなたが設定した広告名をプラスします。

③センタータグを追加

プラグインを使用して広告を設置する際に
「中央寄せ」を指定することはできるのですが、
使用するプラグインによっては上手く中央寄せがされないこともあるので、
センタータグを挿入します。

もし広告の中央寄せが上手くいかなかった方は参考にしてください。

コードの先頭に<center>一番後ろに</center>を挿入

④最終形を確認

3箇所に手を加えたコードの最終形は以下の通りです。

<center>
<style>
.自分で設定した広告の名前 { width: 300px; height: 250px; }
@media(min-width: 340px) { .example { width: 336px; height: 280px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!– 自分で設定した広告の名前 –>
<ins class="adsbygoogle 自分で設定した広告の名前"
     style="display:block"
     data-ad-client="ca-pub-個別で割り当てられた数字"
     data-ad-slot="個別で割り当てられた数字"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></center>

スペースやスペルミスなどがあると正しく表示されません。

上手く表示されなかったら、コードが正しく記述されているかを確認してみてくださいね。

WordPress内に広告を設置

コードが出来上がったら、
WordPress内で広告が使えるように設定をしていきます。

設定については、
「AdSense Plugin WP QUADS」
というプラグインを使う方法が簡易的で分かりやすいです。

下記の記事を参考に進めてみてください。

・WP QUADSでGoogle AdSenseの広告を設置する設定方法

設置場所ごとにコードを出し分ける必要はあるか？

アドセンスの広告コードを設置位置ごとに発行した方が良いのか？

これはよくいただく質問なのですが、私は

  • タイトル下
  • 記事上（目次上）
  • 記事中
  • 記事下（本文の一番下）

この4つは別で発行しています。

上で解説した方法で、4回広告を作るということですね。
発行の際に「記事上」「記事中」のように
分かりやすく広告の名前をつけてあげればOKです。

設置場所ごとに広告を出し分けている理由は、比較がしやすいからです。
広告を出し分けていれば、
アドセンスの管理画面のレポート＞広告ユニットで
ユニットごとの数値をみることができます。

どうしても難しい！という人は
全て同じコードを使い回すでもOKですが、
（1つのコードを使い回しても普通に広告は表示されるので）

「タイトル下だけユナイテッドの広告に変えてみよう」
「目次上にfam8の広告を使ってみよう」
「記事下はCOMAPASSの広告が良いかも」

といった感じでテストをするときに、
アドセンスを設置場所ごとに数値が見れる状態になっていると
比較が分かりやすくなるので
設置位置ごとの発行をオススメします。

最後に

Google AdSenseの広告設置について、
基本となる配置を解説をさせていただきました。

配置が完了したら、必ず広告がきちんと表示されているか確認しましょう。

センタリング（中央寄せ）など、
しっかり確認して微調整を行なってくださいね。

あとは、記事を書きながら
「違和感なく広告が設置できているか」を確認していきましょう。

こういった細かな微調整がクリック率に影響を与えますので、
ここは手を抜かずにこだわっていきましょう！

この記事を書いた人
Hitomi
Hitomi