A8などのアフィリエイトで広告素材バナーを設置して、バナーの下に大きな余白スペースが生まれた時のエラーを治す方法

web制作

読了の目安時間: 131

A8などのアフィリエイトで広告素材バナーを設置した時、css次第では設置したバナーの下に大きな余白が生まれてしまう時があります。

広告素材バナーの下に大きな余白スペースが生まれる時がある

bnr-err

こちらは、キヨタツブログのトップページです。サイドバーのエックスサーバーバナーがA8で引っ張ってきたものなのですが、スタイルシートの設定をミスると、その下に余白ができてしまいます。

原因は、スタイルシートで指定しているwidthの設定

Google developerツールでソースを見てみましょう。

bnr-err2

ちょうどバナーの真下にwidth="1",height="1"で設置された極小のimg画像が設置されていることが分かります。これはA8が管理している、なにかしらの計測用の画像になります。おそらくですが、ウェブビーコンだと思いますので、バナー表示のカウントを取得しているのではないだろうかと思います。

そのため、A8バナーを内包するスタイルシートのdivなどの親要素が「width:100%;」の指定を持っている場合、その子要素にあるimgはすべて拡大されてしまうことになります。

修正方法は、widthの指定をautoにしてあげれば良いだけ

スタイルシートが問題なので、単純にwidthの幅指定をautoにしてあげればOKです。

#該当する要素名 img {width:auto;}

bnr-err3

まとめ

いかがでしたでしょうか。これと似たようなエラーで、wordpressのcontactform7のフォームにも余白が生まれたりします。

wordpressのプラグインContact Form7を使って、フォームの下に大きな余白スペースが生まれた時のエラーを治す方法

もしも、外部からパーツを設置して、謎の余白が生まれた時には、検討事項の一つとして、imgのスタイルシート指定を疑ってみると良いかと思います。

今読んだ記事をシェアする

bnr-err-thumb

A8などのアフィリエイトで広告素材バナーを設置して、バナーの下に大きな余白スペースが生まれた時のエラーを治す方法

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。