Stinger5でimgタグのインライン要素化(改行防止)ができない時の対処法
2017/02/26
Stinger5とかでアフィリエイトタグを埋め込んだ時に改行されてしまう問題。
改行防止するためにimgをインライン要素にするとかCSSをいじってみたけど上手くいかないという人のための記事です。
改行されてしまうアフィリエイトタグ
だいたいのASPのテキスト型アフィリエイトタグはこんな感じになっています。
<a href="リンクURL" target="_blank">テキスト</a><img src="画像リンク" alt="" width="1" height="1" border="0" />
画像URL部分に仕込まれているのは透明のGIF画像。ASPが計測のために入れています。
で、Stinger5のCSS(style.css)には43行目にimgタグ(画像)をブロックレベル要素にする記述があります。
img, video, object {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
display: block;
}
これによって画像の後は必ず改行されることに。
「なんでこんな画像入れてんねん。消したろ」と削除してしまうとほとんどのASP規約に抵触することになるためタグをいじるのはおすすめできません。
よく紹介されている方法……が上手くいかない
で、よく紹介されているのが以下のようにクラス指定したところだけを画像をインライン要素指定してしまおうというもの。
.d-inline > img { display: inline !important; }
この作ったクラスで
<span class="d-inline"><a href="リンクURL" target="_blank">テキスト</a><img src="画像リンク" alt="" width="1" height="1" border="0" /></span>これで続きが改行されないはずなんだけど
とさっきのタグを挟みこむことでASPから提供されたタグそのものをいじらずに指定した画像をインライン要素にするという方法。
でも何故かこの方法だとぼくの環境ではインライン要素にならず……。
みんな上手くいっているはずの改行防止策がどうしても上手くいかない。何回やっても改行されてしまう。
ブラウザ(Chrome)で要素の検証をしてみると一応指定したクラスは適応されている。
けどimgタグがブロックレベル要素のまま。
そうなるとCSSの優先度の問題なんだろうけど、important付けてるから最優先になるはずなのに……なぜだ……と悩みました。
解決してくれたコード
最終的に解決してくれたのは以下のコード。
style.css部
.inline-img img { display: inline!important; }
これをstyle.cssの一番下に追記。
(改行防止)適用させたい部分の表記
<span class="inline-img"><a href="リンクURL" target="_blank">テキスト</a> <img src="画像リンク" alt="" width="1" height="1" border="0" /></span>これで続きが改行されなくなった
こんな感じでタグ前後の改行してほしくない部分を囲えばOK。
Stinger3で使用されているコードをそのまま使い回しました。
何が原因でインライン要素化されなかったのかが分かっていないという非常に恥ずべき状況ですが、ぼくの場合はとりあえずこれで解決しました。
ぼくと同じようにアフィリエイトタグを改行しないようにする方法をやってみたけど上手くいかない人は試してみるのも1手かと。
注意書き今回の画像インライン要素化によって何か損害が出ても対応しかねますので、CSSの修正は自己責任でお願い致します。