コピペで簡単!AdSenseレスポンシブ広告ユニットのコード for Simplicity編

ここのところAdSense関連の記事が続いていますが、予定通りコピペするだけで簡単に使える「AdSenseレスポンシブ広告ユニットのコード for Simplicity編」を紹介したいと思います。

そのまま使えるとは言ってもさすがにIDの部分は差し替えてもらわないといけませんけどね?と言うかそこはちゃんとして下さいね?

スポンサーリンク

Simplicity用ですが他のテーマにも応用は可能です

今回こちらで紹介するAdSenseの広告コードは基本的にSimplicityのブレークポイントとカラム幅に合わせて作成していますので、Simplicityで使用する場合はコピペするだけでそのまま利用出来ますが、Simplicity以外のテーマだと微妙に合わない部分もあるかと思います。

例えば、Simplicityではサイドバーがメインカラムの下に降りるのは 1110px 以下ですが、Luxeritasの場合は 991px 以下になります。そんな感じでテーマごとのブレークポイントを考慮してメディアクエリの数値を書き換えれば、他のテーマにも応用する事は可能ですので、ぜひとも参考にしていただければ幸いです。

実験的な部分もありますのでその点はご容赦を

実際に当サイトで使用しているコードをコピペで利用出来る形に改変したものですが、テーマのカスタマイズによる影響やスキンの使用有無などによっては細かい部分で差異が発生する場合もありますので、最終的な見映えやマージンの調整に関しては各自で試行錯誤してみて下さい、という事でひとつよろしくお願いします。

可能な範囲でテストはしたつもりですがAdSenseの性質上、納得いくまでリロードして表示を確認するという事も出来ませんので、出来れば実際に使ってみて検証をお願いしたい…と言いますか、むしろ「人柱上等」なつもりでご利用いただければと思います。

尚、AdSenseの広告ユニットに関してはこちらのエントリーも併せて参照していただけると、更に理解を深めていただけるのではないかと思われます。

Simplicityの設定と使用ウィジェット

Simplicityの設定によって広告の表示に関する仕様が変わってくる部分がありますが、あくまでも当サイトの設定内容を基準としていますのでその点はご了承下さい。うまく広告が表示されない場合はまずその辺りをチェックしていただければと思います。

カスタマイザーからの設定と使用するウィジェットは以下の通りです。

  • 完全レスポンシブ表示を有効:オン
  • サイドバーの幅を336pxに:オフ
  • 広告を中央表示:オフ
  • パフォーマンス追求広告の表示:オフ
  • 通常のテキストウィジェットを使用

完全レスポンシブ表示を有効:オン

設定 レイアウト(全体・リスト) > 完全レスポンシブ表示を有効

PCとモバイルを区別する事無くCSSを一元管理したいという理由から、当サイトでは完全レスポンシブ表示を有効にしてあります。私の場合はSimplicityを使い始めた当初から常にこの状態にしてありますので、完全レスポンシブモード以外の挙動については実はほとんど把握出来てなかったりします。

ただ一点だけ確実に理解しているのは、完全レスポンシブモードだとダブルレクタングルは自前でしなければならないという事くらいです。

サイドバーの幅を336pxに:オフ

設定 レイアウト(全体・リスト) > サイドバーの幅を336pxに

サイドバーは 300px で十分でしょう。むしろ最近では「もう1カラムでいいんじゃね?」とすら思うようになってきました。

広告を中央表示:オフ

設定 広告 > 広告を中央表示

広告用ウィジェットを使った場合と、それ以外のウィジェットを広告用の表示エリアに設定した場合に有効なようですが、広告コードに含めたスタイルでセンタリングするようにしてあるのでこの機能は使用していません。

パフォーマンス追求広告の表示:オフ

設定 広告 > パフォーマンス追求広告の表示

これはAdSenseの広告掲載数に上限があった頃に効果的な機能だったのではないかと思いますが、完全レスポンシブモードでは表示されないという事なのでこの機能も使用していません。

テキストウィジェットを使用します

Simplicityには広告用のウィジェットが用意されているのでそちらを使うのもありですが、自動的に付加してくれるスポンサーリンクの文言も制御する必要があるので、あえて使用していません。誤クリックを誘発するような配置になっていなければ必須というわけでは無いようなので、適度なマージンを空けておけばいいかなと思っています。

一応、広告用のウィジェットを使用する事で、カスタマイザーから全ての広告を一括で非表示に出来るので便利かも?とは思いますが、同じ機能のCSSを自前で用意しておいて普段はそれをコメントアウトしておくという形でも出来なくはありません。

何れにしてもこの辺りはウィジェットの特性を理解した上で、使い分けていただければと思います。

パソコン用・モバイル用テキストウィジェットについて

PCから見た時にしか表示しないラージスカイスクレイパーや、モバイルだけに表示したい広告などもあると思いますので、必要に応じて通常のテキストウィジェットと使い分けていただいて良いでしょう。

条件をもっと細かく設定したい場合は Widget Logic のようなプラグインと組み合わせると色々出来そうな感じです。

作業のポイントと注意事項

それでは作業に入る前にいくつか前提条件と言いますか、注意事項などを。

  • 必ずしも指定したサイズになるとは限りません
  • 横幅と形状のみで高さは指定しません

以上の二点に関してはこちらのエントリーで詳しく説明していますので、出来れば作業に入る前に一度目を通していただければと思います。

adsbygoogle.js の記述は1回のみ

AdSenseの広告コードには以下のようなスクリプトを読み込む行が必ず含まれています。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

これは1回でも読み込んであればOKなので、Simplicityの場合は header-insert.php にでも入れておいて、広告コードからは消してしまった方がスッキリします。AdSenseの審査の時に埋め込んだタグがそのままなら特に作業は必要ありません。

自分でスポンサーリンクの文言をつける場合

Simplicityの機能で表示している広告と見た目を揃えたい場合は、以下のようなタグを用意してその中に広告ユニットのコードをコピペするとそれっぽく見えるようにはなります。

<div class="ad-space">
<div class="ad-label">スポンサーリンク</div>
@ここにAdSenseの広告コード@
</div>

全く同じ構造になるわけではありませんが一応同じクラスセレクタにはしてあるので、まとめて表示をコントロールする事は可能になります。カスタマイザーから「広告を中央表示」をオンにする事でスポンサーリンクの文言はセンタリングされるようになります。

広告ユニットをセンタリングしたくない場合

CSSを用意しなくても広告コードを貼るだけで良いように、コードに併記したスタイルの中で広告をセンタリング(中央寄せ)するようにしています。これをしたくないという場合は以下の取り消し線の部分( margin: auto; )を削除して下さい。

<style type="text/css">
.ad-xxxx { display: block; width: 300px; margin: auto; }
@media (min-width: 541px) { .ad-xxxx { width: 336px; } }
</style>

とか言って実は効いてない事もあったような気がしなくも無いんですが…あれは inline-block にしてた時だったんだろうか…とりあえず、何か条件があってそうならない場合があればご一報いただけると幸いです。

同じ広告コードを複数使う場合

同じ種類の広告コードを複数箇所で使用する場合、表示スタイルも同じで良いかどうかでその後の手順が少し変わってきます。

例えば、インデックスリストのトップ・ミドル・ボトムに同じ形状の広告を表示させるとして全て同じスタイルで良い場合は、3箇所とも同じ広告コードをコピペしてミドルとボトムのスタイル部分は不要なので削除、広告IDはそれぞれ違うものを設定すれば表示スタイルは同じで広告ユニットは別管理に出来ます。

それぞれを違うスタイルで表示したい場合は、クラス名が被らないようにしないと後から読み込まれる方のスタイルで上書きされてしまいますのでその点は注意が必要です。

AdSenseレスポンシブ広告ユニットのコード

本題に入るまでが相変わらず長いですね…これでもかなり削ったつもりなんですが。それでは作業の手順としては以下のようになります。

  • テキストウィジェットを選択
  • 表示させたいエリアにウィジェットを追加
  • 設置したい広告のコードをコピペ
  • @ca-pub@と@slot@を自分のIDに置き換え

広告コードの上に以下のような感じで画面サイズと表示される可能性のある広告サイズの対応表的なものをつけてみましたのでご参考までにどうぞ。

画面サイズ:表示される可能性のある広告サイズ
形状:広告の形状です(そのまんまやがな…)

サイト運営者IDと広告ユニットIDの設定

@ca-pub@ -> AdSense サイト運営者ID(ca-pub-数字16桁)
@slot@ -> AdSense 広告ユニットID(数字10桁)

この二箇所の置き換えは自分で作成したレスポンシブ広告ユニットのコードから以下のマーカー部分を行単位でコピーして差し替えるのが一番手っ取り早い気がします。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- @広告につけた名前@ -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

サイドバーにラージスカイスクレイパー

ハーフページとも呼ばれるようですが、ラージスカイスクレイパーの方がカッコ良い…と思うのは私だけでしょうか。当サイトのサイドバートップにデカデカと表示されているアレです。私としてはドーンとしていて結構好きなんですけどね?

~1110px:非表示
1111px~:300x600、160×600、300x1050(未確認)
形状:vertical(縦長)

理論上はポートレート(300x1050)と呼ばれるサイズの広告も表示されるはずなんですが、まだ1度も見た事がありません…

※ディスプレイの解像度が 1280x960 でした…たぶんそのせいかと。
<style type="text/css">
.ad-side-top { display: none; }
@media (min-width: 1111px) { .ad-side-top {
     display: block; width: 300px; margin: auto; } }
</style>
<ins class="adsbygoogle ad-side-top"
     data-ad-client="@ca-pub@"
     data-ad-slot="@slot@"
     data-ad-format="vertical"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

横幅しか設定していないので何が表示されるか不安かもしれませんが、vertical 指定のおかげでメインカラムに設置しても縦長の広告しか表示されませんのでそこは安心して下さい。

さすがにポートレートのサイズは大き過ぎるので表示したくない、という場合は 1111px のメディアクエリに height: 600px; か max-height: 600px; を追加すれば表示されなくなるはずです。

メインカラムに横長のバナー

一覧表示画面ではインデックスリストトップ、投稿画面では投稿タイトル上あたりに設定するのが無難なところでしょうか。もちろん中間地点や一番下に使ってもおかしくはありません。

~339px:300x60、234×60
340px~:320×100、320×50
541px~:468×60
768px~:728×90
形状:horizontal(横長)
最初は 320px からにしていましたがマージンを考慮していなかったせいで、はみだしチャンピオンしてました…なので 300px から始めています。カラム幅が固定ならネガティブマージンを使うところですが、可変っぽい感じだったので良い方法が思い付きませんでした。
<style type="text/css">
.ad-top { display: block; width: 300px; margin: auto; }
@media (min-width: 340px) { .ad-top { width: 320px; } }
@media (min-width: 541px) { .ad-top { width: 468px; } }
@media (min-width: 768px) { .ad-top { width: 728px; margin: 0 -24px; } }
</style>
<ins class="adsbygoogle ad-top"
     data-ad-client="@ca-pub@"
     data-ad-slot="@slot@"
     data-ad-format="horizontal"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Simplicityのメインカラム幅は 680px なので 728px のビッグバナーはさすがに入りませんが、こちらは固定幅なのでネガティブマージンを使って設置してみました。この辺に関してはお好みで width: 100% にしてレスポンシブにお任せするなり、不要ならこの行は削除するなりしていただければと思います。

記事一覧などに大きめのレクタングル

当サイトでは最初のH2見出し前以外、記事中にAdSenseの広告は入れないようにしていますが、記事一覧のインデックスには入っててもいいかな?という事でインデックスリストミドルにも広告を入れてみました。

このインデックスリストミドルですが、表示エリアにある説明では

「一覧リストのスタイル」が「サムネイルカード」の時のみの機能です。

となっています。それにしても「サムネイルカード」ってどのスタイルの事を指しているんだろう…という事で、私が試してみた限りでは

  • エントリーカード(デフォルト)
  • 大きなエントリーカード
  • 最初だけ大きなエントリーカード
  • 最初だけ本文表示

この4パターンで表示されるようです。

設定 レイアウト(全体・リスト) > 一覧リストのスタイル

インデックスリストミドルのウィジェットは記事を3件表示した後に挿入されるので、表示件数が6件だと一番しっくりきますが、さすがにその件数ではサイドバーとの兼ね合いでフッターの上に空白が出来そうなので、その辺りは適当に調整しましょう。

~540px:300x250(中央)
541px~:336x280(中央)
768px~:680x280、336x280(中央)
形状:rectangle(レクタングル)
AdSenseの広告コードに width: 100% ってあまり見た事が無いんですが…とりあえずやってみました、みたいな。
<style type="text/css">
.ad-front-middle { display: block; width: 300px; margin: auto; }
@media (min-width: 541px) { .ad-front-middle { width: 336px; } }
@media (min-width: 768px) { .ad-front-middle { width: 100%; } }
</style>
<ins class="adsbygoogle ad-front-middle"
     data-ad-client="@ca-pub@"
     data-ad-slot="@slot@"
     data-ad-format="rectangle"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

試しにサイズ無し・形状レクタングルの指定のみ(つまり display: block のみ)で表示させてみた結果、上記のコードと同様の結果になったので特に問題は無さそうです。

Simplicityの場合はモバイル用の 広告 300x250 に設定してみるのもありかもしれません。

ダブルレクタングル横並び

メインカラムの表示エリアならどこでもダブルレクタングルが可能ですが、やはり一番オススメなのは 広告 336x280 でしょうか。スポンサーリンクの文言もつけてくれますし、最初のH2見出し前・投稿下・関連記事下にも表示してくれますので。

ただし、完全レスポンシブモードでは自動でダブルレクタングルにはしてくれないので、広告ユニットを2つ設定する必要があります。広告を横に並べるだけのスペースが無い場合は、右側の広告ユニットを非表示にして左側の広告をセンタリングします。

余談ですが、このウィジェット表示エリアに

※「広告」ウィジェットは使用しないで下さい

という注意書きがあるのは、この表示エリアでは内部的に広告用のウィジェットと同様のコードを付加しているので、タグが二重になってしまいスポンサーリンクも二回表示されるようになるからではないかと思われます。

~767px:左:336x280(中央)、右:非表示
768px~:左:336x280(左寄せ)、右:336x280(右寄せ)
形状:rectangle(レクタングル)
<div class="clearfix">
<style type="text/css">
.ad-post-left { display: block; width: 336px; margin: auto; }
@media (min-width: 768px) { .ad-post-left { float: left; } }
</style>
<ins class="adsbygoogle ad-post-left"
     data-ad-client="@ca-pub@"
     data-ad-slot="@slot@"
     data-ad-format="rectangle"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<style type="text/css">
.ad-post-right { display: none; }
@media (min-width: 768px) { .ad-post-right {
     display: block; width: 336px; float: right; } }
</style>
<ins class="adsbygoogle ad-post-right"
     data-ad-client="@ca-pub@"
     data-ad-slot="@slot@"
     data-ad-format="rectangle"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

基本的にダブルレクタングルはPCのみの表示方法ですので、モバイル用のサイズは考慮していません。広告 336x280 以外の表示エリアに設定する場合は、必然的にパソコン用テキストウィジェットを使用する事になると思います。

ダブルレクタングル 別バージョン

こちらもダブルレクタングルですが前出のコードと違うところは、横並びに出来ない場合に左側の広告ユニットを幅いっぱいのサイズにする事です。

~767px:左:680x280、336x280(中央)、右:非表示
768px~:左:336x280(左寄せ)、右:336x280(右寄せ)
形状:rectangle(レクタングル)
<div class="clearfix">
<style type="text/css">
.ad-post-left { display: block; margin: auto; }
@media (min-width: 768px) { .ad-post-left { width: 336px; float: left; } }
</style>
<ins class="adsbygoogle ad-post-left"
     data-ad-client="@ca-pub@"
     data-ad-slot="@slot@"
     data-ad-format="rectangle"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<style type="text/css">
.ad-post-right { display: none; }
@media (min-width: 768px) { .ad-post-right {
     display: block; width: 336px; float: right; } }
</style>
<ins class="adsbygoogle ad-post-right"
     data-ad-client="@ca-pub@"
     data-ad-slot="@slot@"
     data-ad-format="rectangle"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

クラス名の変更について

広告コード中の ad-xxxx の部分は適当にそれっぽい名前をつけてありますが、自分で管理しやすい名前に変更する事も可能です。その場合は以下の黄色のマーカー部分が全て同じ名前になるように注意して変更して下さい。

<style type="text/css">
.ad-xxxx { display: block; margin: auto; width: 300px; }
@media (min-width: 541px) { .ad-xxxx { width: 336px; } }
@media (min-width: 768px) { .ad-xxxx { float: left; } }
</style>
<ins class="adsbygoogle ad-xxxx"
     data-ad-client="@ca-pub@"
     data-ad-slot="@slot@"
     data-ad-format="vertical"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

AdSenseは思った以上に奥が深いです

エントリーを分割した割には内容の密度的にはそれほどでもありませんでしたが、いい加減な事を書くわけにもいかないので、検証にはそれなりに時間をかけたつもりです。と言うか、ここまで手間のかかった記事は初めてでした。

なのに実際に使えるコードはちょっぴりという…コードを掲載するだけならともかく、これは知っておいた方が良いだろうと思う事を付け足していくと、どうしてもこんな感じになっちゃうんですよね。

それでもコードの内容を理解して使っているとその内に応用を効かせられるようになりますので、自分なりにスタイルの部分を書き換えて色々と試してみていただければと思います。何と言ってもレスポンシブ広告の良いところは広告ユニットを作成し直さなくても掲載場所や形状を自由に変えられる事ですから。

不具合があれば報告をお願いします

今回のエントリーで掲載した広告コードについて何かお気付きの点や問題などありましたら、お手数ですがコメントかお問い合わせフォームからご連絡をいただけると幸いです。出来る限りのテストはしましたが、なにぶんモノがモノだけにあまりしつこく表示を繰り返すわけにもいかなかったので、正直なところ不安な部分が無くもありません。

あまり広告の話ばかりしているのもいやらしいような気はしますが、凝り性ゆえに徹底的に拘りたくなってきた部分もあります。もし、またAdSenseについて何か書く機会がありましたらその時は「広告を増やさないで収益アップを目指す」方向で考えてみたいと思います。

それでは今日はこの辺で、どうもお疲れ様でした。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク
トップへ戻る