amazonアソシエイトリンクについて

アソシエイトツールバー

アフィリエイトを行うにあたって、amazonアソシエイトツールバーにて生成できる各リンクの見た目は下記の通りになる。

「はてなでシェアする」ボタン


UXデザインの法則 ―最高のプロダクトとサービスを支える心理学

UXデザインの法則 ―最高のプロダクトとサービスを支える心理学

Amazon

記事中によく見るパターン

リンク作成「テキストと画像」

中

小

画像なら上記のサイズに

リンク作成「テキストと画像」

上記はサイドバーによく見るパターン

HTMLでタグ打ち

「はてなでシェアする」ボタンのHTMLを分解すると下記のような見栄えになる。一番外側のdiv要素は罫線で囲まれる。

罫線で囲まれる
<div class="hatena-asin-detail">罫線で囲まれる</div>

 

作者と出版社のリスト要素

<ul class="hatena-asin-detail-meta">
    <li><span class="hatena-asin-detail-label">作者:</span>
        <a href="http://d.hatena.ne.jp/keyword/Jon%20Yablonski" class="keyword">Jon Yablonski</a>
    </li>
    <li>オライリージャパン</li>
</ul>

 

書名の段落要素

UXデザインの法則 ―最高のプロダクトとサービスを支える心理学

<p class="hatena-asin-detail-title">
    <a href="https://www.amazon.co.jp/dp/4873119499?tag=hatena-22&amp;linkCode=ogi&amp;th=1&amp;psc=1" target="_blank"
        rel="noopener"> UXデザインの法則 ―最高のプロダクトとサービスを支える心理学
    </a>
</p>

 

UXデザインの法則 ―最高のプロダクトとサービスを支える心理学

Amazon