スタイルシート/CSSによるデザインカスタマイズ

ほしいものウィジェットはスタイルシート/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.0circular, responsive jQuery carousel --- CarouFredSel 5.5.0はてなブックマーク - circular, responsive jQuery carousel --- CarouFredSel 5.5.0

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