アドセンス広告のサイズがおかしい

アドセンス広告はレスポンシブタイプの広告もたくさんあって、ぱぱっとコピペするだけで広告が貼れてらくちんですよね。

でもそんなレスポンシブなアドセンス広告には、なんでか幅がおかしくなったり表示されなくなったりする落とし穴があるよ、というのが今回紹介するお話です。

わたしはbloggerのテンプレートを作っているんですが（これ）、そのテンプレートもまんまとこの落とし穴にはまっちゃってました。

なぜレスポンシブなアドセンス広告の幅がおかしくなったり表示されなくなっちゃうのか、見ていきましょう。

1. アドセンス広告のサイズがおかしい
2. 解決方法
3. アドセンス広告がおかしくなる原因
1. こんなエラーが出る
2. 広告を張るスペースの幅が正しくとれていない
3. つまりどういうこと？
4. そのほかの解決方法
1. 違う2カラム実装法に変える
2. calcを使う
3. min-widthを使う
5. 結論

解決方法

最初に解決方法から。

この記事のタイトルにあるように、この不具合はサイト全体の構成が2カラムの場合に発生し、さらに2カラムのうち片方のカラムが固定幅でもう片方が可変幅だと発生します。

反対に2カラムのどちらも固定幅、もしくはどちらも可変幅だと起こりません。

なのでレスポンシブなアドセンス広告が表示されなかったり、幅がおかしくなっちゃうときは、2カラムの固定幅・可変幅をそろえてみてください。

簡単なのはどちらも「width:〇〇%」にして可変幅でそろえる方法だと思います。

アドセンス広告がおかしくなる原因

先に解決方法を紹介したので、次に原因を紹介したいともいます。ここからは気になる人だけ読んでみてくださいね。

こんなエラーが出る

まず、レスポンシブなアドセンス広告が表示されないときはこんなエラーメッセージが開発者ツールのコンソールに表示されてます。（開発者ツールの出し方はこちら）

エラーメッセージの最後のトコロを見ると、なにやらwidthが0だよ、といっているみたいです。

広告を張るスペースの幅が正しくとれていない

エラーからもわかるようにレスポンシブなアドセンス広告が表示されない、もしくは幅が大きくなってはみだしてしまうのは、アドセンス広告を張るはずのスペースの幅がうまく取得できていない事が原因だとわかります。

つまりどういうこと？

アドセンス広告はjavascriptというプログラムを使い、記事にあとづけでくっつけられてます。

そしてこのjavascriptというプログラムの中で、アドセンス広告を張ろうとするスペースの幅（width）を取得しています。

htmlやcssできちんとこのスペースの幅はこんだけ！と書いていれば何も問題なく幅が取得でき、その幅をもとにレスポンシブ広告のサイズを決定できます。

…でも2カラムの場合みたいに、片方が可変幅だとこの可変幅の幅が決定するのは固定幅がちゃんと表示されてからとなります。

なので固定幅と可変幅をまぜこぜで使っていると可変幅側の幅が決まるまでに時間がかかるんです。

そしてそんな最中にjavascriptで幅を取得しようとしても、まだ決まってないから広告を入れるべきスペースの幅がわからなくなっちゃって、上記のエラーが出て、広告がヘンな表示になってしまう、というわけです。

そのほかの解決方法

ここまで読んだ方へのごほうびとして他の解決方法も紹介しておきますね。

違う2カラム実装法に変える

固定幅+可変幅の2カラム、と一口に言っていますがその実装方法は3つくらいあります。

1. floatとmarginで実装する方法
2. tableで実装する方法
3. flexで実装する方法

今回の不具合は③のflexで実装する方法で起こりやすい不具合です。

あとはtableでも発生するかも。

なんでかというと、flexで実装する場合は可変幅側を「flex:1」と書くことが多いんですが、こう書くと固定幅が表示されるまでの一瞬、可変幅が画面いっぱいに表示されるためです。

そのタイミングでjavascript側がスペースの幅を取得しようとすると、困ったことにjavascriptは「やった！画面いっぱいスペースある！」ってなるんです。

あとはもうお分かりだと思いますが、この場合はアドセンス広告が本来の2カラムを大きく超えてめちゃくちゃはみ出して表示されます。

なので、いっそのこと①floatとmarginでの実装に変えると起こらなくなります。固定幅+可変幅にどうしてもしたい場合はお試しください。

calcを使う

わたしが今回使ったのがこのcalcを使った解決方法です。

片方のカラムが固定幅なので、もう片方のカラム幅は計算すればでてくるはずですよね。その計算を「flex:1」とか、tableで「width:100%」とかでcssに丸投げしてるとcssが計算してくれるまで幅がおかしくなる。ならいっそのことcalcで計算してやろう、というわけです。

可変幅側のwidthに「calc(100% – 〇〇px);」と入力するだけ。

〇〇pxの値は、固定幅側の幅とそれに2カラム間のマージンを足した値にすればOKです。

min-widthを使う

これはアドセンス広告が小さく表示される場合があるのであんまりおすすめではないんですが、表示されなかったり表示が崩れるのに比べたらマシ、という対処法。

2カラムの可変幅の方にmin-widthを設定しておくと、最低でもその幅がjavascriptで取得されるので一応表示はされるようになります。

結論

これまでわたしは2カラムの実装にfloatを使っていたんですが、flexを試してみたく今回作ったbloggerテンプレートからflexに切り替えていました。

やっぱり新しいやり方にかえるといろいろつまづくもんですね。レスポンシブ対応のアドセンス広告を使うのならflexは要注意！というのが今回わかりました。