Amazletの使い方

手軽に始めることができるAmazonアソシエイトですが、Amazonアソシエイトのサイトを使ってアソシエイトリンクを作成するとこうなります。

格好悪いですね。そこで、簡単に、かつ格好良くアソシエイトリンクを作成することができるサービスamazletをご紹介します。

セットアップ

amazlet (jp)
amazletにアクセスしたら、とりあえずセットアップしましょう。アソシエイトIDを聞かれるので自分のアソシエイトIDを入力しましょう。アソシエイトIDとは「XXXX-22(日本の場合)」形式のIDでAmazonアソシエイトのページで確認できます。
ski
これを間違えると、たとえ100万円売れたとしても1円の収入にもならないので気を付けてください。
次の画面では amazletをあなたのブラウザにセットアップします。「amazlet it!」と書かれた部分をブラウザのブックマークバーまでドラッグ&ドロップしてください。これで準備は完了です。
ski2

使ってみよう

ブラウザの「amazlet」をクリックすると、新ウィンドウでamazletのページが開きます。このページの検索フォームを使って、リンクを作成したい商品を検索します。
amazlet (jp)2
目的の商品が見つかったら、「この商品のリンクを作る」をクリックします。すると、リンクの形式を選択する画面になるのですが、全6種類の形式の中から選ぶことができます。一番基本的な商品情報リンクも本家Amazonアソシエイトのように邪魔な枠線が入ったりせず、きれいな形式となっています。
amazlet (jp) - リンクを作る
好きな形式を選んで自分のサイトに張り付けましょう。

よくわかるPHPの教科書
よくわかるPHPの教科書
posted with amazlet at 13.08.08
たにぐち まこと
毎日コミュニケーションズ
売り上げランキング: 12,159

CSSで装飾しよう

基本的な使い方はここまでなのですが、テキストリンクでは少し地味なので、CSSを使ってAmazonへのリンクボタンを装飾してみましょう。

.amazlet-link a{
margin:3px;
font-size:12px;
text-decoration: none;
padding: 2px 4px;
background: rgb(255,198,62);
color: rgb(6,4,98);
border:solid 1px rgb(6,4,98);
border-radius:3px;
box-shadow:0px 1px 0px rgb(6,4,98);
}

やり方は簡単!このCSSをあなたのサイトのCSSファイルに追加するだけ!細かい原理や解説はまたの機会にするとして、このCSSを使うとAmazonへのリンクがこのようになります。

よくわかるPHPの教科書
よくわかるPHPの教科書
posted with amazlet at 13.08.08
たにぐち まこと
毎日コミュニケーションズ
売り上げランキング: 12,159

Amazonのカラーを使ったボタンとなっていますので、視覚的にもわかりやすいですね。

Amazletの使い方」への2件のフィードバック

  1. ピンバック: Amazlet で商品紹介をサイドバーに入れたまう | さぶの部屋

  2. ピンバック: 【メモ】Amazletをカスタマイズするの巻・囲み枠、ボタン

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>