スマート商品リンクカードを実装しよう【配布/Lazy Blocks Pro】

この商品リンクカードは、Lazy Blocksのコントロールを組んで作っています。

使っているコントロールを確認したところ、Posts・Taxonomy・Usersのような分かりやすいPro限定タイプは使っていません。Repeaterも無料版の機能です。

ただし、カードのデザインと開閉の動きはブロック定義のCSS/JS欄（Styles & Scripts）に置いています。
この欄の中身をページへ出力するのはPro版の役割で、無料版には出力処理そのものがありません。

そのため、このJSONを無料版に読み込んでも見た目は再現されません。そのまま使うにはPro版が必要です。
以前「無料版の範囲で組めます」と書いていた点を訂正します。

Lazy Blocks自体がはじめての方はLazy Blocks使い方完全ガイドから始めてみてください。

• 「アフィリエイトリンクがなかなかクリックされない…」
• 「テーマ標準のボタンではデザインが物足りない…」
• 「複数の購入先を一つのカードで綺麗にまとめたい…」

そんな悩みを持つブログ運営者のために、今回は Lazy Blocks PRO をフル活用した、商品リンクカードの実装方法を詳しく紹介します。

【完成デモと機能紹介】魅力的な視覚効果で成約率を底上げする

今回作成したカスタムブロックは、美しい商品画像、視覚的な星評価、
そして複数の購入プラットフォームへのリンクをスタイリッシュにまとめたアフィリエイト特化のカードです。

目を惹くバッジ機能やアニメーション効果を備え、読者の購買意欲を自然に刺激します。 あなたのブログにも簡単に導入することが可能です。

1. 購買意欲を高める「星評価とレビュー件数」表示

0から5まで0.5刻みで柔軟に設定できる星評価機能を搭載しています。

視覚的にわかりやすいレーティングの星とレビュー件数を表示することで、商品の信頼性を高め、読者のクリックを強力に後押しします。

2. 多彩なプラットフォームに対応したリンクボタン

Amazon、楽天市場、Yahoo!ショッピングだけでなく、YouTube、メルカリ、公式サイトなど、多彩なリンク先をボタンとして配置できます。

選択した種類に応じて、プラットフォームごとの専用カラーとアイコンが自動で適用されるため、直感的で美しいデザインが保たれます。

3. 視線を釘付けにする「バッジ」とアニメーション効果

特定のボタン上部に「＼セール中！／」などのバッジ（吹き出しテキスト）を設置可能。

さらに、スクロール時のフェードインや、星評価のポップアップ、クリック時の波紋エフェクトなど、洗練されたアニメーションが実装されており、思わずタップしたくなる仕掛けが満載です。

4. あらゆるデバイスで美しく見えるレスポンシブデザイン

商品のサブタイトルや最大3行までの商品説明をスッキリと見せつつ、スマートフォンでは画像とボタンが最適に並び替わるよう設計されています。

ホバー時のシャドウ変化や美しいグラデーションラインなど、どんなテーマにも馴染む高品質なUIを提供します。

中身はどうなっているのか

説明文を「続きを表示」で展開し、セールバッジを表示させると、完成形はこんな見た目になります。

ボタンをクリックしたときに広がる波紋（リップル）エフェクトは、クリック座標を使って自前で計算しています。

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ずつ遅れて表示されるよう、配列のインデックス番号を遅延時間に変換しています。

配布用JSONファイルダウンロード

以下のリンクから、今回作成した「商品リンクカード」の設計図（JSONファイル）をダウンロードしてください。

※当サイトでは、ステップブロック以外にもクリック率を上げるレビューボックスや比較表などのカスタムブロックを無料配布しています。ぜひ併せてご活用ください

なお、当サイトのリンク経由でPro版を購入された方には、Pro版で動くブロックをまとめた限定ページをお渡ししています。

【最短3分】このデザインをあなたのサイトに導入する準備
「Lazy Blocks Proの導入」

ここからは、先ほど紹介したデザインブロックを実際に使えるようにするための簡単な準備を解説します。

一度インストールしてしまえば、当サイトで無料配布している他の高品質デザインもすべて使い放題になります。サクッと終わらせてしまいましょう。

当サイトのこのシリーズで配布しているブロックは、いずれもLazy Blocks Proが必要です。

コントロールの種類自体は無料版の範囲のものが中心なのですが、見た目と動きを作っているCSS・JSをブロック定義の「Styles & Scripts」欄に置いており、この欄をページへ出力できるのがPro版だけだからです。

無料版プラグインのソースを確認したところ、この欄の値を保存する処理はあっても、出力する処理そのものが入っていませんでした。
無料版で読み込むと、HTMLは出るのに装飾も動作も効かない状態になります。

CSSとJSはどちらも素のコードなので、テーマの「追加CSS」やフッターへ手で移し替えれば無料版でも再現はできます。
ただ「JSONを読み込むだけ」で済ませたいなら、Pro版が前提になります。

Pro版を買うほどではない、という場合はLazyblocks 無料版で使えるブロックテンプレート集をどうぞ。
あちらはCSS・JSをブロック本体に直接埋め込んであるので、無料版のままで動きます。

Pro版があると、条件分岐(Controls Conditions)でこの記事のような複雑なブロックの編集画面を整理できたり、CSSとJSをブロックごとに分離できたりします。
1つのブロックのためだけでなく、今後も自作ブロックを増やしていく予定なら検討する価値があります。

プラン名	ライセンス数	価格 (年額)	主な機能
Personal	1 サイト	$49 （税込み$53.90）	すべてのPro機能 1年間の更新
Freelancer	20 サイト	$169 （税込み$185.90）
Agency	無制限	$299 （税込み$328.90）

Pro版を導入することで、編集画面の項目が整理され、より直感的な操作が可能になります。さらに、Pro版限定の高度な機能により、カスタマイズの幅が飛躍的に広がります。

デザインを導入する手順

導入は非常に簡単です。

「プラグインのじかん」からの提案

「一度 Lazy Blocks PRO を導入すれば、デザインの悩みはすべて消える」

私も長年、テーマ特有の装飾デザインを利用してきましたが、「もっとこうだったらいいのに」という物足りなさや、他サイトとの差別化についてずっと頭を悩ませてきました。

しかし、理想の装飾を追加しようとすると、複数のプラグインを入れなければならなかったり、そもそも条件に合うプラグイン自体が見つからなかったりすることも少なくありません。

当サイト「プラグインのじかん」では、この記事のブロック以外にもカスタムブロックを作り続けています。

記事を1本ずつ回って集めなくても、Pro版で動くブロック36種を1か所にまとめてあります。
このページのリンク経由でPro版を購入された方に、そこを開くパスワードをお渡しする形です。

しかも渡して終わりではありません。新しく作ったブロックは同じ場所に追加していくので、一度受け取れば、あとから増えたぶんも追加料金なしで取りに来られます。

特典の中身と受け取り方を見る

※今後も随時追加していきます。

また、「こんな装飾ができるブロックが欲しい」といったリクエストも随時募集しています。皆さまの理想を形にするお手伝いをさせていただきますので、ぜひお気軽にご意見をお寄せください！

• お問い合わせはこちら

さらに詳しく知りたい方へ

Lazy Blocks PRO を使いこなして、サイトのユーザー体験を上げたい方はこちらの徹底解説記事も併せてご覧ください。