【Amakuri】デフォルトテンプレートカスタマイズ例 枠線のあるタイプ

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

<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>

今回も上記テンプレートを利用していきます。

最終的に、外側に枠線がありAmazon購入リンクがボタンになっている下のようなリンクを作ります。
(カスタマイズ例の結果は全て画像にしてあります。)

amakuriカスタマイズ例01

(さらに…)

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

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

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

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

(さらに…)

【Amakuri】デフォルトテンプレートを利用した簡単カスタマイズ方法

Amazonアフィリエイトリンク作成ツールの「Amakuri」には「カスタムHTMLテンプレート機能」がありますが、自分好みにカスタマイズするのは難しいと思っていませんか?

でも実はカスタマイズって簡単なんです。

今回ご紹介するのはデフォルトテンプレートを元にしてオリジナルテンプレートを作る方法です。

下記が今回サンプルにしますデフォルトテンプレートの「貼り付け用リンクコード」です。
「マリオカート8 デラックス」で検索した結果を表示させています。

長いですし一行でごちゃごちゃと書いてあって何がなんだかわかりませんよね。

<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.13</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>

表示結果はこちらになります。

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

見慣れたAmakuriのデフォルトテンプレートです。
でもこれがこれから変わっていきますからね。

こういったものは最初からすべて作ろうとするから大変なんです。
ですから、この貼り付け用リンクコードを参考にしながら切ったり貼ったりするところから初めてみましょう。

(さらに…)