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

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

って思ったこと無い？

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

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

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

WordPressの機能でブログカードに書き換えることもできるけど、
楽天の規約で、提供されたHTMLタグの加工は禁止。

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

という話。

楽天アフィリエイト、ただのテキストリンクじゃ目立たない！もったいない！
ブログカード形式で表示したい
HTML加工なしで実現する方法がある！
1. JS加工が許容される理由
解決策：JavaScriptで非破壊表示を追加する方法
1. 実装のポイント
2. 実装サンプル（抜粋）
使いやすいように、作ってみた！
結果がコチラ！
1. これが完全セーフである理由
プラグイン化して販売思案中

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

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

つまるところ

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

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）

結論：JavaScriptでブログカード化させよう

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

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

実装のポイント

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

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

実装サンプル（抜粋）

色々省略するのだけど、つまりはこんな感じ

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で整えれば、どんなブログにも溶け込む表示が可能です。

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

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

以上を踏まえて、自分が使いやすいように作ってみた。
もちろんCocoonで使っているブログカードの設定を活かす形である。

第1弾：JavaScriptだけで対応版

コツコツソースにサイト情報を書き込む形。
正直、めんどくさすぎた。
何個サイトあると思っているのかって話だよ。

今思えば、対象devにdate-なんとか形式に必要な内容を混ぜておけばよかった。
同じ逐一でも、こっちの方がラク…かな？
いや、どうだろうね？

第2弾：Google Apps ScriptでAPI版

APIから情報取得して表示させればいいのだ

と気付いた。

サイト情報取得用APIをGASで作る

URLを渡せば、HTMLソースから、ブログカード用の情報を取得してくるAPI。
でも何度もサイトに、読むだけのアクセスするとか迷惑じゃないか？
だから読み込んだ内容をスプレッドシートに保存し、一定期間はその内容を使う。

JSからAPIを呼び出し、ブログカード化する

何でも対象にされると困るので、条件を絞ってカード化対象とし、URLを取得。
そのURLをAPIに渡し、返ってきた内容で、表示を加工する。

問題点：GASはutf-8しか読めない

なので、もれなく他の文字コードが文字化けする。

今回は、あえて文字化けの状態でも登録はしておくままにしておいた。
そして手動でスプレッドシートの情報を直してもらう。
一定期間後も情報作り直さないって判断するためのフラグを立てることで問題ないってことにした。

つまり「文字化けしたら自分で対応してね」ってこと。

第3弾：情報取得処理もWordPressプラグイン内で版

まだ作って無い件

データベースを管理する管理画面を作るのが、とにかくめんどくさい！

作ったデータを確認して変更、削除したいときもあるだろう…
めんどくさい
管理画面に時間どれだけかけるんだよ。
機能が欲しいのよ、自分は。
気が向いたら作るよ…

結果がコチラ！

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

お買い物マラソン

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

楽天ポイントデー

元のリンクから色々情報を足しているように見えるが、HTMLソースをご確認ください。
HTMLソース自体は、全く変わっておりません。
つまりこれは完全にセーフ!!

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

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

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

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

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

プラグイン欲しい？

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

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