fun9 lab

ほしいものウィジェットはスタイルシート/CSSによるカスタマイズが可能です。

そのまま設置すれば、ブログ/サイトの設定に従って表示されますが、より細かく指定したい場合は、スタイルシート/CSSを使ってみてください。ここでは詳しい説明はしませんが、いくつか例を挙げておきます。

以下はその例。

サンプル 縦並び

ブログのサイドバーを想定したパターン。デザインはシンプルな3（商品名が写真の上に配置）を選択。商品名（div class="f9w_title"）に背景色の指定などをしています。また、枠内で写真が左右センターになるよう指定しています（商品名は左寄せ）。

上記のようにするCSSは以下のとおり（ポイントとなる部分のみ抜粋）。

.f9w_div{
text-align:center;
}

.f9w_div a{
text-decoration:none;
color:orange;
}

.f9w_img {
margin:0 auto;
}

.f9w_title{
color:white;
background-color:black;
text-align:left;
padding:0.2em;
}

サンプル 横並び＋商品情報

デザイン2は縦並びで商品名が付加されるタイプですが、これを横並びにすることも可能です。

横並びのデザインとしては、デザイン5がありますが、商品名などを付加できません。商品名付きで横並びにする場合はちょっと面倒ですが、デザイン2を使ったうえで、float指定することで横並びにします。

商品個々のdiv（f9w_each）と、ウィジェット全体（f9w_div）それぞれにサイズを指定するのがポイントです。また、サイトへのリンク（f9w_lg）の幅を横いっぱいにすることで、ロゴが回り込んでしまうのを解除しています。

上記のようにするCSSは以下のとおり（ポイントとなる部分のみ抜粋）。

.f9w_each {
width:178px;
float:left;
border: 1px solid orange;
height:90px;
overflow:hidden;
font-size:10px;
}
.f9w_list{
clear:left;
}
.f9w_lg{
width:540px;
display:block;
}
.f9w_div{
width:540px;
clear:left;
}

おまけ： アニメーションさせる

本サイトで提供しているウィジェットの機能ではありませんが、jQueryとプラグインと併用することで、アニメーションさせることもできます。

上記サンプルもブログのサイドバーを想定したもの。ポイントは、ウィジェットの表示が完了したかどうかをチェックすることと、f9w_each（個々の商品）とf9w_list（商品リスト全体）の高さを固定しておくことでしょう。

jQueryに慣れてないとけっこう面倒なので、詳しくは書きません。
プラグインの使い方は以下のサイト（英語）でチェックしてみてください。

circular, responsive jQuery carousel --- CarouFredSel 5.5.0

jQueryのプラグインはご自身のサイト/ブログにアップロードしてお使いください。jQuery本体はGoogleにホスティングされているものを使うのがいいかと思われます。