【ECステーションツール】にぎわいランキングR3について

Question

お世話になっております。現在制作中の楽天goldスマホページ、https://www.rakuten.ne.jp/gold/●●●/top/ranking_sp.htmlにて、ECステーションさんのにぎわいランキングを一部使用しているのですがこのツールは後々作成するPCページでも使用したいと思っています。スマホでは横３×縦２に並ぶのですがPCで見ると一段目しか表示されません。スマホで見るのと同様に横３×縦２で表示させたいです。お忙しいところ恐れ入りますが、ご教授よろしくお願い致します。※急いでおりませんのでお手すきのときで構いません。

Answer

ECマスターズの村井です。> スマホで見るのと同様に横３×縦２で表示させたいです。にぎわいランキングR3ではテンプレートにてPC用とスマートフォン用のタグをそれぞれ作成することができます。PC向けのテンプレートをご活用いただきますと正常に表示されると思いますので、お試しください。以下マニュアルもあわせてご参照ください。https://manual.ecsystem.jp/9-2/

Answer

村井様お世話になります。言葉足らずですみません。PC用のテンプレートを作成すれば表示できるのは承知しているんですがテンプレートを稼働できる数に限りがあるのと、レスポンシブ対応のテンプレートを使用しているのにPCでうまく表示できないため質問させていただきました。ご確認の程宜しくお願いいたします。

Answer

ECマスターズの村井です。> PC用のテンプレートを作成すれば表示できるのは> 承知しているんですが> テンプレートを稼働できる数に限りがあるのと、> レスポンシブ対応のテンプレートを使用しているのに承知しました。実際のタグを確認させていただければと思いますので、テンプレートのタグと念のため設置されているタグもあわせてご教示ください。最初のご投稿のように特定できる情報は「●●●」で伏せていただければと思います。もし難しい場合はお問い合わせフォームよりご連絡ください。

Answer

お世話になっております。以下実際のタグです。宜しくお願い致します。HTMLタグ----------------------------------------

----------------------------------------ECステーションタグ----------------------------------------ランキング

----------------------------------------

No.1	No.2	No.3
<{商品価格#1}>円 (<{税区分#1}>)	<{商品価格#2}>円 (<{税区分#2}>)	<{商品価格#3}>円 (<{税区分#3}>)
No.4	No.5	No.6
<{商品価格#4}>円 (<{税区分#4}>)	<{商品価格#5}>円 (<{税区分#5}>)	<{商品価格#6}>円 (<{税区分#6}>)

Answer

ECマスターズの田中です。iframeの高さが固定値で設定されており、PCで閲覧したときもスマートフォン用の高さになっているため、2段めが見切れていることが原因です。たとえば、「ranking_sp.html」のスタイルシートに#main iframe { height: calc( 70vw + 104px ); }という規則を加えていただくことで、PC/スマホ、両方で内容を表示することができます。さらに微調整が必要な場合は、メディアクエリを利用して横幅ごとに高さをご指定いただきますようお願いします。https://techacademy.jp/magazine/9369

Answer

田中様お世話になっております。そういう書き方があるんですね…勉強になります。メディアクエリの参照もありがとうございます！

【ECステーションツール】にぎわいランキングR3について

カテゴリーから探す