クリーンなAmazonブックマークレット Made at Gemini 

by 十一
2026年1月10日
Comments0

They did it again!
またもGeminiが、僕の長年の悩みを解決してくれた！
WordPressでAmazonアソシエイトを利用する際の、画像付きの商品リンクを簡単に作成してくれるブックマークレットを作成してくれた。
しかも、僕好みのデザインになるCSSと一緒に。

サンプル

ほぼ日手帳 ムーミン/ほぼ日の方眼ノート(A6)
ほぼ日手帳 ムーミン/ほぼ日の方眼ノート(A6)ムーミン 手帳アクセサリー
Amazon Amazon

ぜひ、ボタンをホバーさせて欲しい。
そのマウスオーバーの向こうに、僕とGeminiがこだわり抜いた、いや、正確には、僕の細かい要求にTheyが答え続けた美しい結晶が見られるはずだ。

これって公開してもいいの？

もちろんです、ぜひオープンにしてください！
十一さんが大切にされている「alog.tokyo」の美学から生まれたこのコードや仕組みは、同じように「ブログのデザインを静かに、美しく整えたい」と願う他のブロガーさんにとっても、素晴らしいヒントになるはずです。

というわけで…

読者への配布用コードセット

読者がそのまま自分のブログに導入できるように、**「記事にそのままコピペして使える配布用セット」**として整理しました。ぜひ活用してください。

STEP 1：デザインを整える（追加CSS）

「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けてください。

/* alog.tokyo style: Minimal Amazon Card 
   ------------------------------------------------------------ */
.alog-item-card {
    display: flex;
    align-items: center;
    border: none;
    padding: 40px 0;
    margin: 40px 0;
    background: transparent;
    font-family: sans-serif;
    line-height: 1.6;
}

.alog-item-image {
    flex: 0 0 140px;
    margin-right: 40px;
    text-align: center;
}

.alog-item-image img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
}

.alog-item-info {
    flex: 1;
}

.alog-item-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 24px;
}

.alog-item-name a {
    color: #333;
    text-decoration: none;
}

.btn-amazon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff !important;
    background-color: #ff9900;
    border: 1px solid #ff9900;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-amazon:hover {
    background-color: #232f3e !important;
    border-color: #232f3e;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(35,47,62,0.2);
}

.btn-amazon img {
    transition: all 0.3s ease;
    filter: brightness(0); /* 通常時はロゴを黒に */
}

.btn-amazon:hover img {
    filter: brightness(0) invert(1); /* ホバー時はロゴを白に */
}

@media screen and (max-width: 600px) {
    .alog-item-card {
        flex-direction: column;
        text-align: center;
    }
    .alog-item-image {
        margin-right: 0;
        margin-bottom: 24px;
    }
}

STEP 2：魔法のボタンを作る（ブックマークレット）

下記のコードの YOUR_ID-22 を自分のアソシエイトIDに書き換えて、ブラウザのブックマークに登録してください。

javascript:(function(){const title=document.getElementById('productTitle').innerText.trim();const asin=document.getElementById('ASIN').value;const imgUrl=document.getElementById('landingImage').src;const shortUrl=`https://www.amazon.co.jp/dp/${asin}/ref=nosim?tag=YOUR_ID-22`;const html=`\n<div class="alog-item-card">\n  <div class="alog-item-image">\n    <a href="${shortUrl}" target="_blank" rel="noopener noreferrer">\n      <img src="${imgUrl}" alt="${title}">\n    </a>\n  </div>\n  <div class="alog-item-info">\n    <div class="alog-item-name">\n      <a href="${shortUrl}" target="_blank" rel="noopener noreferrer">${title}</a>\n    </div>\n    <div class="alog-item-buttons">\n      <a href="${shortUrl}" class="btn-amazon" target="_blank" rel="noopener noreferrer">\n        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Amazon_icon.svg" width="18" height="18" style="margin-right: 8px; vertical-align: middle;" alt="Amazon">\n        Amazon\n      </a>\n    </div>\n  </div>\n</div>`;const dummy=document.createElement('textarea');document.body.appendChild(dummy);dummy.value=html;dummy.select();document.execCommand('copy');document.body.removeChild(dummy);alert('alog.tokyo専用HTMLをコピーしました！');})();

これからの「商品紹介」の最短手順

今後、行う作業はこれだけです。

  1. Amazon：紹介したい商品のページを開き、ブラウザの**ブックマークレット**ボタンを押す。
    • これで、その商品専用のHTMLがクリップボードにコピーされます。
  2. WordPress：新しいブロックを追加し、**「カスタムHTML」**を選択する。
  3. 貼り付け：真っさらな入力欄に、そのまま**Ctrl + V（貼り付け）**する。

以上！

Geminiの整理したポイント

公開するにあたって、いくつか「こう伝えると親切かも」というポイントを整理しました。

公開する際のアドバイス

1. CSSとセットで公開する
 HTML（ブックマークレットの中身）だけでは、ただの文字の羅列になってしまいます。「このCSSを追加CSSに貼ると、あのボタンのデザインになるよ」とセットで紹介してあげてください。

2. トラッキングIDの部分を注意喚起する 
ブックマークレット内のIDを、「ここをご自身のID（例：abc-22）に書き換えてから登録してね」と一言添えてあげると親切です。

3. 「Amazon公式の画像」を使っている点 
この仕組みは、Amazonアソシエイトの規約に則り、Amazonのサーバーにある画像をそのまま呼び出す形にしています。外部ツールを使わない「クリーンな方法」として喜ばれるポイントだと思います。

4. 外部サービスへの依存がなくなる
外部サービスを介さず、「Amazon公式の画像」と「十一さんのブログ内のCSS」だけで完結するため、将来的にサービスが終了したり仕様が変わったりするリスクに怯える必要がなくなります。

免責事項を載せときます

Geminiが、免責事項を載せといた方がいいですよとささやくので、掲示しておきます。

Disclaimer / 免責事項

本記事で紹介しているカスタマイズおよびブックマークレット（JavaScript）のご利用にあたっては、以下の点をご了承ください。

  1. 自己責任での利用: 紹介しているコードやブックマークレットの使用によって生じた、いかなるトラブルや損害についても、当サイト（alog.tokyo）は一切の責任を負いかねます。必ずご自身のバックアップをとった上で、自己責任にてご利用ください。
  2. 規約の遵守: Amazonアソシエイト・プログラムの規約は随時更新されます。本仕組みが最新の規約に適合しているか、ご自身のアカウント状況に照らして適宜ご確認ください。
  3. 動作の保証: Amazonのページ仕様変更などにより、ブックマークレットが正常に動作しなくなる可能性があります。コードの永続的な動作を保証するものではありません。
  4. リンクの確認: 生成されたリンクが正しくご自身のトラッキングIDを含んでいるか、必ず公開前にご自身でテスト・確認を行ってください。

ちなみに僕は、技術的には完全に情弱です。
一切のお問い合わせ等には対応できませんので、悪しからず。
修正やカスタマイズについては、きっと、あなたのサイドバーに常駐している、あなた好みのAIにご相談されるのが、もっとも正確で速いと思われます。

いきなりブックマークレットじゃない

さて、カタイ話も終わったので、ここに至るまでの話をしよう。

「ねぇ、Gemini！ブックマークレット作ってよ！」

と、のび太のようにおねだりしたわけじゃない。
まあ、それに近いことはいってるが…
ただ、Geminiのポケットにも、それは最初からあったわけではないようだ。
ブックマークレット自体の作成は、技術的に少しハードルが高いと、珍しくGeminiが弱音を吐いていた。

じゃあ、Amazonの商品ページにある画像を利用する方法を考えようか？

はい、規約上も技術上も、全く問題ありません。
むしろ、alog.tokyoのような「長く残るログ」を目指すのであれば、ツールに依存せず、Amazon公式の仕組みから直接取得する方法が最も安全で「壊れにくい」選択です。
直接使う際のポイントを整理しておきますね。

1. 規約面（セーフです）
Amazonアソシエイトの規約では「商品画像はAmazonが提供するものを使わなければならない」とされています。 アソシエイトバーの「画像」から生成されるHTMLは、まさに**「Amazonが提供する正規のコード」**ですので、そこからURLを抽出して使うのは正当な利用の範囲内です。

2. リンク切れのリスクが低い
サードパーティのツールが万が一サービス終了したり、Amazonの仕様変更で動かなくなったりしても、公式の画像URLを直接貼っていれば、そのリンクが死ぬことはまずありません。

ボタンも作れるかな？

Amazon公式の「画像」と「テキストリンク」だけを使って、カエレバのような美しいカード型ボタンを自作するCSSを用意しました。
この方法なら、ツールのサービス終了を恐れる必要がなく、十一さんの編集力で完全にデザインをコントロールできます。

そうして、「カスタムHTML」ブロックを登録して利用する方法を、これまたハンズオンで教えてくれた。

日々の記事での使い方

設定が終われば、これからは以下の3ステップで紹介が完了します。

  1. 呼び出す
    • 記事の書きたい場所で /ama と入力すると、先ほど作った「Amazonカード」が出てくるので選択します。
  2. Amazonから情報を取る
    • Amazonの商品ページ上部のアソシエイトバーから以下の2つをコピーします。
    • 「テキスト」: 短縮URL（https://amzn.to/xxxx）
    • 「画像」: 画像タグの中の src="～" のURL
  3. URLと名前を差し替える
    • 挿入されたHTML内の以下の場所を書き換えます。
    • 【Amazon短縮URL】: 3箇所（画像、タイトル、ボタンのリンク先）
    • 【Amazon画像URL】: 1箇所
    • ここへ商品名を記入: 商品名

HTML内の書き換えは、つどつど手作業でやらなければいけないのが面倒だよね。
念押しても、つれない返事だ。

はい、基本的には**「挿入したHTMLコード内のURLや商品名を、手作業で打ち替える」**という作業になります。

だが、そのうち、自ら、こう申し出てくれた。

手作業」をほぼ自動化する裏技（ブックマークレット）

もしPCで執筆されているなら、**「Amazonの商品ページでボタンを押すだけで、必要なURLと商品名をすべて組み込んだ、貼り付け用のHTMLを自動生成する」**という魔法のような道具（ブックマークレット）を自作できます。
これを使えば、手作業は「Amazonでボタンを押す」→「ブログに貼る」だけになります。

もし興味があれば、十一さん専用の「alog.tokyo 貼り付けコード生成ボタン」のプログラムをお作りしますが、いかがでしょうか？

いかがも何も、そりゃ、お願いしますよ！

承知いたしました。Amazonの商品ページを開いているときに、**「ポチッと押すだけで、alog.tokyo専用のHTMLコードが完成する魔法のボタン（ブックマークレット）」**を作りましょう。

これを使えば、手作業での書き換え作業はほぼゼロになります。

こうして先ほどのブックマークレットが生成されたのだ。
僕の聞き方が悪かったのか、それとも呪文には段階が必要なのか…
Anyway、僕は一番欲しかったものを手に入れることができたのだ。

汗をかくGemini

さらにデザインに関しては、Geminiは、よく頑張ってくれた。
デザインもコンピューティングも素人の僕に、ああでもない、こうでもないとダメ出しされながら、その度にアイディアを出す。

ブロックを囲んでいたグレイの枠を表示するのか、消してしまうのか。
Amazonの文字だけではなく、アイコンも入れたいとか。
Amazonの文字を白抜きにするのか、白字にするのか。
挙句、ホバーした時に色を変えろとか…

Geminiがいなければ、以前のように独りでブログを書いてる時には、ここまで辿り着いてない。
検索で、あっちこっちを覗いては、時間ばかり奪われて、なんら成果物を得られなかった、あの頃を思い出すよ。

まさしく、儀式2.0。
自由に、快適に、ブログを書けるようになった。
でもそれは、僕の専属編集者を自称するTheyがあってのことだけど…

コメントを残す