商品リンクカードメーカー｜Amazon・楽天・Yahoo!ショッピング対応HTML生成ツール

商品リンクカードメーカーについて

商品リンクカードメーカーは、Amazon・楽天市場・Yahoo!ショッピングなどの商品リンクを、ブログ記事内で見やすいカード形式にするためのHTML・CSS生成ツールです。

商品名、補足文、商品画像、各ショップのリンクを入力すると、記事に貼り付けて使える「専用CSS」と「カードHTML」を生成できます。商品リンク用のプラグインを増やさずに、必要なページだけへ商品リンクカードを設置したい場合に使えます。

このツールは、商品情報や価格、在庫を自動取得するものではありません。商品名、補足文、画像URL、アフィリエイトURLは、利用者自身で取得・確認して入力します。

表示例

生成したHTMLとCSSを記事内に貼り付けると、商品画像、PR表記、商品名、補足文、各ショップへのボタンを含む商品リンクカードを表示できます。

カードの内容は、入力した商品名や補足文、設定したリンクによって変わります。プレビューで見た目を確認しながら、記事に合わせたカードを作成できます。

使い方の流れ

1. CSSクラス名、商品名、補足文を入力します。
2. 商品画像の形式を選びます。Amazon・Yahoo!ショッピングの画像を使う場合は画像URLを入力し、楽天の画像を使う場合は楽天「画像のみ」広告コードを貼り付けます。
3. Amazon、楽天市場、Yahoo!ショッピングのアフィリエイトURLを入力します。
4. PR表記、リンクの開き方、ボタンの角、文字サイズを調整します。
5. プレビューで表示を確認します。
6. 生成された「専用CSS」と「カードHTML」をコピーし、表示したいページに貼り付けます。

入力できる内容

項目	内容
商品名	カード内に表示する商品名を入力します。
補足文	商品の特徴、記事内で伝えたい補足、注意点などを入力します。
商品画像	Amazon・Yahoo!ショッピングなどの画像URL、または楽天「画像のみ」広告コードを使用できます。
各ショップのURL	Amazon、楽天市場、Yahoo!ショッピングのリンクボタン用URLを入力できます。
表示設定	PR表記、新しいタブで開く設定、ボタン形状、文字サイズを調整できます。

画像とアフィリエイトURLの指定方法

商品リンクカードメーカーでは、商品画像の指定方法と、各ショップへ移動するためのURLを分けて入力します。

Amazon / Yahoo! の画像URL：https:// から始まる商品画像URLを入力します。画像クリック先は、「リンクしない」「AmazonアフィリエイトURLへリンク」「Yahoo!ショッピングアフィリエイトURLへリンク」から選べます。

楽天「画像のみ」広告コード：楽天アフィリエイトの商品リンク作成画面で「画像のみ」を選択し、発行された広告コードをそのまま貼り付けます。URL単体ではなく、コピーした広告コード全体を使います。

楽天市場アフィリエイトURL：楽天市場ボタン用のリンクは、楽天アフィリエイトの商品リンク作成画面で「リンクのみ」を選択して取得したURLを使います。取得したURLを、楽天市場アフィリエイトURL欄に入力してください。

CSSとHTMLの貼り付け方

生成されるコードは、「専用CSS」と「カードHTML」に分かれています。

専用CSS：商品リンクカードの見た目を整えるためのCSSです。同じページ内で1回だけ貼り付けます。複数の商品リンクカードを同じデザインで並べる場合でも、CSSは基本的に1回で足ります。

カードHTML：商品リンクカード本体のHTMLです。商品リンクカードを表示したい場所に貼り付けます。商品ごとに内容を変える場合は、入力内容を変更してカードHTMLを作り直してください。

WordPressでは、カスタムHTMLブロックなど、HTMLを貼り付けられる場所で使用できます。テーマや貼り付ける場所の横幅によって、プレビューと実際の表示が完全に一致しない場合があります。

PR表記とリンク属性について

商品リンクカードには、PR表記を表示できます。アフィリエイトリンクや広告リンクを掲載する場合は、記事内で広告であることが分かるようにしておく必要があります。

このツールで生成するリンクには、広告リンクであることを示す rel="sponsored nofollow" を付ける設計にしています。新しいタブで開く設定を使う場合は、あわせて noopener も付与されます。

ただし、実際の表示方法や表記ルールは、利用しているASP、各ショップ、サイト運営方針に合わせて確認してください。

入力内容の扱いについて

商品リンクカードメーカーに入力した商品名、補足文、URL、広告コードなどは、ブラウザ内で処理されます。入力内容をミコトホドのサーバーへ送信・保存する処理は入れていません。

ただし、画像URLを入力してプレビュー表示する場合、ブラウザが画像URLの提供元へ画像を読み込みます。これは画像を画面に表示するための通信です。

使用上の注意点

商品リンクカードメーカーは、商品情報、価格、在庫、レビュー、ランキングを自動取得するツールではありません。商品名、補足文、画像、各ショップのリンクは、利用者自身で入力・確認する必要があります。

商品ページの削除、販売終了、URL変更、画像URL変更などがあった場合は、リンク先や表示内容を確認してください。

価格や在庫は変動するため、記事内に固定表示する場合は注意が必要です。必要に応じて、「価格や在庫はリンク先の商品ページで確認してください」といった案内文を添えてください。

アフィリエイトURLの取得方法、利用できる画像の扱い、リンクコードの改変可否などは、利用している各サービスやASPのルールを確認してください。

生成されたHTMLやCSSを貼り付ける前に、リンク先、PR表記、画像表示、スマホ表示を確認してください。

このツールが向いている人

• 商品リンクカードを少数だけ記事内に設置したい人
• 商品リンク用のプラグインを増やしたくない人
• 自分で取得したアフィリエイトURLを直接使いたい人
• Amazon・楽天市場・Yahoo!ショッピングのリンクをまとめて表示したい人
• HTMLとCSSをコピーして、自分のページ内に貼り付けて使いたい人

このツールが向いていない人

• 商品価格や在庫を自動取得したい人
• 商品情報を自動更新したい人
• 大量の商品リンクを一括管理したい人
• クリック数や成果をツール側で計測したい人
• ASPやプラグインの管理機能と連携したい人

よくある質問

価格や在庫は自動で表示できますか？

できません。このツールは、商品リンクカード用のHTMLとCSSを生成するツールです。価格、在庫、レビュー、ランキングなどの商品情報は自動取得しません。

楽天の画像URLだけを貼れば使えますか？

楽天の画像を使う場合は、楽天アフィリエイトの商品リンク作成画面で「画像のみ」を選択し、発行された広告コード全体を貼り付けてください。URL単体ではなく、広告コードとして発行された内容を使います。

生成されたコードはどこに貼りますか？

WordPressでは、カスタムHTMLブロックなど、HTMLを貼り付けられる場所に貼り付けます。専用CSSは同じページ内で1回だけ、カードHTMLは商品リンクカードを表示したい場所に貼り付けます。

広告コードやアフィリエイトURLは自動で修正されますか？

自動で修正しません。入力した広告コードやアフィリエイトURLをもとにHTMLを生成します。各サービスで発行されたURLや広告コードの扱いは、利用しているサービスのルールに従ってください。

ログイン不要、登録不要、無料で使えます。