アドセンス自動広告は暴れん坊
非常に便利で勝手に広告を挿入してくれるGoogleアドセンスの自動広告。利用すれば広告益のアップが見込めるとの情報も多く、できれば利用したい機能。
便利は便利なんですが、この子、すごく暴れん坊なんですね。
当サイトでもアドセンスの自動挿入で全然入れてほしくない位置に表示されていたり、別の要素とやたら近かったりと、中々困っていたので、対応策を考えてみました。
ワードプレスへのアドセンス自動広告の貼り方と設定
基本的に自動広告は、アドセンスを審査に出した時と同じコードのみで動きます。消したりしてない場合はそのままでOK。以下のようなコードです。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-xxxxxxxxxxxxxxxxx",
enable_page_level_ads: true
});
</script>
上記のようなコードが<head>タグ内にあれば、設定さえすれば動きます。
管理画面から「広告」タブ内→「自動広告」
コードを再取得したい場合は「自動広告を設定」から。
自動広告の詳細設定新規作成したい場合は「新しいURLグループ」から。
ここでチェックを入れたURLに同じ設定が適用されます。
自動広告で表示させたい広告の種類を選択します。
以上で設定は完了です。
アドセンス自動広告の表示崩れを軽減してみる
改善ではなく、「軽減」と表現しているのは、正直「どこに広告ぶっこんで来るかわからない」からです。
ある程度パターンは決まっているっぽいですが、新たな表示崩れパターンを発見したら修正を加えるというやり方しかないようですね。
テーマによるところも非常に大きいとは思いますが、見つけ次第、当サイトでも修正方法を追記していきます。
アドセンス自動広告の「前後の余白」の表示崩れ
となりの要素にやたら近い！とか、やたら遠い！というパターンですね。
アドセンスが他の要素に近すぎるパターン
当サイトではサイドバーでこの現象が起きていました。
空白もあけずにピッタリ寄り添ってます。テーマのCSSなどによっては余分に空白を取ってやたら間延びするパターンなんかも考えられます。
サイドバーへの挿入パターンとして、「何らかの要素の下」または「何らかの要素の子要素として、一番下」この2パターンは確認しましたが、アドセンス自動広告が一番上に来るパターンは、僕が見た限りではありませんでした。
原因
確認したところ、更新記事のパーツのリストの最終要素の下に挿入されているとこの現象が起きているようです。
解決
リスト内要素にはマイナス方向にマージンが振られていたので少し特殊なパターンかもしれませんが一応修正方法を提示しておきます。
.google-auto-placed{
margin-top: 40px;
}
“google-auto-placed” クラスはアドセンス自動広告の最上位のdivに付与されているクラスです。ここのマージンを調整することで他の要素との間隔を調整できます。
サイドバーに挿入されたアドセンス自動広告が上にある要素に近すぎる場合は上記CSSで改善する可能性が高いです。
見た目を整える場合は40pxのところをいじってみるといいと思います。
余分にスペースを取っているパターン
また近辺の要素から余分に離れてしまうことが多いと感じる場合は、マージンをマイナスに振る事で改善できると思います。
原因と解決策は近すぎるパターンとほぼ同じです。
また、当サイトではありませんでしたが自動挿入された広告が「下側の要素と近いまたは遠い」場合は、以下のように”margin-bottom”で対応できると思います。
.google-auto-placed{
margin-bottom: -20px;
}
アドセンスが変な位置に挿入されるパターン
こういう表示ホントやめてほしいですね。「そこはなくない？ｗ」と思わずツッコミ入れてしまいます。
Googleさんは需要あると思ってこの位置に挿入表示しているんですかね？聞いてみたいですね。
原因
アドセンスの自動広告設定の中にある、「テキスト広告とディスプレイ広告」が主に変な位置にぶっこみまくってくる犯人のようです。
解決その①：そもそもディスプレイ広告を切る
単純にアドセンス上でこの広告を表示しないという設定に変更するのが、最も手っ取り早く、確実。おそらく変な位置に挿入される広告の大半は収まると思います。
解決その②：CSSを駆使して任意の位置への挿入を拒否
「いや、でも自動広告使いたいやん？」「イイ感じに挿入してくれてるときもあるやん？」って方は少し難易度が上がりますが、こっちの方法がおすすめ。
厳密にいうと挿入を拒否はしていないんだけど、その位置にぶっこんで来ても表示させないよ、という指定方法。
手順①：自サイト内で表示させたくない位置をデベロッパーツールで確認
マウスオーバーで触った要素が青く変わるので、「ここには自動広告をいれてくれるな！」と言う位置を探します。
コツとしては、広告を表示してほしくない位置の中で一番上位の要素を取ってくることです。上位の要素と言うのはできる限りインデント(段差)が浅い、と言う意味です。
青く表示される部分が全く同じでも、段差が一番浅いクラス名をとってきましょう。
手順②：外観→テーマエディター→style.cssの編集
表示させたくない要素のクラス名をコピーできたら、下記のコードと合わせてstyle.css最下部に書き込みましょう。”.google-auto-placed”の前にコピーしたクラス名を挿入します。
.◇クラス名貼り付け位置◇ .google-auto-placed{
display: none;
}
注意してほしいのは貼り付けたクラス名の前に”.”[ドット]を振る事を忘れない。
後は”.google-auto-placed”との間に必ず半角スペースを入れること。スペースがないとコードの意味が変わります。
アドセンス自動広告を表示させたくない位置が複数ある場合、以下のように”,”[カンマ]で区切ることによって複数一括指定できます。
◇クラス名貼り付け位置①◇ .google-auto-placed,
◇クラス名貼り付け位置②◇ .google-auto-placed,
◇クラス名貼り付け位置③◇ .google-auto-placed{
display: none;
}
これで大抵のパターンは表示させずに対応できると思います。
一番簡単な方法を説明しましたが、CSSセレクタが分かる方なら、この考え方を応用すれば、かなり複雑なアドセンス表示の拒否位置を指定することができると思います。
ちょっと注意点と補足
一つ注意していただきたいのが、上記コードでは、ページ全部を包含する要素の直下の子要素同士の間に差し込まれる広告には対応できないということです。
ちょっと何言ってるかわからないですね。
自分で言っててももっとわかりやすい言い方ないのかと思いますが、思いつきません。申し訳ない。
例えば当サイトではグローバルメニューと、パンくずリストは兄弟要素ですが、その間に自動広告が挿入されるパターンがあります。
その広告の表示を無効にしたい場合は、それら(メニューとパンくず)の親要素を指定する必要がありますが、その要素はページ全体を覆い尽くす要素ですので、それを指定してしまうと、ページ全体でアドセンス自動広告が非表示になってしまい、そもそも意味を成しません。
詳細な対応策については挙げだすとキリがないのですが、直後に来る要素の指定方法だけ紹介します。
◇直前の要素◇ + .google-auto-placed{
display: none;
}
上記記述式だけ覚えておけばほとんどのパターンで対応できるかと思います。
まとめ
アドセンス自動広告の表示で困るのは大まかにこのパターンかと思いますが、新たに問題に直面したら更新していきたいと思います。
コメント