【Auto Amazon Links】 レイアウトのカスタマイズ方法とショートコード紹介
2025年10月1日
Categories | ブログ（WordPress) Amazon
Auto Amazon Link（WordPressプラグイン）
商品リンク レイアウトのカスタマイズ方法です。
Auto Amazon Linkで生成された商品リンクは、デフォルトだと使用テーマによっては
レイアウトにバラツキがあります。自作テーマにでもなるとかなり崩れてしまいます。
そこで、CSS（style.css）を利用したレイアウトのカスタマイズと
ショートコードの使い方を紹介します。
Auto Amazon Linksの導入（インストール）については、先に記事ったのをご覧ください。↓
先ずはショートコードを3つ紹介しておきます。
例に使うAmazon商品リンクはレイアウトをカスタマイズしたものを使用しています。
（レスポンシブ対応）
ショートコードはAuto Amazon Links「ユニットの管理」で作成できるのですが、
使い勝手が悪かったので既存のものを使いました。
※ 商品リンクは稼働中につきクリックするとAmazonに飛びます。
KURE(呉工業) Stoner スピードビード 651ml プレミアムクイックワックスコート 1732
01. 特定の商品リンクを表示させるショートコード
ASINはAmazon商品ページの下の方に登録情報欄があるので、そこで確認できます。
しかしURLにもあるので、取り出して使う方が早いです。
URL の （dp/ の後にある英数字）がASINです。
例：Amazon 商品 URL が
https://www.amazon.co.jp/dp/B09G753LZC/ の場合、ASIN は B08ABCDEFG です。
デメリットは、ASIN番号が変わったり無効になったりするとエラー表示になります。
例01：
amazon_auto_links asin="B01KLJVNVE"※ コピペしたら [ ] を加えて下さい。
02. 特定の商品リンクを連続で複数表示させるショートコード
ASINをカンマ（,）で区切ります。
例02：
amazon_auto_links asin="B01KLJVNVE, B0CVRXD2ZZ"※ コピペしたら [ ] を加えて下さい。
実際の商品リンクはこう表示されます。
KURE(呉工業) Stoner スピードビード 651ml プレミアムクイックワックスコート 1732
アイリスプラザ 座椅子 フロアチェア リクライニング 幅約51×奥行約110~166×高さ約16~69 NFC-02 ネイビー
￥7,545
03. 検索（search）で商品リンクを表示させるショートコード
検索ワードで商品名や商品型番をカンマ（,）で区切りると、目的の商品に絞れます。
リンク切れになる可能性が低いのでおススメです。
（count=個数）のオプションで商品リンク数を制限できます。（デフォルトは10個）。
例03： 検索ワード「KARCHER K2」「本体」「高圧洗浄機」/ 表示数3個
amazon_auto_links search="KARCHER K2, 本体, 高圧洗浄機" count=3
※ コピペしたら [ ] を加えて下さい。
【Amazon.co.jp限定】ケルヒャー(Karcher) 高圧洗浄機 K2サイレントBC 静音機能 軽量 小型 コンパクト収納 簡単接続 洗車 泥...
￥20,980
【Amazon.co.jp限定】ケルヒャー(Karcher) コードレス高圧洗浄機 OC Handy Compact Plus CB ハンディエア U...
￥15,980
【Amazon.co.jp限定】ケルヒャー(Karcher) コードレス高圧洗浄機 OC 5 Handy Plus CB USB-C充電式(10W以上...
￥15,980
ショートコードのパラメータ調整
手軽に見た目を変更したい場合に便利。ショートコードに特定のパラメータを追加するだけで、表示内容を微調整することが出来ます。
画像のサイズ指定: [amazon asin=”B0CVRXD2ZZ” image_size=”200″]のようにimage_sizeパラメータを使って画像サイズを変更。
Amazon商品リンク レイアウトカスタマイズ方法
カスタマイズは自作テーマに基づいて作成しました。
よって完璧に反映されるものではありません。style.css等で調整してください。
注意しなければいけないことは、汎用テーマは不定期にアップデートされます。
汎用テーマとは ダッシュボード ＞ 外観 ＞ テーマを追加
アップデートされるとstyle.csに追記したコードは消えてします。
そんな悲しいことにならないために、自分でカスタマイズ内容をどこかに残しておく、
メモしておくことをお勧めします。
ダッシュボード ⇒ Amazon Auto Links ⇒ 設定 ⇒ 【デフォルト】タブ
■画像サイズ 180
■タイトルの長さ 75
■説明の長さ 100
■アイテムフォーマット・タイトルフォーマット・イメージフォーマットを修正
■アイテムフォーマット ※コードは注意してご使用ください。
<div class="amazon-auto-list-container">
<div class="amazondemiru">
<a href="%href%" title="%title_text%" rel="nofollow noopener" target="_blank">Amazon.co.jpで見る</a>
</div>
<div class="amazon-auto-links-product">
<div class="amazon-auto-links-product-image">
%image%
</div>
<div class="amazon-auto-links-product-body">
%title%
%rating% %prime% %price%
<a href="%href%" title="%title_text%" rel="nofollow noopener" target="_blank"> %description%</a>
%disclaimer%
</div>
</div>
</div>
■タイトルフォーマット
<p class="amazon-product-title">
<a href="%href%" title="%title_text%" rel="nofollow noopener" target="_blank">%title_text%</a>
</p>
■イメージフォーマット
<div class="amazon-product-thumbnail" style="max-width:%image_size%px; max-height:%image_size%px; width:%image_size%px;"> <a href="%href%" title="%title_text%" rel="nofollow noopener" target="_blank"> <img src="%src%" alt="%description_text%" style="max-height:%image_size%px;" /> </a> </div>
最後に 保存 することを忘れずに！
■ Amazon Auto Links の設定（デフォルトタブ）が終わったら、
style.cssに下記追記
ダッシュボード ⇒ 外観 ⇒ テーマファイルエディター ⇒ style.css
/* amazon-auto-list カスタマイズ*/
.amazon-auto-list-container {
width: 85%;
margin: 0 auto;
}
.amazon-products-container-list .amazon-auto-links-product {
border: 2px solid #d4d4c4;
padding: 0.5em;
}
.amazon-products-container-list .amazondemiru {
border: 2px solid #d4d4c4;
border-bottom: 0px;
padding: 0.2em;
font-size: small;
background: #EEE8AA;
}
.amazon-products-container-list .amazon-product-title {
font-size: 14px;
font-weight: bold;
}
.amazon-product-thumbnail-container {
margin: -20px -10px;
}
.amazon-auto-links-product-body {
line-height: 20px;
margin: 0 ;
}
.amazon-auto-links-product-body .amazon-product-description {
font-size: 10px;
line-height: 10px;
}以上です。
