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

ブログ・アフィリ

読了の目安時間: 147

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が勝手に・・・うわぁぁぁぁ・・・!とか思ってしまう。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

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


本記事のシェアはこちらから!

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

PROFILE

yoshi

follow us in feedly

WEB制作をやっているYoshiと申します。PVは月間10万程度。趣味と勉強がてら、ブログ執筆・アフィリエイト運営をしています。気づけば日々のサーバー代くらいは余裕で支払えるくらいのお小遣いになっていました。