アフィリエイトリンクについている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;}

コピペ

サイト型のホームページ構築に悩んでいるならこちらがおすすめです。(⇒完璧なサイト型Wordpreessテーマ )

emanon
ター坊
ター坊

コメント大歓迎です。なぜならコメントもコンテンツだから…笑
さて、メールアドレスも記入不要にしておいたので暇だったらコメントしていってください!(リンク目的の場合はスルーします。)


この記事がいいと思ったらはてなブックマークに保存しておこう!Twitterのフォローも良ければお願いします。

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)