Adsense のレスポンシブ広告の正しい使いかた
前提知識:レスポンシブ広告といっても、既定の広告サイズからコンテナサイズによって選ばれて表示されるだけで、広告そのもののサイズは固定です。
そのまま使うと、広告がロードされた時にページの高さの再計算が入って、コンテンツがガタガタと動いて大層鬱陶しいです。とりあえず便利そうだから貼ってみると、この挙動でギョギョっとします。
しかし、レスポンシブ広告はCSSで設定する width/height によって正確に対応する広告サイズを入れることができ、この場合は高さが固定になるのでガタガタしません。CSSなのでメディアクエリでサイズを変えられ、レスポンシブサイトと大変相性が良いです。
公式のドキュメントに詳細な設定方法が書いてあります。といっても width/height をコンテナに設定しているだけです。
既にサイトがメディアクエリによってレスポンシブになっているなら、レスポンシブ広告にした場合、広告サイズもCSSで指定するだけでよくなってます。
余談:Adsense の広告コードの修正・改変
「広告コードには一切の変更が認められない」みたいなことが過去に書いてあったような記憶があるんですが (記憶違いかも)、現状では上記の通り、改変が認められるケースがあり、悪意をもってやるようなことじゃなければだいたい大丈夫そうな雰囲気があります。
関連エントリー
- このサイトの Google Adsense 止めた そういえは結構前に Google Analytics は止めていたようだ。いつ止めたかわからない。まったく見てもいないのにサイトレスポンスを...
- Adsense の新しい広告ユニット 最近になって「関連コンテンツ」と「ページ単位の広告」というのが beta になって登場した。サイト最適化と同時にこれらも有効にしてみたりして...
- flex layout によるレスポンシブ入力フォームの勘どころ 重要な点 常に単に縦に並べるだけなら flex layout はいらない。 適用箇所 たくさんの項目をできるだけ詰め込む場合 flex la...
- サイトの写真の表示方法の変更 サイトのCSS・JSのちょっとした変更。1ヶ月前ぐらいから写真まわりにちょいちょい変更をいれてる。 写真の高さを 100vh に制限するよう...
- サイトの画像サイズを再びアップグレード 昨年の4月にデザインの調整ということで、写真の最大サイズを 1024px まで上げていたのですが、これは Google Photos の無料...