スキップしてメイン コンテンツに移動

アドセンスの自動広告でサイトのレイアウトが崩れる場合の対処法

アドセンスの自動広告は一つの広告コードで幾つもサイト広告を表示できて便利だし、基本的にコンテンツの隙間に上手く挿入されてサイトのレイアウトが崩れることはないと思っていたらやられた。

ある日、突然、ブログの記事が右端から抜けてしまって行毎の折り返しを解除したような状態になっていた。画像や文章の一部、そして自動広告も右に少しずれて何なのかと調べてみて自動広告を外したら直ったので、原因はこれしかないと分かった。

Googleでアドセンスの自動広告の出し方が変更されれば今までにないことが起きる可能性は十分にあるし、または自分のサイトのテンプレートの変更も影響しないとはかぎらないから注意しなくてはならない。

アドセンスの自動広告がどういうふうに表示されるかは良く分からないし、たとえ分かっても広告コードを非公式に変更するとペナルティーを食らう恐れが全くないわけではないから厄介だ。

個人的にアドセンスの自動広告で崩れたサイトのレイアウトを当の広告コードを変更せず、比較的に安全に修正できた方法を紹介する。

自動広告の表示領域に最大幅を指定するCSSで直った

広告を配したウェブサイトのレイアウト

サイトのレイアウトが崩れる要因としてテンプレートと自動広告の広告コードが馴染まない可能性がある。調べて表示領域の横幅がはっきり示されてなかったので、試しに親ボックスの一つにCSSで横幅を指定したらブログの記事もアドセンスの自動広告も右寄りから修正されて元に戻った。

レイアウト崩れが直ったCSSの横幅のマークアップ

普通、コンテンツはCSSで最大幅のmax-widthを100%で指定すると表示領域に収まるけれどもアドセンスの広告コードは自動広告にかぎらず、レスポンシブのものは効かなくて右端から抜けてしまうことがある。

しかし横幅の単位が相対値の%ではなくて画面幅のvwや固定値のpxだと効き易いから今回もそうした明確な数値をmax-widthに入れると大丈夫だった。

max-widthで最大幅を指定してはみ出しを抑える

HTML

<div class="content">
自動広告が設定されたコンテンツ
</div>>

CSS

/ * 画面の横幅一杯 */
.content {max-width:100vw}
/* 画面の横幅一杯から左右の余白を引く */
.content {max-width:calc(100vw - 左右の余白)} 
/* コンテンツの横幅一杯 */
.content {max-width:コンテンツの横幅} 
/* コンテンツの横幅一杯から左右の余白を引く */
.content {max-width:calc(コンテンツの横幅 - 左右の余白)}

CSSのmax-widthが効いてアドセンスの自動広告が表示領域からはみ出すことがなくなり、他のコンテンツを含めてレイアウトが崩れが直った。

現今、スマホと縦向きタブレットは画面一杯で、横向きタブレットとパソコンはコンテンツの横幅を取って表示するのが一般的なレスポンシブデザインだと思うので、それぞれをメディアクエリで振り分けて使う。

メディアクエリの振り分けのサンプル

/* パソコン/横向きタブレットのコンテンツの横幅の表示用 */
@media screen and (min-width:961px) {
大画面用のレイアウト修正のマークアップ
}
/* スマホ/縦向きタブレットの画面一杯の表示用 */
@media screen and (max-width:960px) {
小画面用のレイアウト修正のマークアップ
}

@media screenの「min-width:961px」は961pxの画面幅以上、「max-width:960px」は960pxの画面幅以下を意味するけれどもこれは横向きタブレットの一般的な画面幅を指定している。

多くのサイトは横幅が1000pxくらいで作られているとするとサイトのコンテンツの横幅を基準として振り分けても大差ないだろう。

アドセンスの自動広告のレイアウトを修正するマークアップはレスポンシブだと二つのコードを二つに振り分けるのが従来の仕方で、メディアクエリがその他のレスポンシブデザインで既に使われていればそこに新しいマークアップを組み込むだけだから造作ないだろう。

または横幅の値に計算式と最大値が使えるmin()関数を入れると全てを一行でもっと手早く纏めることもできる。

widthとmin()でレスポンシブに最大幅を指定する

HTML

<div class="content">
自動広告が設定されたコンテンツ
</div>

CSS

.content {width:min(100vw - 左右の余白, コンテンツの横幅 - 左右の余白)}

※左右の余白がなければ左右の余白に「0」を入れるか「100vw, コンテンツの横幅」の書き方で指定する。

widthに入れたmin()は半角コンマで区切られた左側の数/式が普通の横幅で、右側のものが最大の横幅を示しているので、サンプルのソースコードはサイトを表示するデバイスの画面幅が右側の最大の横幅に達するまでは左側の横幅の「100vw - 左右の余白」(画面一杯から左右の余白を引いた長さ:スマホ/縦向きタブレット用)、それ以上は右側の最大の横幅の「コンテンツの横幅 - 左右の余白」(コンテンツの横幅から左右の余白を引いた長さ:パソコン/横向きタブレット用)になることを意味している。

min()関数をmax-widthに使うと最大幅だけをレスポンシブに指定することになる。

アドセンスの広告コードはレスポンシブならばCSSのwidthを使っても基本的に指定される長さまでしか伸びず、max-widthと同様に働くから自動広告にもどちらを使っても大差ないと思う。

レイアウト崩れを修正するときはその他のコンテンツも考慮しながらmax-widthかwidthの相応しい方を選ぶべきだろう。

何よりも重要なのはCSSの横幅の値に%の単位を使うとアドセンスのレスポンシブの広告コードにかぎって効かないことがある。指定する幅、または最大幅を越えないようにするには画面幅のvwや固定値のpxといった明確な値を使うのが望ましい。

僕はブログの表示領域の横幅に明確な値を指定して崩れたレイアウトを元に戻すことができたけど、しかながら数日後に上記の追加したCSSを外して、もう一度、確かめてみたら何の問題もなかった。

アドセンスの自動広告のバグなのか、または自動広告の個別の大きさによって上下左右の隙間が変わったりもするけど、場合によってはみ出してしまうかも知れないので、レイアウト崩れを防止するためにも修正用のCSSを付けておく。

関連:アドセンスの自動広告でSearch Consoleのモバイルユーザビリティの問題が出た

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ

偶に始まらなかったり、途中で止まったりもしていたPlayストアでのAndroidアプリのダウンロードは安定して来ていると思うし、喜ばしいかぎりの昨今だけれども速度自体はいつも同じではないから何だろうと訝られる。 余りに遅過ぎるわけではないし、お手上げとまでは行かないにせよ、非...

飽和脂肪酸の多いココナッツオイルの過剰摂取の危険性とその他の健康上の利点

イメージ

パンや菓子や揚げ物などに安く使用される マーガリンやショートニングなどのトランス脂肪酸が動脈硬化を引き起こすと世界的に避けられる 一方で、代わりに新しく使用される他の食用油によって必ずしも健康的な食生活が確保されるとはかぎらない状況も出て来てしまっているのが厄介なんだ。 脂...

早川愛の高校野球の夏の甲子園の大会歌の栄冠は君に輝くの独唱のソプラノの美声

イメージ

高校野球の夏の甲子園の 作新学院と今井達也の優勝の記事 を改善するために新しく引用できる動画はないかとYouTubeで探していたら2016年の地方予選の栃木大会だから当の作新学院と今井達也も参加して奇しくも予選の勝ち抜けと夏の甲子園での全国制覇への好影響を受けたかも知れなかった...