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

アドセンスの自動広告は一つの広告コードで幾つもサイト広告を表示できて便利だし、基本的にコンテンツの隙間に上手く挿入されてサイトのレイアウトが崩れることはないと思っていたらやられた。ある日、突然、ブログの記事が右端から抜けてしまって行毎の折り返しを解除したような状態になっていた。画像や文章の一部、そして自動広告も右に少しずれて何なのかと調べてみて自動広告を外したら直ったので、原因はこれしかないと分かった。Googleでアドセンスの自動広告の出し方が変更されれば今までにないことが起きる可能性は十分にあるし、または自分のサイトのテンプレートの変更も影響しないとはかぎらないから注意しなくてはならない。アドセンスの自動広告がどういうふうに表示されるかは良く分からないし、たとえ分かっても広告コードを非公式に変更するとペナルティーを食らう恐れが全くないわけではないから厄介だ。個人的にアドセンスの自動広告で崩れたサイトのレイアウトを当の広告コードを変更せず、比較的に安全に修正できた方法を紹介する。自動広告の表示領域に最大幅を指定するCSSで直った広告を配したウェブサイトのレイアウト

Website layout by 200degrees / Pixabay

サイトのレイアウトが崩れる要因としてテンプレートと自動広告の広告コードが馴染まない可能性がある。調べて表示領域の横幅がはっきり示されてなかったので、試しに親ボックスの一つに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を付けておく。