表示確認用に使えるアドセンス等広告のダミー画像をIFRAMEで作ってみた

突然ですが、まずは下記の味気ないダミー画像をご覧ください。

これらは、Googleアドセンスやアフィリエイトバナーの表示確認用に作ったダミー画像です。

ただのダミー画像表示ではなく、一工夫してあります。

画像自体は、placehold.itというダミー画像生成サービスから拝借しているのですが、ただ単にimgタグで記述して表示しているのではなく、一工夫してあります。
IFRAMEで取得しており、CSSも指定しています。

理由があります。

例えばレスポンシブデザインでの構築を見越している場合などにおいて、img {maw-width: 100%;}とすることで、画像がエレメントの横幅に応じて伸縮するよう設定することも珍しくありません。
(私はほぼ常にその設定をしています。)
その場合、imgタグで取得するともちろんダミー画像も伸縮します。
するとここで問題が。

アドセンス広告などは、(レスポンシブ用広告でない限りは)伸縮せずにそのままの横幅で表示されます。
336pxx280pxの広告を横幅300pxのエレメントに設置した場合、横に突き出ます。
imgタグでダミー画像を取得し広告の表示確認をしようとしても、img {maw-width: 100%;}を設定しているためダミー画像は伸縮され横に突き出ないので、結果として正確な表示確認ができません。

これを防ぐために、CSS直書きでmax-width: none !important;を指定させていただきました。
この点が肝です。

コードを晒すので、自由に使って下さい。

ちなみに、imgタグにmax-width: none !important;を指定してもいけそうですが、GoogleアドセンスはIFRAME表示のようなので、似せてIFRAMEを使いました。

杉直樹
杉直樹 著者の杉直樹です。
"ライフクエスト"は、基本的にはジャンル多岐にわたる総合ブログです。
"人生をより豊かにする"と"社会をよりよいものにする"にマッチした記事をたくさん書いていけたらと思います。
お役に立てる記事があれば幸いです。

Facebookページで為になる情報をチェック

コメント