A8広告テキストリンクが勝手に改行される時はimgをinlineに修正でOK!

HTML/CSS

A8.netなどのアフィリエイトを利用して、テキストリンクを貼った時、勝手に改行されてしまう場合があります。これは、使用しているブログのテンプレート、(cssファイル)に問題があります。ちょっと修正するだけでカンタンに解決します。

A8のテキストリンクが勝手に改行される時の修正方法はimgのstyleをinlineにすれば良い

原因はimgのcss

A8などのアフィリエイトを利用して、テキストリンクを貼った時、勝手に改行されてしまう問題は、imgタグのものをdisplay:block;で設定していることが原因です。

たとえばA8のテキストリンクでは、aタグのテキストリンクのすぐ後ろに、width=1,height=1の「img」タグが埋め込まれています。これは通称ビーコンと呼ばれ、a8が解析用に仕込んでいるタグです。これがdisplay:block;になり改行されてしまっているのです。

修正方法はimgのcssを「inline」にしてあげる

修正方法はimgのcssを修正して、display:inline;にしてあげることです。ただし、単純にimgをdisplay:inline;にしてしまうと、他のimg部分のレイアウトが崩れてしまう可能性があります。

そのため、spanなどのタグでかこってあげて、「ad_txt」などのクラス名をつけてあげて、その階層化でcss修正をしてあげましょう。

例)
span.ad_txt{display:inline !important;}

cssをいじったり、新たにクラスを作りたくない場合は、imgタグ内において、style="display:inline;"と記述してあげればOKです。

これでテキストリンクを入れても改行がされなくなります。

▼「style="display:inline;"」がない場合
A8.netが改行されて表示されてしまう。

▼「style="display:inline;"」がある場合
A8.netが改行されずに表示される。

最後に一言

cssが勝手に・・・うわぁぁぁぁ・・・!とか思ってしまう。

この記事をSNSでシェアする?

A8広告テキストリンクが勝手に改行される時はimgをinlineに修正でOK!


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