背景色などがカスタマイズできる新ブログパーツ「Amazon Ran9」テスト公開、CSSがわからなくてもOK

このブログパーツは終了しました。(2015/12/02)

たいへん急ですみません。使用していたGoogleのAPIが突然終了したためです。
以下は記録として残しています。

新しいブログパーツ「Amazon Ran9」(仮名:“アマゾンランク”と読みます)をテスト公開します。HTMLやCSSを知らなくても、誰でも見栄えのよいデザインができる、Amazonのランキング表示ブログパーツです。

まずは右のサンプルを御覧ください。

いかがでしょうか?

というわけで、ブログパーツのコード生成ページは以下のリンクから。

fun9 Amazon Ran9

NEW!
ファッション専用のカテゴリも大幅追加

セールスポイント

まず第1にHTML、CSSを知らなくても見栄えのいい(目立つ?)デザインになります。

次に、「売れている商品だけではつまらない」という方に向けて、ベストセラー以外に以下のランキングが表示可能です。

  • 新着ニューリリース
  • 一番ほしい物リストに追加されている商品
  • 一番ギフトとして贈られている商品
  • ヒット商品(24時間で売上が伸びた商品)

※ヒット商品はカテゴリ中「すべて」のみの対応です。

設定はカンタン。基本はカテゴリを選んで、アソシエイトID(またはトラッキングID)を入力するだけ。

画像サイズや順位、アーティスト名、価格表示のON/OFFが選択だけで設定可能。

また、これまでにないものとして文字サイズや、背景色(奇数番目と偶数番目の色が変えられます!)もカンタンに設定できます。

さらに、横並びの配置も可能。横並びの際にもタイトルや価格などの表示ができます。定番のサイドバーへの設置のほか、記事の上や下などに設置するのに適したデザインが用意されているというわけです。

また、商品名が長すぎて見た目がよくない、という場合のために行数を制限することも可能です。

とにかく触ってみればなんとかわかるという感じに仕上げてみました。

fun9rankとの違い

以前から提供しているブログパーツ「fun9rank」と比較すると、キーワード指定ができない、表示できる順位が10位まで、カテゴリが少ない、という違いがあります。

それでもランキングの種類や表示できる項目が多かったり、デザインがカンタンにできるといった利点もありますので、お好きなほうをご利用いただければと思います。

注意事項・補足など

IE7、IE6でも崩れることなく表示されるよういろいろやってみました。ただし、IE6では商品名の行数指定が効きません。IE6利用者が少ないと思うので、これ以上の対応はしないと思います。

表示されるデータはAmazonが公開しているRSSフィードを利用しています。RSSフィードを利用したアフィリエイトについてはAmazonが認めているのですが、本ブログパーツでの利用を保証するものではありません。自己責任でご利用願います。

バックエンドに使用していサーバーの利用制限により、想定外に大勢のユーザーの利用に対応できない可能性があります。ある程度ユーザーが増えた時点で新規コード発行を停止する可能性もあります。そのへんは運営しつつ様子を見たいと思います。

また、例によって数パーセントの割合で当サイトのIDへの差し替えがあります。

テスト期間中はこちらで不具合報告、動作報告などをコメント欄にて受け付けます。

それから、ボックス背景色に「オススメ配色」というのを作成したのですが、実は適当に作っただけであまり気に入っていません。表示される色から選択するだけでなく、16進数で直接指定することもできるので、「もっといい配色があるよ!」という方もコメントいただけるとありがたいです。

よろしくお願いいたします。

別のデザインのサンプル

最後に別のデザインも載せておきます。

こちらは幅を指定するために、出力されたHTMLコードの前後をdivタグに囲んで、そのdivにstyle属性で幅を指定しています(<div style="540px">と</div>で囲む)。

これは横並びの際に幅いっぱいまでボックスが並び、2段以上になった場合に1段目が6個、2段目が4個といった具合で、バランスが悪くなるのを避けるための措置です。うまいこと指定してみてください。HTML、CSSがわからなくてもこれくらいはなんとかなるんじゃないですかね。

あと、生成画面で追加で設定を行なっている部分が数点。

まず、商品名が長すぎるとボックスからはみ出した部分は表示されないので、2行に制限しています(そのオプションは生成画面にあります)。

また、「ボックス内padding」を指定することで、縁取りのような効果を加えています。この値を大きくすると、初期設定のボックスサイズからちょっとはみ出してしまうので、ボックスサイズの横を8ピクセルほど増やしています。