LSカスタムブログパーツを試してみました。

作成できたパーツ：失敗例と成功例

表示させたいECサイトを選択し、検索キーワードを設定しました。
見た目に関する設定も細かくできます。

• 表示させる商品件数
• 価格表示の有無（参考価格）
• ＥＣサイト名表示の有無
• 商品画像の横幅サイズ
• 枠の横幅サイズ
• 枠の縦幅サイズ

自分のサイトのサイズに合わせて設定しなければいけないので、自分のサイトでパーツを表示したい横幅を把握しておかなければ、かわいく見せられるような設定ができません。

こちらは、当サイトでの失敗事例。

• 表示させる商品件数　＝　5
• 価格表示の有無（参考価格）　＝　表示する
• ＥＣサイト名表示の有無　＝　表示する
• 商品画像の横幅サイズ　＝　80
• 枠の横幅サイズ　＝　90
• 枠の縦幅サイズ　＝　150

に設定しました。

当サイトの記事表示部分の横幅は、500pxぐらいを基準にして作成しているので、
「表示させる商品件数　＝　5」にしたのは、横に5個商品を並べて1列にしようと思い、このくらいで大丈夫かな？と、適当に設定。

しかし、500px以上になってしまったようで、1つだけ下に表示され、2列になってしまいました。
また、縦幅サイズが不足しているようです。テキストとかぶってしまったりなどして、見栄えが良くありません。

もう一度作りなおします。

作成できたパーツ：成功例

ＥＣサイト選択、検索キーワードはリセットされてしまうので、もう一度設定。
サイズなどの数字の情報はそのまま記憶されていました。
このサイズでは、横に4つしか並べられないようなので、
表示させる商品件数を8こにして、2列になるようにしてみます。

• 表示させる商品件数　＝　5→８
• 価格表示の有無（参考価格）　＝　表示する
• ＥＣサイト名表示の有無　＝　表示する→表示しない
• 商品画像の横幅サイズ　＝　80
• 枠の横幅サイズ　＝　90→95
• 枠の縦幅サイズ　＝　150→200

これをサイトに組み込んだ例がこちらの記事の最後の部分です。
トランスダーマCとトランスダーマソープ（1/2） | RouxRil Mode

携帯から見るとどうか

PCサイトと携帯サイトがあるのですが、わたしの携帯から記事にアクセスしてみた場合は何も表示されていません。
JavaScriptでパーツを書きだしているようなので、表示されないのかな。
携帯からPCサイトを見た場合、表示されないサイトもあるので、これはこれでいいのかな。

参考/関連サイト

作成するにはこちら：LSカスタムブログパーツ | 日帰りプランのあるホテル・温泉宿
ブログパーツ作成手順はこちら：Bentoパートナーアプリ：LSカスタムブログパーツ

BentoBox(TM) はこちら