CSSによる表示のカスタマイズ

表示方法カスタマイズの例

従来もスタイルシートで見た目のカスタマイズが可能でしたが、さらに柔軟性を持たせてみました。サンプルをご覧いただければ概要がつかめるかと思います。

サンプル01 サンプル02

詳細は各サンプルページのソースを参照してください(追記部分に多少解説あり)。

スタイルシートカスタマイズの方法

Javascriptにより出力されるコード(スクリプト作成画面で生成されるものとは別)にはそれぞれの部分にクラス(class)が割り当てられているので、カスタマイズが可能です。

全体:fun9rankdiv(divタグ、サイトロゴ含む)
商品リスト部分:fun9list(divタグサイトロゴ含まず)
各商品ブロック:fun9each(divタグ)
商品の順位:fun9num(spanタグ)
商品名(タイトル)fun9title(spanタグ)

商品ごとのブロックを新たに加えたので、タイトルありで横並び(サンプル01)みたいなことが可能になっています。Amazonライブリンクの一番大きいデザインみたいなのもなんとか対応できるでしょう。また、縦・横の長さを固定できるため、Google Adsenseの代替にも設定次第で対応できると思います。

順位と商品名の間を改行したいという場合は、「display:block;」を使えばよいでしょう。また、順位と商品名の文字色、背景色を変えることも可能です(サンプル02)。

これ以上のスタイルシート(CSS)の詳細はここでは説明できません。上記でリンクしたサンプルのソースとあわせてご覧ください(ご要望があれば多少の解説はできるかもしれませんが、あまり詳しくないのと、デザインセンスがないため、さほど貢献できないかもしれません)。

似たようなツールがいくつかありますが、売れてる商品ばっかり(上位のみ)だったり、下位が紹介できてもデザインがごちゃごちゃしてるのが気に入らなかったりしたので、これを作ってみました。ユーザーが好きにデザインできることも(指定なしではとってもシンプルなことも)重視しているので、気に入っていただければ幸いです。