ほしいものウィジェットはスタイルシート/CSSによるカスタマイズが可能です。 そのまま設置すれば、ブログ/サイトの設定に従って表示されますが、より細かく指定したい場合は、スタイルシート/CSSを使ってみてください。ここでは詳しい説明はしませんが、いくつか例を挙げておきます。 以下はその例。 サンプル 縦並びブログのサイドバーを想定したパターン。デザインはシンプルな3(商品名が写真の上に配置)を選択。商品名(div class="f9w_title")に背景色の指定などをしています。また、枠内で写真が左右センターになるよう指定しています(商品名は左寄せ)。 上記のようにするCSSは以下のとおり(ポイントとなる部分のみ抜粋)。
サンプル 横並び+商品情報デザイン2は縦並びで商品名が付加されるタイプですが、これを横並びにすることも可能です。 横並びのデザインとしては、デザイン5がありますが、商品名などを付加できません。商品名付きで横並びにする場合はちょっと面倒ですが、デザイン2を使ったうえで、float指定することで横並びにします。 商品個々のdiv(f9w_each)と、ウィジェット全体(f9w_div)それぞれにサイズを指定するのがポイントです。また、サイトへのリンク(f9w_lg)の幅を横いっぱいにすることで、ロゴが回り込んでしまうのを解除しています。 上記のようにするCSSは以下のとおり(ポイントとなる部分のみ抜粋)。
おまけ: アニメーションさせる本サイトで提供しているウィジェットの機能ではありませんが、jQueryとプラグインと併用することで、アニメーションさせることもできます。 上記サンプルもブログのサイドバーを想定したもの。ポイントは、ウィジェットの表示が完了したかどうかをチェックすることと、f9w_each(個々の商品)とf9w_list(商品リスト全体)の高さを固定しておくことでしょう。 jQueryに慣れてないとけっこう面倒なので、詳しくは書きません。
jQueryのプラグインはご自身のサイト/ブログにアップロードしてお使いください。jQuery本体はGoogleにホスティングされているものを使うのがいいかと思われます。 |
|||