
アフィリエイトリンクについているimgタグのせいでどうしても改行されてしまう。
href="https://px.a8.aaaaccccsssxxx" rel="nofollow">サンプルコーポレーションの公式ページ</a
img src="https://www12.a8.net/0.gif?a8mat=1+d+あYJRM" alt="これはサンプルです。" width="1" height="1" border="0" /
なかのコードはサンプル用になっていますがこんな感じになっていますよね。A8.netがそうだと思います。
このaタグのあとにあるimgタグのせいで改行されてしまう。で、調べてもうまくいかない。
この問題を解決するのに意外と手間がかかったのでまとめておきます。
imgを消すCSS
アフィリエイトのリンクを以下のコードで囲います。
<span class="a-link">アフィリエイトリンクのコード</span>
次にに以下のCSSをスタイルシートに追記します。
.a-link {display:inline-block!important;}
ここまでは調べれば結構出てくると思います。でもこれでは、
アフィリエイトリンク
を紹介いたします。
みたいな感じに改行されてしまいます。そこで今度は改行を消します。
.a-link br{display:none;}
これで改行がなくなりました。このCSSをあてた結果アフィリエイトリンクの右に半角スペースが残ってましたがこれくらいは不自然でもないのでまあいいでしょう。
でもbrなんてどこにもかいてないんだけどなあ。なんで改行されるのか。そして消せるのか。意味がわかりませんが。とりあえずこれでいけます。
ちなみにspanをdivにする場合はアフィリエイトリンクの後に続く段落(文章)もdivに含めないと改行されてしまいます。ここもハマるポイントかと。
まとめ
アフィリエイトリンクのimgを消すHTML
<span class="a-link">アフィリエイトリンクのコード</span>
アフィリリンクのimgを消すCSS
.a-link {display:inline-block!important;}
.a-link br{display:none;}