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>

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

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

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

1.まず「貼り付け用リンクコード」を整形しよう

切ったり貼ったりとは言うけれども、さっきの横にずらずらと長いコードを読んでげんなりしていませんか？
だからまずは読みやすいように整形してあげましょう。

そうするとこうなります。

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

どうでしょう？
これでずいぶんと読みやすくなったと思いませんか？
構造がスッキリとして何がどこにあるのかわかりやすくなりましたよね。

2．いらない表示を消してみる

「貼り付け用リンクコード」が読みやすくなったのはわかった。
次はどうするの？

ということで、まずは自分がいらないと思った表示を消してみましょう。

今回はNintendo Swith（プラットフォーム）と任天堂（label）、Amakuriのクレジット、「Amazonで詳細を見る」を消してみます。
実際に入っているテキストとamakuri-default-platformといったclass名（class=””と囲まれた部分のことです）で当たりがつくはずです。

<div class="amakuri-default-platform">Nintendo Switch</div>
<div class="amakuri-default-label" style="margin-bottom: 0.5em;">任天堂</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-link" style="margin-top: 1em;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/B01N12G06K/" target="_blank">Amazonで詳細を見る</a></div>

この四行を全体から消していましましょう。

そうするとこうなります。

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

表示結果はこうなりました。

ずいぶんとスッキリとしたと思いませんか？

でもこのままでは「マリオカート8 デラックス」の表示から不要な要素を消しているだけです。
毎回、デフォルトテンプレートを選んでは作成して、不要な要素を削除する。
そんな作業をやるの面倒くさいですよね？

そう、面倒くさいんです。

そのために存在しているのがAmakuriの「カスタムHTMLテンプレート」機能なんです。

3.カスタムHTMLテンプレート化する

カスタムHTMLテンプレート機能には沢山の「タグ」が用意されています。
例えば、テンプレートを「カスタムテンプレート1」にして上の部分に <%title%> と記入、そして「カスタムテンプレートを適用」をクリックすると商品名が表示されるようになります。
（この際に今回は「空タグを削除」を「しない」設定にしておいてください。普段は「する」にすると便利かと思います。）
では、「マリオカート8 デラックス」と表示されている場所を <%title%> に置き換えてみたらどうでしょう？
はい、察しの良い方はもうピンときたと思います。
そうなんです。「マリオカート8 デラックス」と置換されて表示されるんです。

商品リンクを作る際に毎回書き換わる部分をカスタムHTMLテンプレート機能のタグに置き換えたらどうでしょう？
はい、元から用意されていたテンプレートかのように使うことが可能です。

今回、使うタグはたったのこれだけです。

<%title%>
商品名を表示
出力結果→　マリオカート8 デラックス

<%image_medium%>
画像を表示
出力結果→　<img src="http://ecx.images-amazon.com/images/I/513mo%2Byq4WL._SL160_.jpg" width="99" height="160" alt="マリオカート8 デラックス">

<%link_url%>
アソシエイトID付きの商品URLを表示（今回はIDつけていません）
出力結果→　http://www.amazon.co.jp/exec/obidos/ASIN/B01N12G06K/

では、置き換えてみましょう。
置き換えたのが下記のコードです。

<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="<%link_url%>" target="_blank">
            <%image_medium%>
        </a>
    </div>
    <div class="amakuri-default-desc" style="overflow: hidden; _zoom:1;">
        <div class="amakuri-default-title" style="margin-bottom: 0.5em;">
            <a href="<%link_url%>" target="_blank"><%title%></a>
        </div>
    </div>
</div>

4.実際に「カスタムHTMLテンプレート」に設定する

テンプレートを「カスタムテンプレート1」に設定して、先ほどのコードをコピー＆ペーストしてください。
そして、「カスタムテンプレートを適用」をクリックしれば完了です。

オリジナルの商品リンクの完成です。
「貼り付け用リンクコード」からコピーして自分のブログに貼り付けましょう。

もう「カスタムテンプレート1」は保存された状態ですので、次は商品リンクを作る画面にくるだけでオリジナルの商品リンクが作成された状態になります。
カスタムHTMLテンプレートは8個まで保存できますので、場面に応じて使い分けてくださいね。

5．おまけ

コードの一番上の行に書いてある style という部分に margin-bottom: 10px; とあるのが目につきませんでした？
実はこれ10pxという部分の数値を変えると商品リンクの下の余白を変えられるようになっているんです。
10pxを50pxに変更して貼り付けてみてください。
下に大きな空間ができるはずです。

それだけではありません。
下に余白をつけるだけではなく上下に余白をつけることもできるんです。

margin-bottom: 10px; を margin: 25px 0;

にしてみましょう。
上下に25px分の余白ができます。

どうぞ、お好みで設定してみてくださいね。

次回は、デフォルトテンプレートを元にして要素を足していく方法を書くかもしれません。
乞うご期待！