空っぽのimgタグ(主に広告コード)で改行されなくする方法

A8などで取得する広告タグには、表示回数カウント用に<img>タグが入っています。

テンプレートによっては、意図しない表示になってしまいます。以前使っていたStingerでは対処が必要でしたが、今使っているSimplicityではそのままでも問題なく表示されます。

Sponsored link

広告タグを配置すると改行される

たとえば、A8.netを表示するタグは、

<a href="http://px.a8.net/svt/ejp?a8mat=**********" target="_blank">A8.net</a>
<img width="1" height="1" src="http://www16.a8.net/0.gif?a8mat=**********" alt="">

のように、リンクに加えて幅1ピクセル、高さ1ピクセルの画像を読み込むようになっています。

以前で使っていたStinger5をインストールしたままの状態では、

「今日はA8.netを使う練習」という表示にしたくて、

今日は<a href="http://px.a8.net/svt/ejp?a8mat=**********" target="_blank">A8.net</a><img width="1" height="1" src="http://www16.a8.net/0.gif?a8mat=**********" alt="">を使う練習

と書いても、

「今日はA8.net

を使う練習」と表示されてしまいます。画像リンクの場合には我慢できますが、テキストリンクだと不自然過ぎて我慢できません。

oteage

対処法1:imgを削除する

タグについている<img…….>の部分を削除するという方法を使うこともできます。

通常アフィリエイトリンクではタグの改変は認められていませんが、楽天アフィリエイトの場合はリンクテキストをある程度改変することは許されています。

楽天アフィリエイトのリンクはそのまま使うと、「今だけ、激安送料無料、今なら特別価格900円のところ7…」みたいな、何の広告だかさっぱりわからないリンクになってしまうことが良くあるからです。

例に出したA8.netのような他のアフィリエイトでは、通常タグの改変は認められていません。問い合わせてOKを貰ったという人も見られますが、その人だけ(大手サイトだから)特別にOKを貰ったと考えておいたほうが良さそうです。

対処法2:CSSを編集する

もう一つの対処法は、検索したら出てきました。

テキストタイプのアフィリエイトリンクを設置すると、なぜか勝手に改行されてしまうということ。

文中にテキストタイプのリンクを入れたかったので、どうにか改行しないようにできないか方法を考えました。

([Stinger5] テキストタイプのアフィリエイトリンクがimgタグで勝手に改行される)Kuroneko Sanpomichi様より

原因は、改行が起こるのがimgタグ前後に強制的に改行を挟ませているCSSだったようです。それを特定の状況下でキャンセルするために、外観→テーマの編集→スタイルシート(style.css)を開き、

.d-inline > img {
display: inline-block !important;
}

を入力、広告タグの挿入時に、

今日は<span class="d-inline"><a href="http://px.a8.net/svt/ejp?a8mat=**********" target="_blank">A8.net</a><img width="1" height="1" src="http://www16.a8.net/0.gif?a8mat=**********" alt=""></span>を使う練習

とおまじないを入れることで解決できるというものでした。AddQuickTagというプラグインを使うと簡単にできるようになるという情報もついています。ありがとうございます。

使っているCMSやテンプレートによって、編集対象のファイルは違いますが、汎用的に使える方法ですね。

上手く行かない

最初、この設定をしても改行がなくなりませんでした。しばらく悪戦苦闘した挙句、発見した原因は、

今日は<span class="d-inline"><a href="http://px.a8.net/svt/ejp?a8mat=**********" target="_blank">A8.net</a>

<img width="1" height="1" src="http://www16.a8.net/0.gif?a8mat=**********" alt=""></span>を使う練習

と途中に知らないうちに改行コードが紛れていたことでした。

Sponsored link
Spinsored link

シェアする

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

フォローする