a8net 商品リンク表示の画像とテキストのバランスが悪い

楽天商品リンク表示

a8netの楽天リンク表示がいまいち格好悪い件。

下記の画像でも画像の表示とテキストの位置が近かったりしてイマイチですね。

a8net商品リンク

<table cellpadding=”0″ cellspacing=”0″ border=”0″ style=” border:1px solid #ccc; width:300px;”><tr style=”border-style:none;”><td style=”vertical-align:top; border-style:none; padding:10px; width:108px;”>

この下のリンク表示ですが、クロームでの表示です。
画像がベースの枠を右にはみ出しています。

楽天リンクの表示

表示がずれる原因

排出されるリンクコードの「width:108px;」が以前のコードでは設定されていなかったため起きているようです。

上ののこぎりの商品リンクもwidth:108px;を削除すれば、一番上の画像の様に表示されます。

上から2番目のリンクはなんとか表示されていますが、コードは2~4番めまで同じwidthで書かれています。

今のところ問い合わせていますので、わかり次第アップします。

結果

下記の広告は、実際のwordpressでのa8net広告です。
きちんと表示されていますので、ホームページのCSSがおかしいようです。

新潟精機 SK フォスナービット 29mm FB-29 JAN:4975846560093

価格:1,744円
(2018/3/21 12:34時点)
感想(0件)

以下は、A8.netサポートセンターからの返事になります。

原則としてA8.netで生成される
広告素材は、 改変を加えない状態にてご利用頂くことが前提となります。

またA8.netでは商品リンクの画像は提供されている大きさでご利用いただいて
おり、サイズの変更はご遠慮いただいております。widthの値を削除することもご遠慮ください。

どうしてもいうならば、テキストだけの仕様を推奨するということでした。

もうyahoo知恵袋に聞いてみました。

質問後15分で返事があり、サクッと解決。

A8.net のコードを <div class=”my-a8″> などで括ってしまえば下のような CSS が書けるのではないでしょうか。

.my-a8 td {
width: auto !important;
}

これで直りました。