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

マリオカート8 デラックス
Posted with Amakuri at 2017.6.18
Nintendo Switch
任天堂

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カスタマイズ後画像

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です