カスタムリンクの作成例

ここではカスタムリンクの作成例を紹介しつつカスタムリンク作成機能の解説をします。

ひとつのタイトルを取得

カスタムコード例 .
<% title_1 %>
リスト番号1番、つまりリストの一番左端の商品のタイトルを表示するだけのコードです。
リスト内に記録された商品の数に関わらず1つだけ出力されます。


出力結果.
ポケットモンスター ホワイト

複数のタイトルを取得

カスタムコード例 .
<% loop_1_3 %>
<% title %>
<br />
<% /loop %>
ループ処理を使って商品名を羅列します。
loopタグ内ではリスト番号の指定が不要になるため、titleタグにリスト番号を指定しないように注意します。

ここではloopタグに「1_3」を指定、つまりリスト番号1番から3番までのアイテムを取り出すことにします。


出力結果.
ポケットモンスター ホワイト
ポケットモンスター ダイヤモンド(特典なし)
ポケットモンスター ソウルシルバー(特典無し)
3番までの繰り返し処理なので、リストに記録された商品が3つ以上でも3つまでしか出力されません。

リンク付きのタイトル

カスタムコード例 .
<% loop_1_3 %>
<a href="<% link %>" target="_blank">
<% title %>
</a>
<br />
<% /loop %>
linkタグを使用して商品タイトルにAmazonの商品ページへのリンクを追加します。


出力結果.
ポケットモンスター ホワイト
ポケットモンスター ダイヤモンド(特典なし)
ポケットモンスター ソウルシルバー(特典無し)
これで商品を紹介するアフィリエイトリンクになりました。

メーカー名と発売日を表示

カスタムコード例 .
<% loop_1_3 %>
<a href="<% link %>" target="_blank">
<% title %>
</a>
[ <% brand %> <% release %> ]
<br />
<% /loop %>
商品タイトルのうしろにbrandタグとreleaseタグを追加してメーカー名と発売日を表示してみます。


出力結果.
ポケットモンスター ホワイト [ 任天堂 2010-09-18 ]
ポケットモンスター ダイヤモンド(特典なし) [ 任天堂 2006-09-28 ]
ポケットモンスター ソウルシルバー(特典無し) [ 任天堂 2009-09-12 ]
メーカー名と発売日が表示されました。

ひとつの商品画像を取得

カスタムコード例 .
<img src="<% img_1 %>" alt="<% title_1 %>" width="<% iwidth_1 %>" height="<% iheight_1 %>" style="border: none;" />
リスト番号1番、つまりリストの一番左端の商品の画像を表示するだけのコードです。
リスト内に記録された商品の数に関わらず1つだけ出力されます。
画像のアドレスを取得するimgタグ、画像のサイズを取得するiwidthタグ・iheightタグが使用されています


出力結果.
ポケットモンスター ホワイト
これは画像の表示のみでAmazonへのリンクがない状態です。

複数の商品画像をリンク付きで

カスタムコード例 .
<% loop_1_3 %>
<a href="<% link %>" target="_blank">
<img src="<% img %>" alt="<% title %>" width="<% iwidth %>" height="<% iheight %>" style="border: none;" />
</a>
<% /loop %>
linkタグを使用して商品画像にAmazonの商品ページへのリンクを追加します。
ここではloopタグに「1_3」を指定、つまりリスト番号1番から3番までのアイテムを取り出すことにします。


出力結果.
ポケットモンスター ホワイト ポケットモンスター ダイヤモンド(特典なし) ポケットモンスター ソウルシルバー(特典無し)
これで商品画像に商品ページへのリンクがつきました。

指定の画像サイズを変更

カスタムコード例 .
<% imgsize_1_L_160 %>
<% loop_1_3 %>
<a href="<% link %>" target="_blank">
<img src="<% img %>" alt="<% title %>" width="<% iwidth %>" height="<% iheight %>" style="border: none;" />
</a>
<% /loop %>
imgsizeタグを追加して指定の画像サイズを変更します。
imgsizeタグで指定されている「1_L_160」は、左からリスト番号(ここでは1を指定)、画像サイズの基準（Lは全体を基準）、画像のサイズ(ここでは160ピクセルを指定)となっています。

このimgsizeタグにより、リスト番号1番の画像サイズは全体基準で160ピクセルに固定されます。


出力結果.
ポケットモンスター ホワイト ポケットモンスター ダイヤモンド(特典なし) ポケットモンスター ソウルシルバー(特典無し)
先頭の画像だけサイズが大きくなりました。
このように複数の画像サイズを使いたい場合にはimgsizeタグを使用します。

画像下に商品の詳細情報を追加

カスタムコード例 .
<% imgsize_1_L_160 %>
<% loop_1_3 %>
<a href="<% link %>" target="_blank">
<img src="<% img %>" alt="<% title %>" width="<% iwidth %>" height="<% iheight %>" style="border: none;" />
</a>
<% /loop %>
<br />
<a href="<% link_1 %>" target="_blank">
<% title_1 %>
</a>
[ <% brand_1 %> <% release_1 %> ]
画像の下に商品の詳細情報を表示してみましょう。
ここではリスト番号1番の商品のタイトル、メーカー、発売日を表示しています。


出力結果.
ポケットモンスター ホワイト ポケットモンスター ダイヤモンド(特典なし) ポケットモンスター ソウルシルバー(特典無し)
ポケットモンスター ホワイト [ 任天堂 2010-09-18 ]