えー、先日の記事で「当サイトのレスポンシブ広告、モバイルでは問題ない」と言ったばかりでアレなのですが。モバイルでも問題が発生したので、検証&修正の報告をば。
今回の問題は「max-height:100px; に設定したのに、なぜか高さが100px以上の広告が表示される(そして下の方が表示されなくなってしまう)」というとんでもないものでした(↑のイメージ画像みたいな感じ)。
ヘルプを読んでもよく分からなかったけど……
この問題、前回と違って自分ではどうにもならず、また失礼ながらGoogleのヘルプを読んでもよく分からなかったので、検索して参考になりそうな情報を探しました。
すると、このようなブログ記事を発見。執筆者様、ありがとうございます。
リンク先の記事によると、どうやらレスポンシブ広告のコードの一部を書き換えることにより、広告の形状を「rectangle(正方形に近い長方形)」「horizontal(横長)」「vertical(縦長)」に指定できるとのこと。「サイズ」ではなく「形状」というのがミソですね。ちなみに初期設定は「auto(自動)」です。
今回は自動調整でrectangleになってしまったのが嫌な感じだったので、こちらの希望の「horizontal」を指定。
すると無事、想定通りの形状で広告が表示されるようになりました。
幅はCSS、高さはコード改変で調整する仕様?
実は、前回の記事を執筆した時点でいろいろ検証して「幅はCSSで調整できるけど、高さはCSSはあまり関係ない?」ということにうすうす感づいていました。
もしかすると仕様として「幅はCSS、高さはコード改変で調整する」というものなのでしょうか……?
いえ、あくまで推測ですし、今回は英語文献は漁ってないので、そっちにはちゃんと書いてあるかもしれません。また、まだβ版ですから、これから変わるかもしれません(ちなみに、記事執筆は2014/01/08です)。
いずれにせよ、レスポンシブ広告の高さが暴走しちゃって困ってるという方は、コード改変を試してみるといいと思います。