【Amakuri】ガタガタさせないで綺麗に画像の横幅を揃えて商品リンクを表示する方法

マリオカート8 デラックス

Posted with Amakuri at 2017.6.18

Nintendo Switch

任天堂

Amazonで詳細を見る

ソニー SONY 500GB 2チューナー ブルーレイディスク/DVDレコーダー 2番組同時録画 外付けHDD対応 無線LAN内蔵モデル BDZ-ZW500

Posted with Amakuri at 2017.6.18

ソニー(SONY)

Amazonで詳細を見る

Amazonのアフィリエイトリンク作成ツールのAmakuriでAmazonの商品リンクを作って並べると上みたいに段差ができて綺麗じゃなくなってしまうなんていうことはありませんか？

ブログの表示幅の問題もあってどんな場所にも対応できる技というわけではないのですが、CSSを設定することで見栄えを整えることができます。

今回はデフォルトテンプレートを例にCSSを書いてみます。
デフォルトテンプレートから出力された「貼り付け用リンクコード」はこのようになっています。

<div class="amakuri-default" style="text-align: left; line-height: 1.5em; margin-bottom: 10px; overflow:hidden; _zoom:1;">
    <div class="amakuri-default-image" style="float: left; margin: 0 20px 0 0;">
        <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B01N12G06K/" target="_blank">
            <img src="https://images-fe.ssl-images-amazon.com/images/I/61Ne3W26hCL._SL160_.jpg" width="99" height="160" alt="マリオカート8 デラックス" style="border: none">
        </a>
    </div>
    <div class="amakuri-default-desc" style="overflow: hidden; _zoom:1;">
        <div class="amakuri-default-title" style="margin-bottom: 0.5em;">
            <a href="http://www.amazon.co.jp/exec/obidos/ASIN/B01N12G06K/" target="_blank">マリオカート8 デラックス</a>
        </div>
        <div class="amakuri-default-posted" style="margin-bottom: 0.5em; font-size: small;">Posted with <a href="http://dadadadone.com/amakuri/" target="_blank">Amakuri</a> at 2017.6.18</div>
        <div class="amakuri-default-platform">Nintendo Switch</div>
        <div class="amakuri-default-label" style="margin-bottom: 0.5em;">任天堂</div>
        <div class="amakuri-default-link" style="margin-top: 1em;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B01N12G06K/" target="_blank">Amazonで詳細を見る</a></div>
    </div>
</div>

ここの amakuri-default-image というクラスとそのすぐ下に表示されている img タグに対してCSSで設定してあげたいと思います。

方法は簡単です。

.amakuri-default-image {
	width: 30% !important;
	text-align: center !important;
}

.amakuri-default-image img {
	max-width: 100% !important;
}

このふたつをCSSファイルに設定してあげてください。
やっていることは簡単で、amakuri-default-image で指定されている範囲の幅を30%にして、中に入っている画像の最大サイズを100%にしてあげているだけです。画像の指定によって amakuri-default-image の枠内に収まるようになります。

（適用したものを画像化したもので申し訳ないのですが･･･さらにブラウザ幅を狭めたものを表示させています）
これをやると下のように綺麗に縦のラインがそろって表示されます。

商品リンク自体の幅を決定するのに amakuri-default に width を指定したりと言うこともできますので、色々と試してみてください。