Amakuri

誰でも簡単に使えるAmazonアフィリエイトリンク作成ツール

imgタグにalign属性を付与したカスタムテンプレートを作れるようにして欲しいとのご連絡を頂きましたのでそれに対する回答です。
(ご要望メールですがケースによっては返信するかもしれませんのでご連絡先をメールに載せておいていただけると幸いです。)
ご要望の通り、画像URLタグ、画像width、画像heightなど細かく出力できるようカスタムタグを追加するかどうか検討させていただきます。ですが、あまり期待しないでくださると幸いです。

align属性での左寄せがしたいとのことですが、HTML4 / XHTML / HTML5ともに(ブラウザではサポートされているが)align属性は非推奨および廃止された属性だったかと思います。ですので、align属性を使うのをやめてCSSで同等のことを実現されると良いのではないでしょうか。pタグなどに入れ子にしないという条件のもとでのサンプルを載せておきます。
pタグなどに入れ子にしたい場合はdivをspanに変更してみてください。

■サンプルHTML

<div class="product-image">
<a href="<%link_url%>" target="_blank"><%image_medium%></a>
</div>

■サンプルCSS

.product-image {
float: left; /* 画像を左寄せにして回り込みさせる */
margin-right: 1em; /* 画像の右側に余白を設定 */
}

(2016年11月8日)

ひとつの商品に複数のタイトルが含まれているようなごく一部の商品において、
正しくリンク作成画面が表示されないバグを修正いたしました。
ご連絡くださった方ありがとうございます。(2016年9月8日)

連絡先のないお問い合わせがありましたのでこちらに返信を書かせて頂きます。
画像の登録されていない商品リンクを作る際に「画像はありません」という画像が表示されるようになっております。
それの中サイズのタイプには下と右に枠線がついておりません。
AmazonAPIで指定される画像を使用しているため仕様だとお考えください。(2016年5月9日)

このWEBツールを公開したのが2014年の7月24日ですので気がつけばサイト開設から一年以上も経っておりました。
これからもよろしくお願いいたします。(2016年1月8日)

デフォルトテンプレートのレスポンシブ化の方法を載せました。
スマートフォンなどの小さな画面で表示させると右側のテキストが小さくなるのが気になる人は試してみてください。
パソコン(大きな画面)では今まで通りに右側にテキスト、
スマートフォン(小さな画面)ではテキストが画像の下に表示されるようになります。
ページの下に載せてありますのでご覧ください。(2015年12月22日)

ご要望のありました価格表示に対応いたしました。
ただしAmazonアフィリエイトの規約に違反する恐れがあるとの指摘もありますのでお気をつけください。
また、今回からカスタムテンプレートの保存をクッキーから別の方法に変えております。
その関係で保存していたテンプレートが消えてしまっていると思いますので、
こちらよりコピーして改めて設定してくださるようお願いいたします。
詳しくは下にあります更新履歴をご覧ください。(2015年11月12日)

Amazonアフィリエイトリンク作成ツールとは?

Amazonでアフィリエイトをするためには、
アフィリエイト用のリンクを作成しなければなりません。
本家Amazonの標準機能でもアフィリエイトリンクを作成することは可能ですが、
残念ながらデザインや文字列を変更できません。

このツールで作れる商品リンクはデザインや文字列の変更が可能です。

デザインや文字列でクリック率は変わってきます。
少しでもクリックされやすくなるような商品リンクを作るために
このツールを活用していただければ幸いです。

お知らせ

Amazon URL shortenerというamazonの短縮URLが作れるChrome拡張を公開いたしました。
オプション画面でamazonのアソシエイトIDを入力することで自動的にURLに付加することも可能です。
アドレスバーのURLを自動で短縮したURLに書き換える機能(オプション)もついています。
Amakuriともどもよろしくお願いいたします。
ダウンロード先はこちらです。

当ツールで作成したアフィリエイトリンクが
当サイトのアソシエイトIDに書き換わることはありません

連絡先の書かれていない質問メールを頂いたので
こちらに返事を書かせていただきます。

当ツールは他にあります一部のアソシエイト作成ツールのように、
何回かに一回、
サイト制作者のアソシエイトIDに変更して利益を得ようということはしていません。

Amakuriとは?

シンプル

シンプル

リンクを作りたい商品を検索して「商品リンクを作る」ボタンを押すだけでAmazonアフィリエイトリンクを作成することができます。

カスタマイズ

カスタマイズ

日付や一言コメントの追加などカスタマイズできる項目が豊富です。また、オリジナルテンプレートを作って適用することによりデザインを変更することができます。

スピード

スピード

ブックマークレットやブラウザ拡張を使うことによって、Amazon商品ページから直接Amazonアフィリエイトリンクを作成することができます。

更新履歴

2015.11.12
【機能追加】価格表示機能とカスタムテンプレートでの空タグ削除機能を追加。
保存できるカスタムテンプレートの数も8個に増やしました。
AmazonAPIを使用しているためKindle書籍など一部取得できない価格もありますが、
取得できない場合は非表示になるようになっています。
また、今回のアップデートに合わせてカスタムテンプレート用のタグを追加いたしましたのでご利用ください。
【修正】テンプレートで使用できない欄も選択可能になっていた問題や、
カスタムテンプレート内で<li><div>の空タグを自動的に削除していた問題や、
そのほかの小さなバグを修正いたしました。
2015.10.23
【修正】Amakuri用Firefox拡張機能を修正いたしました。
一部AmazonURLからFirefox拡張機能が使えない問題の修正です。
2015.10.21
【修正】配布しておりますAmakuri用Chrome拡張機能を修正いたしました。
一部AmazonURLからChrome拡張機能が使えない問題の修正です。
2014.09.29
【修正】特定条件において商品リンクのレイアウトが崩れる問題と空要素が削除されていない問題を修正いたしました。
2014.09.27
【修正】商品ページがあるにも関わらず「商品が見つかりません」と表示される不具合を修正しました。
【変更】AmazonAPIエラーが出た場合に、内部的に数回再リクエストをしてなるべく回避するように変更。

ブックマークレットの使い方

Amazonの商品ページでお気に入りに登録したブックマークレットを呼び出して使用します。

商品ページから一発でAmazonのアフィリエイトリンクを作成できますので大変便利です。

まずはブックマークレットを登録しましょう。
下にあるボタンをクリックしたままブラウザのお気に入りに追加してください。

※ブックマークレットとはブラウザのお気に入りから機能を呼び出して使えるようにするものです。
画像にあるInternetExplorerだけではなくChromeやFirefox、SafariやOperaなどで使うことができます。

ブラウザ拡張

Chromeエクステンション

Chromeウェブストアからインストール後、Amazonの商品ページから右クリックメニューを開くと利用できます。
下のアイコンからChromeウェブストアにアクセスしてください。

Chrome拡張のダウンロード

Firefoxエクステンション

下のアイコンからダウンロードしたamakuri_for_firefox_ver0.2.xpiをFirefoxにドロップしてインストールしてください。
Amazonの商品ページを右クリックして出たメニューからお使い頂けます。

Firefox拡張のダウンロード

デフォルトテンプレートのカスタム方法

予定

デフォルトテンプレートのレスポンシブ化の方法

デフォルトテンプレートの表示ですと、左側に画像、右側に商品説明となっています。
iPhoneなどスマートフォンの小さな画面で見ても商品説明のカラムが落ちることはあっても基本的には同じです。

パソコンなどを利用して大きな画面で見ているときは左に画像、右側に商品説明が出るようにして、
スマートフォンなどの小さな画面で表示する際には、商品説明を下に表示するように設定する方法を載せておきます。

方法は簡単です。
CSSファイルに下のコードを追加するだけです。
デフォルトテンプレートでのみ動作します。

        
@media screen and (max-width : 480px){
  .amakuri-default-image {
    float: none !important;
    margin: 0 !important;
    text-align: center;
  }
}

カスタムHTMLテンプレートの作り方

テキストエディタ

HTMLとCSSを理解できる方であれば簡単にオリジナルのHTMLテンプレートを作ることができます。
作成したテンプレートは保存されますので再利用することが可能です。

独自タグをHTMLに埋め込むことにより商品名や売上げランキングを出力することができます。

※プレビュー画面では本サイトのCSSが効いた状態で表示されますので、参考程度にとどめてください。

※見本にはアソシエイトIDが含まれていませんが、作成したリンクにはあなたのアソシエイトIDが入ります。
当サイトのアソシエイトIDを記載すると利用規約違反になるために見本からは削除しております。

サンプルHTMLテンプレート

下のテンプレートを適用するとどうなるでしょうか。

<span class="title"><a href="<%link_url%>"><%title%></a></span>
<%image_medium%>
<ul>
  <li>著者名: <%author%></li>
  <li>ランキング順位: <%ranking%></li>
</ul>

このような出力結果を得ることができます。
※「プログラムはなぜ動くのか 第2版 知っておきたいプログラムの基礎知識」のデータを元にしています。

<span class="title"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4822283151/">プログラムはなぜ動くのか 第2版 知っておきたいプログラムの基礎知識</a></span>
<img src="http://ecx.images-amazon.com/images/I/513mo%2Byq4WL._SL160_.jpg" width="113" height="160" alt="プログラムはなぜ動くのか 第2版 知っておきたいプログラムの基礎知識">
<ul>
  <li>著者名: 矢沢久雄</li>
  <li>ランキング順位: 28123</li>
</ul>

カスタムHTMLテンプレートデザインサンプル

実際に適用したカスタムHTMLテンプレート

<div class="amakuri-sample">
  <div class="amakuri-sample-image">
    <a href="<%link_url%>" target="_blank" rel="nofollow">
      <%image_medium%>
    </a>
  </div>
  <div class="amakuri-sample-footer">
    <div class="amakuri-sample-title"><a href="<%link_url%>" target="_blank" rel="nofollow"><%title%></a></div>
    <div class="amakuri-sample-poweredby"><%amakuri%></div>
    <div class="amakuri-sample-desc">
      <ul>
        <li><%author%></li>
        <li><%label%></li>
        <li><%teika_tag%>定価 <%teika_price%><%/teika_tag%></li>
        <li><%teika_datetag%>(<%teika_year%>年<%teika_month%>月<%teika_day%>日<%teika_hour%>時<%teika_minutes%>分時点の価格)<%/teika_datetag%></li>
        <li><%ranking_tag%>売上げランキング: <%ranking%><%/ranking_tag%></li>
      </ul>
    </div>
    <div class="amakuri-sample-comment"><%comment%></div>
    <div class="amakuri-sample-link"><a href="<%link_url%>" target="_blank" rel="nofollow">Amazonで詳細を確認する</a></div>
  </div>
</div>

実際に適用したCSS

.amakuri-sample {
  text-align: center;
  color: #FFF;
  max-width: 400px;
  box-shadow:rgba(187, 187, 187, 0.30) 0px 0px 6px 3px;
  -webkit-box-shadow: rgba(187, 187, 187, 0.30) 0px 0px 6px 3px;
  -moz-box-shadow:rgba(187, 187, 187, 0.30) 0px 0px 6px 3px;
}

.amakuri-sample-title {
  font-weight: 600;
}

.amakuri-sample-title a {
  color: #FFF;
}

.amakuri-sample-title a:hover {
  color: #0e4469;
}

.amakuri-sample-image {
  border: 1px #008CBA solid;
}

.amakuri-sample-image img {
  border: none;
}

.amakuri-sample-image a {
  display: block;
  padding: 20px 0;
}

.amakuri-sample-footer {
  padding: 20px;
  background-color: #008CBA;
}

.amakuri-sample-desc ul {
  padding: 0;
}

.amakuri-sample-desc ul li {
  list-style-type: none;
}

.amakuri-sample-comment {
  margin: 1em 0;
}

.amakuri-sample-link {
  background: #007095;
  padding: 12px;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  -webkit-transition-property: all;
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-property: all;
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
  -o-transition-property: all;
  -o-transition-duration: 500ms;
  -o-transition-timing-function: ease-out;
}

.amakuri-sample-link:hover {
  background: #0e4469;
  padding: 12px;
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  -webkit-transition-property: all;
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-property: all;
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;
  -o-transition-property: all;
  -o-transition-duration: 500ms;
  -o-transition-timing-function: ease-out;
}

.amakuri-sample-link a {
  display: block;
  color: #FFF;
}

.amakuri-sample-poweredby {
  font-size: 0.8em;
  margin: 1em 0;
}

.amakuri-sample-poweredby a {
  color: #FFF;
}

.amakuri-sample-poweredby a:hover {
  color: #0e4469;
}

利用可能なタグ一覧

項目 タグ 出力値 (ex. プログラムはなぜ動くのか)
商品名 <%title%> プログラムはなぜ動くのか 第2版 知っておきたいプログラムの基礎知識
著者名 <%author%> 矢沢久雄
出版社 <%label%> 日経ソフトウエア
売上げランキング順位 <%ranking%> 28123
売上げランキング順位表示用(補助) <%ranking_tag%></%ranking_tag%> 売上げランキング順位を取得できたときにだけこのタグに囲まれた内容が表示されます。

<%ranking_tag%>売上げランキング: <%ranking%></%ranking_tag%>

このように記述すると売り上げランキングがあるときには
売上げランキング: 28123
と表示され、ないときには何も出力されません。
たとえば<li>タグで囲んで使用した場合に、これと「空タグを削除機能」を使えば綺麗にタグを消し去ることができます。
プラットフォーム <%platform%> (ゲームなどの場合はPlaystation3などと表示されます)
商品画像(小) <%image_small%> <img src="http://ecx.images-amazon.com/images/I/513mo%2Byq4WL._SL75_.jpg" width="53" height="75" alt="プログラムはなぜ動くのか 第2版 知っておきたいプログラムの基礎知識">
商品画像(中) <%image_medium%> <img src="http://ecx.images-amazon.com/images/I/513mo%2Byq4WL._SL160_.jpg" width="113" height="160" alt="プログラムはなぜ動くのか 第2版 知っておきたいプログラムの基礎知識">
商品画像(大) <%image_large%> <img src="http://ecx.images-amazon.com/images/I/513mo%2Byq4WL.jpg" width="352" height="500" alt="プログラムはなぜ動くのか 第2版 知っておきたいプログラムの基礎知識">
ひとことコメント <%comment%> ex.【一言】PGなら必ず持っておきたい一冊!
作成画面で入力した値が表示されます。
Amazonへの誘導リンクテキスト <%link_text%> Amazonで詳細を見る / Amazonで購入する / Amazonで調べる
作成画面で選択した値が表示されます。
AmazonへのリンクURL <%link_url%> http://www.amazon.co.jp/exec/obidos/ASIN/4822283151/
これの最後にアソシエイトIDが付与されます。
Posted with Amakuri <%amakuri%> Posted with <a href="http://amakuri.com" target="_blank">Amakuri</a>
AmakuriへのリンクURL <%amakuri_url%> http://dadadadone.com/amakuri/
日付 <%posted_date%> ex 2014.8.28
定価表示 <%teika_price%> ¥2,462
定価が取得できたときだけ表示します
定価名前表示用(補助) <%teika_tag%></%teika_tag%> 定価を取得できたときにだけこのタグに囲まれた内容が表示されます。

<%teika_tag%>定価 <%teika_price%><%/teika_tag%>

このように記述すると定価があるときには
定価 ¥2,462
と表示され、ないときには何も出力されません。
たとえば<li>タグで囲んで使用した場合に、これと「空タグを削除機能」を使えば綺麗にタグを消し去ることができます。
年(定価がある時) <%teika_year%> 2015
定価が取得できたときに、いま現在の年を西暦で表示します。
月(定価がある時) <%teika_month%> 11
定価が取得できたときに、いま現在が何月か表示します。
日(定価がある時) <%teika_day%> 10
定価が取得できたときに、いま現在の日付を表示します。
時間(定価がある時) <%teika_hour%> 13
定価が取得できたときに、いま現在の時間を表示します。
分(定価がある時) <%teika_minutes%> 15
定価が取得できたときに、いま現在が何分かを表示します。
定価取得日時表示用(補助) <%teika_datetag%></%teika_datetag%> 定価を取得できたときにだけこのタグに囲まれた内容が表示されます。

<%teika_datetag%><%teika_year%>年<%teika_month%>月<%teika_day%>日<%teika_hour%>時<%teika_minutes%>分時点の価格<%/teika_datetag%>

このように記述すると定価があるときには
2015年11月10日13時15分時点の価格
と表示され、ないときには何も出力されません。
たとえば<li>タグで囲んで使用した場合に、これと「空タグを削除機能」を使えば綺麗にタグを消し去ることができます。
販売価格表示 <%hanbai_price%> ¥2,462
定価が取得できたときだけ表示します
販売価格名前表示用(補助) <%hanbai_tag%></%hanbai_tag%> 販売価格を取得できたときにだけこのタグに囲まれた内容が表示されます。

<%hanbai_tag%>販売価格 <%hanbai_price%><%/hanbai_tag%>

このように記述すると販売価格があるときには
販売価格 ¥2,462
と表示され、ないときには何も出力されません。
たとえば<li>タグで囲んで使用した場合に、これと「空タグを削除機能」を使えば綺麗にタグを消し去ることができます。
年(販売価格がある時) <%hanbai_year%> 2015
販売価格が取得できたときに、いま現在の年を西暦で表示します。
月(販売価格がある時) <%hanbai_month%> 11
販売価格が取得できたときに、いま現在が何月か表示します。
日(販売価格がある時) <%hanbai_day%> 10
販売価格が取得できたときに、いま現在の日付を表示します。
時間(販売価格がある時) <%hanbai_hour%> 13
販売価格が取得できたときに、いま現在の時間を表示します。
分(販売価格がある時) <%hanbai_minutes%> 15
販売価格が取得できたときに、いま現在が何分かを表示します。
販売価格取得日時表示用(補助) <%hanbai_datetag%></%hanbai_datetag%> 販売価格を取得できたときにだけこのタグに囲まれた内容が表示されます。

<%hanbai_datetag%><%hanbai_year%>年<%hanbai_month%>月<%hanbai_day%>日<%hanbai_hour%>時<%hanbai_minutes%>分時点の価格<%/hanbai_datetag%>

このように記述すると販売価格があるときには
2015年11月10日13時15分時点の価格
と表示され、ないときには何も出力されません。
たとえば<li>タグで囲んで使用した場合に、これと「空タグを削除機能」を使えば綺麗にタグを消し去ることができます。

コンタクトフォーム

ご意見・ご要望・バグの報告はこちらからお願いいたします。

送信