商品リンクカードを作るなら、最初に同じ型番・仕様の購入先をそろえます。見た目の前に画像・価格・広告リンクの管理方法を決め、必要な情報を一つにまとめる手順を解説します。
この配布JSONのデザインと開閉は、Lazy BlocksのStyles & Scripts（Pro）にあるCSS・JavaScriptを使います。入力欄にRepeaterなどの無料版機能を使っていても、そのままの表示には対応する出力環境が必要です。以前の「無料版の範囲で組める」という案内を訂正します。
Lazy Blocks自体がはじめての方はLazy Blocks使い方完全ガイドから始めてみてください。
- 「アフィリエイトリンクがなかなかクリックされない…」
- 「テーマ標準のボタンではデザインが物足りない…」
- 「複数の購入先を一つのカードで綺麗にまとめたい…」
この記事では完成デモを見ながら、入力できる情報とリンクを差し替える手順、公開前の確認点を説明します。
完成デモ：商品情報と比較先を一つにまとめる
商品画像・説明・評価・リンク先を一つのカードにまとめる構成です。価格や配送条件を確認したい読者が、比較先を選べるようにします。
バッジや動きは補助として使います。割引や在庫の表示は、実際に確認した条件と一致するときだけ掲載してください。
【新感覚】一瞬で自分だけの書斎が出現！？超集中空間生成グラッシーズ
￥19,800
1. 根拠を添えて使う星評価とレビュー件数
0から5まで0.5刻みで柔軟に設定できる星評価機能を搭載しています。
星評価には、誰が・何を基準に評価したかを添えます。レビュー件数を載せるなら出典と確認日も確認し、サンプルの数値をそのまま公開しないでください。
2. 多彩なプラットフォームに対応したリンクボタン
Amazon、楽天市場、Yahoo!ショッピングだけでなく、YouTube、メルカリ、公式サイトなど、多彩なリンク先をボタンとして配置できます。
選択した種類に応じて、プラットフォームごとの専用カラーとアイコンが自動で適用されるため、直感的で美しいデザインが保たれます。
3. バッジとアニメーションは必要な情報に限定する
特定のボタン上部に「＼セール中！／」などのバッジ（吹き出しテキスト）を設置可能。
アニメーションはデザインの選択肢です。押してもらう理由は「価格と配送条件を見る」など、遷移先で得られる情報を文言で伝えます。
4. スマホで画像・価格・リンクを確認する
商品のサブタイトルや最大3行までの商品説明をスッキリと見せつつ、スマートフォンでは画像とボタンが最適に並び替わるよう設計されています。
テーマによって余白や文字サイズが変わるため、導入後はカード単体だけでなく前後の本文と一緒に表示を確認してください。
中身はどうなっているのか
説明文を「続きを表示」で展開し、セールバッジを表示させると、完成形はこんな見た目になります。
ボタンをクリックしたときに広がる波紋（リップル）エフェクトは、クリック座標を使って自前で計算しています。
var rect = btn.getBoundingClientRect();
var size = Math.max(rect.width, rect.height) * 1.8;
var x = e.clientX - rect.left - size / 2;
var y = e.clientY - rect.top - size / 2;
// クリックした座標を中心に、ボタンの長辺の1.8倍の円を配置ボタンのどこをクリックしても波紋の中心がずれないのは、この計算のおかげです。
アニメーション終了後はanimationendイベントで要素ごと削除しているので、連打してもDOMにゴミが溜まりません。
カード自体のフェードインも、複数枚並んだときに1枚ずつ90msずつ遅れて表示されるよう、配列のインデックス番号を遅延時間に変換しています。
URL欄の初期値はhttps://だけです。実際の商品ページや許可された広告リンクへ差し替え、すべてのボタンを確認してください。ボタンの色とアイコンは、リンク先を自動判定して切り替えるものではありません。
自作カードと商品検索ツールの違い
| 目的 | 選び方 |
|---|---|
| 商品情報を自分で入力して置く | この配布カード。名称・画像・価格・各URLの更新は運用者が管理する。 |
| 商品検索や価格更新も使いたい | 商品リンクツールやテーマ機能。対応するモール・API・更新条件を確認する。 |
| 数点だけ紹介したい | ASPが提供するリンク作成機能や標準ボタンで必要な表示を満たせるか試す。 |
カードの形を作る機能と、Amazon・楽天などのAPIから商品情報を取得する機能は別です。この配布カードに入力した価格が、ショップの値下げや在庫に合わせて自動更新されるとは考えないでください。自動取得が必要なら、テーマや商品検索ツールの対応を確認します。
掲載前は、型番・色・容量・セット内容が各ショップで一致するか照合します。同じ商品名でも仕様が違えば単純な価格比較になりません。価格を記載する場合は、税込・送料・確認日を添え、価格を維持できない場合は「現在の価格を確認」の案内にします。
広告リンクは、提携済みASPで発行されたコードを条件に沿って使用します。A8・もしものリンクを使う場合も、識別子や計測部分を独自に書き換えず、広告であることを明示してください。商品画像やレビュー件数は、使用できる素材と最新の出典を確認します。
表示されない場合は、入力値・公開状態・キャッシュ・他の装飾CSSを順に確認します。プラグインを止める前には、記事に残るカードやショートコードの扱いと、商品リンクの代替表示も確認しておきます。
配布用JSONファイルダウンロード
下のJSONを保存して読み込み、商品を一つ登録して試してください。画像・説明・リンク先・PR表記を確認できたら、他の商品へ展開します。
入力欄やJSONの扱いが分からない場合は、ブロックの設定・インポート手順を参照してください。既存の環境に合うか、検証用ページで確かめてから使用します。
配布データの動作条件と読み込み手順
この記事のJSONは、記載した環境向けのブロック定義です。プラグイン本体のZIPとは別のファイルです。動作条件を確認し、バックアップを取ったうえで検証用ページへ読み込んでください。
CSS・JavaScriptをStyles & Scriptsで管理している配布物は、その出力機能が必要です。入力コントロールが無料版に含まれていても、同じ見た目や動作が再現できるとは限りません。条件が合わない場合は、標準ブロックや無料版向けの配布データを確認できます。
- 配布ページからJSONを保存し、ブロック管理画面のExport / Importで読み込む。
- 一覧に追加された定義を確認し、テスト記事へ一つ配置する。
- 見出し・本文・画像・URLを自分の内容へ置き換える。
- PC・スマホで長文、空欄、クリック、開閉などの動作を確認する。
- 問題がある場合は重ねてインポートせず、読み込み状態とCSS・JavaScriptの出力を確認する。
設定方法はブロック設定の技術ガイドにまとめています。配布物についての連絡はお問い合わせページをご利用ください。
