ASP関連

amazonの広告を見映え良く貼ってみる【amazlet】

先日、amazonアソシエイトの審査が通った、という記事を上げました。

しかし意外と広告を貼ってみるのに四苦八苦。

お恥ずかしい話ですが、他ブログで見かけるようなリンクを公式から作成できると思ってました。

公式アソシエイトセントラルから貼ると？

１.Amazonアソシエイトのページにアクセスし、検索ワードを入れます。

試しに「熱中症対策 グッズ」と入れてみます。

２.検索結果の横にある「リンク作成」をクリックします。

「リンク作成」横にある▼マークをクリックすると、テキストリンクが取得できます。

３.カラーとリンクの詳細を選択して、下のHTMLをコピーし自分の記事ページに「HTML」モードで貼り付ける。

４.完成

どうですか？クリックする気にはなりませんよね…。

外部ツールを使ってみる

使うのはこちら。「amazlet」です。読みは「アマズレット」らしいです。

公式ページ
Amazlet Tool

準備は「amazletをセットアップしましょう」から自分のアソシエイトIDを入力、「次へ」をクリック。

リンクをブックマークツールバーへドラッグして追加したらもう終了です。

使い方

実際の使い方はとても簡単。

・Amazonの商品ページでamazletのブックマークをクリックするか、逆の手順でamazletブックマークをクリックして検索し、「この商品のリンクを作る」をクリック。

・貼り付けたい形式のコードをコピーし、記事ページに貼り付けて終わりです。


「商品情報リンク」でこんな感じ。

Greatever カンタンに暑中症対策　超冷感タオル 極冷iceタオル　ボトル携帯 持ち運び大便利　UVカット 　ひんやり タオル 運動会　スポーツ　アウトドア　夏フェス　炎天下作業など　６色展開 (グリーン)

posted with amazlet at 18.07.01

Greatever
売り上げランキング: 19

Amazon.co.jpで詳細を見る

レイアウトがきれいで売上ランキングも表示され、広告の抵抗感が少ないですよね。

ちなみに外枠は最初からあるわけではなく、ちょっとカスタマイズしました。

補足・枠を付ける方法

「テーマ」の「HTMLの編集」から「.breadcrumb-wrapper { 」と検索します。vaster2ではパンくずリストのCSSが出てきます。

ここの上にCSSを追加しましょう。

※これは一例ですので、別に「ページナビゲーション」でも、「記事一覧の要約」のところでも、キリのいいところであればどこでも大丈夫です。

他のテンプレートではCSSのどこかに同じように追加すれば大丈夫です。


追加するコードはこれです。

/*アソシエイト
--------------------------------------- */
.amazlet-box {
  margin: 10px;
  padding: 20px;
  border: 1px #cccccc solid;
}

貼ったところの画像です。

「テーマの保存」で、上のamazon商品リンクのように、枠線が付きます。

もし線の色や太さを変えたい時は「border:」以降のところを変更してください。


一応ですが、自分で作った方がいい広告画像が作れる、という際はその画像に公式アソシエイトページから取得したテキストリンクを貼る、という方法でも作れます。

ただテキストも自分で付ける場合は、Amazonの規約に違反しないよう気を付けて下さい。

スポンサーリンク

　　　　　　　　　　　 　　　　　　　　　　　　 あなたにおすすめの記事