簡単にアドセンス広告を貼る方法

アドセンスに合格したら、早速広告を貼りつけたいですよね。
色々試してみて一番かんたんだった方法を紹介したいと思います。備忘録もかねて。

一般的な広告の貼り方

アドセンス側ですること

まずはアドセンス合格のメールで【利用開始】をクリックします。またはグーグルアドセンスにログインします。すると次のような画面が現れます。
掲載の自動化にして、自動広告にしてもいいのですが、勝手にたくさん意図しないところに広告を出す羽目に陥るので、今回は自分の意図したところだけに掲載される広告ユニットを使ったやりかたを説明します。

下記のように、広告→サマリー→広告ユニットごと、の順に展開していきます。
次に［ディスプレイ広告を]選びます。左端の［ディスプレイ広告]は記事内以外は一般的にどこでも配置できます。

任意の広告サイトの名前をかいたのち、スクエア→レスポンシブの順に選んでいきます。スクエアは一般的な四角い広告で横並びに二つ並べられます。横長は横長の広告がひとつだけ表示されます。縦長は文章の左右に配置するものです。どれを選んでもOKですが、ここではスクエアを選びます。そして、完了します。

広告コードができあがります。先ほど書いた広告サイトの名前とpubではじまるアドセンスのIDが記載されています。
このコードをコピーします。

ワードプレス側ですること

私はテーマAffinger5を使用していますので、それに沿った作業について書きます。後述のウィジェットがあれば、違うテーマでもほぼやることは変わらないと思います。
さて、先ほどコピーした広告コードをもったまま、ワードプレスに移り、外観→ウィジェットと展開します。

記事の一番下に広告を置きたい場合は次のようにします。
1)左側のカスタムHTMLを展開し、広告Aを選択します
2)右側の広告Aを展開するとカスタムHTMLが入ってます。そこの欄に先ほどコピーした広告コードを貼りつけ、保存します

横に二つ並べて広告表示する

ここで二つ並べて置く場合は先の工程に続けて次のようにします。
1)広告Bにも先ほどと同じ広告コードを貼りつけ、保存します

2)Affinger5管理→デザインと展開します。デザインの中で「PC閲覧時の幅width※のデフォルトは1060px）」を1114pxにします。

3)Affinger5管理→投稿・固定記事で「PC閲覧時に記事下のアドセンス広告を横並びにする ※「PC閲覧時のサイトの幅」を1114px以上に設定して下さい」にチェックを入れます。これで。幅が小さくなり、二つ並べられます。

4)記事一覧にもどり、二つ並べたい記事を選び、テキストにして［全サイズ左右50％］を選択します。水色と黄色の欄にそれぞれ［adsense］と入力し、記事を下書き保存または更新します。

これで投稿の確認をして広告が二つ並んで表示されればOKです。なお、反映されるのには早くて5分くらいかかりますので慌てないようにしましょう。

記事内に広告表示する

アドセンス側ですること

では、記事のまん中に広告を置く場合はどうしましょう。
新たに広告ユニットを先ほどの右端にある［記事内広告]を選択します。
その後はまん中に使うことがわかるような広告ユニットの名前をつけ(例えば、inner_adsense1)、横長→レスポンシブ→作成を選択し、広告コードを作成します。
広告コードをコピーします。

ワードプレス側ですること

ワードプレスに移り、広告を貼り付ける記事をテキストにして、HTMLのh2の直下にコードを貼り付けます。その後は記事の下書き保存か更新をします。これで5分くらい待ってプレビューで広告が表示されていれば完了です。
h2直下であれば、2000文字くらいなら2ヶ所置くと読者にとっても一息つけるのでいいかもしれません。
この方法は記事ごとに行うので、複数の記事を一括して広告を貼り付けたい場合は、phpをいじることになりますが、ここでは割愛します。
記事内の広告は文章の長さにもよるので記事ごとに広告を貼ることをお勧めします。

スマホに広告表示する

アドセンス側ですること

最後にスマホに広告を貼る方法を書きます。
アドセンスの広告→サイト→広告ユニットの順に展開していき、左端のディスプレイを選択し、広告ユニットの名前をつけ、スクエア→レスポンシブ→作成の順で広告コードを作成します。そして、コードをコピーしておきます。ここまでは一番はじめのやり方と変わりませんね。

ワードプレス側ですること

次はワードプレスに移り、外観→ウィジェットと展開し、カスタムHTMLを展開し、スマホ用のウィジェットを選択します。選択したスマホ用のウィジェットにはカスタムHTMLの欄ができていますのでそこに先ほどのコピーした広告コードを貼り付け、保存します。あとはスマホで確認して広告が表示されていれば完了です。

1点だけ注意しないといけないのは、書いた文章よりも広告が大きくならないようにすることです。広告だらけになってしまうのは読者にとって本末転倒です。ひどい場合はアドセンスから警告を受けますのでほどほどにしましょう。

広告表示のまとめ

以上をまとめます。

１）アドセンス側で
＊広告ディスプレイを選択する
＊広告ユニットの詳細を決める
＊広告コードを作成しコピーする

２）ワードプレス側で
＊ウィジェットを開く
＊広告を載せる記事の場所を決める
＊カスタムHTMLの欄にコードを貼る
＊保存する

３）横に二つ並べるには１）、２）に加え、

３－１）Affinger5管理の
＊デザインの「PC閲覧時の幅」を1114xにする
＊記事・固定記事の「PC閲覧時に記事下のアドセンス広告を横並びにする ※「PC閲覧時のサイトの幅」を1114px以上に設定して下さい」にチェック　　　　　　　　　　　　＊投稿記事をテキストにして全サイズ左右50%にを選択し、ビジュアルに戻し、水色と黄色のボックスに［adsense]と入力し、保存又は更新する。

３－２）記事内に広告を載せる場合は上記１），２）に加え、
＊記事をテキストにする
＊記事のh2直下に広告コードを貼る
＊記事を下書き保存又は更新する

４）スマホの貼り付け方は１）、２）と同様です。

何度も書きましたが、記事が主体ですので、記事の邪魔にならないようにしながら、広告をクリックしてくれそうな位置にはりましょう。
試行錯誤して自分なりの収益のでる広告の貼り付け方をしてみてください。