半角英数字、ハイフン、アンダースコアのみ使用できます。先頭の「.」は不要です。
画像タイプ
Amazon・Yahoo!ショッピングなど、https:// から始まる画像URLを入力します。
Amazon・Yahoo!の画像URLを使う場合、画像を各アフィリエイトURLへリンクできます。
楽天の画像を使う場合は、楽天アフィリエイトの商品リンク作成画面で「画像のみ」を選択し、発行された広告コードをそのまま貼り付けます。URL単体ではなく、コピーした広告コード全体を貼り付けてください。
ボタンの角
Preview
入力内容はブラウザ内で処理され、ミコトホドのサーバーへ送信・保存されません。画像URLを入力した場合、プレビュー表示のためにブラウザが画像URLの提供元へ画像を読み込みます。
商品リンクカードメーカーとは
商品リンクカードメーカーは、Amazon・楽天市場・Yahoo!ショッピングなどの商品リンクを、ブログ用の商品リンクカードとして表示するためのHTML・CSS生成ツールです。
商品名、補足文、商品画像、各ショップのアフィリエイトURLを入力すると、記事内に貼り付けて使える「専用CSS」と「カードHTML」を生成できます。
プラグインを追加せずに、必要な場所へ商品リンクカードを少しだけ設置したい場合や、自分で取得したアフィリエイトURLを直接使いたい場合に向いています。
表示例
生成したHTMLとCSSを記事内に貼り付けると、以下のような商品リンクカードを表示できます。
カード内には、商品画像、PR表記、商品名、補足文、Amazon・楽天市場・Yahoo!ショッピングへのボタンを配置できます。
使い方の流れ
- CSSクラス名、商品名、補足文を入力します。
- 商品画像の形式を選びます。Amazon・Yahoo!ショッピングの画像を使う場合は商品画像URLを入力し、楽天の画像を使う場合は楽天「画像のみ」広告コードを貼り付けます。
- Amazon、楽天市場、Yahoo!ショッピングのアフィリエイトURLを入力します。
- PR表記、リンクの開き方、ボタンの角、文字サイズを調整します。
- プレビューで見た目を確認します。
- 生成された「専用CSS」と「カードHTML」をコピーし、表示したいページに貼り付けます。
画像とアフィリエイトURLの指定方法
商品リンクカードメーカーでは、商品画像の指定方法と、各ショップへ移動するためのアフィリエイトURLを分けて入力します。
Amazon / Yahoo! の画像URL：https:// から始まる商品画像URLを入力します。画像クリック先は、「リンクしない」「AmazonアフィリエイトURLへリンク」「Yahoo!ショッピングアフィリエイトURLへリンク」から選べます。
楽天「画像のみ」広告コード：楽天アフィリエイトの商品リンク作成画面で「画像のみ」を選択し、発行された広告コードをそのまま貼り付けます。URL単体ではなく、コピーした広告コード全体を使います。
楽天市場アフィリエイトURL：楽天市場ボタン用のリンクは、楽天アフィリエイトの商品リンク作成画面で「リンクのみ」を選択して取得したURLを使います。取得したURLを、楽天市場アフィリエイトURL欄に入力してください。
CSSとHTMLの貼り付け方
生成されたコードは、「専用CSS」と「カードHTML」に分かれています。
専用CSS：同じページ内で1回だけ貼り付けます。複数の商品リンクカードを同じデザインで並べる場合でも、CSSは基本的に1回で足ります。
カードHTML：商品リンクカードを表示したい場所に貼り付けます。商品ごとに内容を変えたい場合は、入力内容を変更してカードHTMLを作り直してください。
WordPressの場合は、カスタムHTMLブロックなど、HTMLを貼り付けられる場所で使用できます。テーマや貼り付ける場所の横幅によって、プレビューと実際の表示が完全に一致しない場合があります。
入力内容の扱いについて
商品リンクカードメーカーに入力した商品名、補足文、URL、広告コードなどは、ブラウザ内で処理されます。入力内容をミコトホドのサーバーへ送信・保存する処理は入れていません。
ただし、画像URLを入力してプレビュー表示する場合、ブラウザが画像URLの提供元へ画像を読み込みます。これは画像を画面に表示するための通信です。
使用上の注意点
商品リンクカードメーカーは、商品情報や価格、在庫を自動取得するツールではありません。商品名、補足文、各ショップのアフィリエイトURLは、利用者自身で入力・確認する必要があります。
商品ページの削除、販売終了、URL変更、画像URL変更などがあった場合は、リンク先や表示内容を利用者自身で確認してください。
価格や在庫は変動するため、記事内に固定表示する場合は注意が必要です。必要に応じて、「価格や在庫はリンク先の商品ページで確認してください」といった案内文を添えてください。
アフィリエイトURLの取得方法、利用できる画像の扱い、リンクコードの改変可否などは、利用している各サービスやASPのルールを確認してください。
このツールが向いている人
- 商品リンクカードを少数だけ記事内に設置したい人
- 商品リンク用のプラグインを増やしたくない人
- 自分で取得したアフィリエイトURLを直接使いたい人
- Amazon・楽天市場・Yahoo!ショッピングのリンクをまとめて表示したい人
- HTMLとCSSをコピーして、自分のページ内に貼り付けて使いたい人
このツールが向いていない人
- 商品価格や在庫を自動取得したい人
- 商品情報を自動更新したい人
- 大量の商品リンクを一括管理したい人
- クリック数や成果をツール側で計測したい人
- ASPやプラグインの管理機能と連携したい人
ログイン不要、登録不要、無料で使えます。
コメント