A8.netとバリューコマースの1px改行をCSSで非表示・消してみる

A8.netとバリューコマースでテキスト広告リンクを入れると、imgタグで前後どちらかで改行されてしまい、なんだか見た目が残念になっていたのがずっと気になっていました。・・・かと言ってimgタグを削除してhtmlに表記すると改変になる可能性があり報酬が発生しないかも、という。

ということで、今回はCSSへ表記を追加して1pxのimgタグで改行されてしまう部分を消してみました

(※これで他のブログで正しく表示されるか、もしくはこれが改変にあたらないかはよくわかってません。ただCSSで表示を変更した方がそれに該当する可能性は低いだろうという勝手な想像から今回の変更を試しています。よってそのあたりは各ASPに確認が必要で何も保証はできませんのであしからず)



A8.netとバリューコマースの1px imgタグ改行をCSSで消す

まずはA8.net。よくわからないけど記事中の広告タグで、Google Chromeのディベロッパーツールを見てみたら<br>のコードがテキスト広告リンクのタグとimgタグの間に入ってました。これをまずはCSSで非表示に。

で、今回別サイトで利用していたWordpressテーマはモバイルCSSが個別に用意されており、そちらが適用されてカスタムCSSのプラグインに

.entry br+img{
display:none;
}
だけ入力してもモバイル表示の改行はそのままになってました。なので、該当するモバイルCSSのセレクタをあてて
モバイルCSSのセレクタ .entry br+img{
display:none;
}

こちらも調整してみました。

次にバリューコマースの方も調整。こちらはPC表示は問題なくモバイル表示だけ上の方に改行、というかかなり間が空いていたので、モバイルCSSのセレクタを調べてモバイル表示にのみCSSを適用。Width=”1″で適用したので、これに該当するimgタグだけが非表示になっています(なっているはず)。

モバイルCSSのセレクタ .singlearticle .entry img[width=“1”]{
display:none;
}

これでA8.net、バリューコマース共に改行が消えて、表示上おかしな間隔もなくなりました。今までは、


公式サイト >

広告リンク


的な表示になっていたのですが、現在は


公式サイト > 広告リンク


な表示になっています。Listタグを使うと表示が崩れるのもimgタグの部分を非表示にしたので改善された模様。

CSSでの非表示は自己責任でお願いします

今回はimgタグをdisplay:none;で非表示にしているので、これが正しいのかどうかはよくわかってません。また中の人が運用している別ブログでできた(ちなみにこのブログはsimplicityを利用させていただいてますが、別ブログでは違うテーマを利用しています)、というだけなので、例えば他のテーマで使う場合には他のimgタグがついた画像が消えちゃうとか色々面倒なことがあるかもしれません。

A8.netさんやバリューコマースさんにこう言ったCSS非表示での方法が改変に当たるか、また報酬やカウント集計などに影響が出るかどうかなども確認してませんので、そのあたりは直接ASP様に問い合わせてみてください。