楽天アフィリエイトはHTMLタグ加工NG…でもブログカード形式で表示したい！その解決方法

楽天アフィリエイト、ただのテキストリンクじゃ目立たない！もったいない！

って思ったこと無い？

ブログカード表示して、視認性とクリック率を上げたい

商品はいいんだよ
画像あるし、もしもアフィリエイト使えばいいし。

だが特集ページは、画像がないから、シンプルなテキストリンクだけツライ

でも楽天の規約では、提供されたHTMLタグの加工は禁止。

それならJavaScriptで補完表示しちゃえばいいじゃない？

という話。

楽天アフィリエイト、ただのテキストリンクじゃ目立たない！もったいない！
ブログカード形式で表示したい
1. WordPress内リンクの自動変換機能もあるけれど
楽天アフィリエイトの規約とは？
1. HTMLタグ加工に関する禁止事項（2025年6月時点）
2. WordPress内リンクの自動変換機能の問題とは？
HTML加工なしで実現する方法がある！
1. JS加工が許容される理由
解決策：JSで非破壊表示を追加する方法
1. 実装のポイント
2. 実装サンプル（抜粋）
使いやすいように、作ってみた！
1. これが完全セーフである理由
2. プラグイン化して販売思案中

ブログカード形式で表示したい

商品の魅力を一目で伝えられる
スマホでも押しやすい・目立ちやすい
ブログ内の他のリンクとの統一感が出せる

つまるところ

リンクを目立たせて、クリック率上げたい！

WordPress内リンクの自動変換機能もあるけれど

WordPressの機能か、テーマの機能かは覚えていないのだけれど

'https://から始まるURL

<a href="https://から始まるURL">https://から始まるURL</a>

この２形式の場合、自動的にブログカードに変換してくれる機能があります。

⇩こういうの

カイタリツクルキカク

クリエイター桜矢の仕事部屋（旧クーガキカク）Japanese language only.

でもこれ『楽天アフィリエイトの規約』にかかっちゃうんですよね

楽天アフィリエイトの規約とは？

楽天アフィリエイト公式サイトが配布するHTMLタグをそのまま利用する必要があります。
改変・加工はNGで、独自スタイルや構造変更も原則禁止。

HTMLタグ加工に関する禁止事項（2025年6月時点）

楽天が生成したHTMLソースのaタグ・imgタグの属性追加・削除・変更は禁止
リンク先URLの変更や、指定画像サイズ以外への変更もNG
画像リンク内にテキストを追加、テキストリンク内に画像を追加するのもNG
HTMLソースにタグを追加すること（例：装飾やラベル挿入）も禁止

楽天アフィリエイトガイドライン｜楽天アフィリエイト

ご利用いただくにあたり遵守いただく禁止事項や成果報酬のお支払いルールを記載したページです。楽天アフィリエイトをご利用の前には、必ず本ガイドラインをご確認ください。

これは広告リンクの信頼性・トラッキング保持のためです。

そこで先程のWordPressの自動機能が問題になります。

WordPress内リンクの自動変換機能の問題とは？

ブラウザからページソースを確認してみてください。
HTMLがしっかり加工されています。

まぁ、WordPress内部で書き換えてるから、HTMLも加工されるよね

こっちがやったことではないといえ、WordPressの自動変換は使わない方が安心では？

えー？
『HTMLに手を加えられない』＝『ブログカード表示できない』
で終わりてこと？

そう思っちゃうよね？

ところがドッコイ

HTML加工なしで実現する方法がある！

ここで登場するのが JavaScriptによる補助的な読み替え表示です。
HTMLタグそのものは一切加工せず、DOM読み取り＋非破壊な補完表示を実装すれば、楽天の規約も回避可能。

JS加工が許容される理由

加工方法	規約違反？	備考
HTMLタグを直接編集	❌ 禁止	楽天が生成したコードの改変はNG
JavaScriptでDOM操作	✅ 許容	表示補完・非破壊的な加工は現状OK
CSSで装飾	✅ 許容	スタイル変更は基本OK（誤認装飾はNG）

解決策：JSで非破壊表示を追加する方法

楽天から提供されたHTMLタグはそのまま設置し、JavaScriptで補完的にカード風表示を付加します。

実装のポイント

DOMを読み取り、楽天リンクのaタグを検出
hrefから商品情報を取得（楽天APIや手動指定）
元リンクの下に、ブログカード風要素をJSで挿入
楽天アフィリンクはそのまま保持され、改変なし

これなら、規約違反なく、見た目だけ向上させられるというわけです。

実装サンプル（抜粋）

同一ドメイン商品情報取得にはCORS制限やAPIキー取得が必要。
画像は楽天公式サムネURLから生成可能。

document.addEventListener('DOMContentLoaded', function () {
  const links = document.querySelectorAll('a[href*="affiliate.rakuten.co.jp"]');
  links.forEach(link => {
    const url = link.href;
    const card = document.createElement('div');
    card.className = 'rakuten-card';
    card.innerHTML = `
      <a href="${url}" target="_blank" rel="noopener">
        <div class="card-thumb"><img src="商品画像URL" alt=""></div>
        <div class="card-content">
          <h4>商品タイトル</h4>
          <p>紹介文など</p>
        </div>
      </a>
    `;
    link.insertAdjacentElement('afterend', card);
  });
});

CSSで整えれば、どんなブログにも溶け込む表示が可能です。

使いやすいように、作ってみた！

以上を踏まえて、自分が使いやすいように作ってみたものがコチラ！

⇩これが
お買い物マラソン
⇩こう！

お買い物マラソン

⇩これが
楽天ポイントデー
⇩こう！

楽天ポイントデー

元のリンクから色々情報を足しているように見えるが、これは完全セーフである。

これが完全セーフである理由

HTMLタグを直接改変していない
- aタグやimgタグの属性を直接編集していない
- DOM操作はJSで行っており、楽天が生成したタグはそのまま保持
リンク先URL（アフィリエイトURL）は改変していない
- plainUrlは表示補助用であり、クリック先は元のアフィリエイトURLを使用
画像やタイトル・説明文はJSで補完しているだけ
- 表示の視認性向上を目的とした補完であり、楽天の成果トラッキングには影響なし
楽天公式素材を使用している
- imageSrcに使っている画像は楽天イベントページのOGP画像やSNS用画像で、著作権的にも問題なし

プラグイン化して販売思案中

一度作って組み込んでおくと便利なものです。

あとはもう何もしないぞー！

プラグイン欲しい？

欲しい方が多い場合は、noteやBOOTHにて販売を予定しています。

コメントなどでご連絡ください。
他にもアフィリエイトの種類欲しいなどでもOKですよ