競馬予想をレース映像分析専門家が攻略するブログ

繰り返しの謎解き競馬

競馬ネタ

Amazonアソシエイトリンクをブログにあうように、amazletをカスタマイズ。囲み枠、ボタンを作る方法【今はAmazonJSを使用中】

Amazlet・カスタマイズ説明用・画像写真

ブログで、Amazonアソシエイトリンクを作成するために、amazletを利用しています。

 

amazlet、便利。amazonへのリンク作るのに

とても、便利です。クリックひとつでAmazonへのリンクがさくさく作れます。

 

そのまま使ってもけっこういいのですが、今回少々、ブログに合うように囲み枠、ボタンをカスタマイズしてみました。そのメモになります。amazletをカスタマイズしてみようと考えてる方の参考になれば幸いです。

 

※現在は、AmazonJSを使っております。

 

スポンサーリンク




Amazonの商品紹介アソシエイトリンク、らくちん、amazlet

amazlet、セットアップが終われば、Amazonの商品ページから「amazlet it!」のボタンひとつで、AmazonへのアソシエイトリンクのHTMLを作ることができます。できあがった、HTMLをコピーペーストすれば、下記のようなものができあがります。

 

下記のサイズのほかに、テキストのみ、イメージのみ、画像の大きなバージョンのものがあります。必要に応じて、使い分けます。

スクリーンショット 2014-04-12 21.23.00

ブログをはじめてから、amazletを使って、Amazonへのアソシエイトリンクを作ってきました(と、言ってもブログ2ヶ月目ですけども)。

 

できあがるリンクを見てますと、どうも背景の白と同化まではいかないにしても、溶け込んでしまって、画像があるのにもかかわらず、流れてしまってる気がしてきました。

 

うーん。うーん。

 

ご覧になられてる皆々様、上の、SEBASTIAN X『僕らのファンタジー』の画像にリンク……、そう、向かい合うユニコーンのジャケットが流れていってませんか。いや、それより活字が目にとまってないのではないかと思います。

 

嗚呼、これがいわゆる、ブログの流れるプール化現象(今、作った)。

 

スポンサーリンク




少しでもメリハリのある感じにしたい、いざamazletカスタマイズ

以下のふたつのサイトを参考にして、作ってみました。

 

amazletの使い方(komagawa292's blog)。

 

amazletの使用方法について、説明されています。

 

最後のほうに、

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

と、リンクボタンの作り方が書かれています。こちらをCSSファイルへ。

 

これで、活字で「Amazon.co.jpで詳細を見る」と書かれていた部分がボタンになります。

 

続いて、読めるブログのビジュアルデザイン4(euphoLab)の後半に書かれているものを参考にして、枠を作りました。

 

最後に、リンクの活字の色を今までよりも濃くしてみます。

 

できあがったのは、こちら。

僕らのファンタジー

僕らのファンタジー

posted with amazlet at 14.04.12
SEBASTIAN X
バウンディ (2010-08-04)
売り上げランキング: 55,678

 

いままでよりも、流れてゆく感じがしないのではないでしょうか。

 

CDのジャケットもはっきりして、いいと思います。

 

以上、amazletのカスタマイズでした。

 

スポンサーリンク




ほんとは、枠の中にマウスが置かれたときに色が変わるようにしたいと思ったのだけど、調べてもイマイチわからなかったので、気長に行くとします〜。

 

以上、Amazonアソシエイトリンクをブログにあうように、amazletをカスタマイズ。囲み枠、ボタンを作る方法【今はAmazonJSを使用中】でした。

 

 

-競馬ネタ
-, , , , , ,

Copyright© 繰り返しの謎解き競馬 , 2020 All Rights Reserved Powered by AFFINGER5.