【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ステーションタグ
----------------------------------------



ランキング

body {
font-family:'Trebuchet MS','Avenir Next','Arial',"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size:11px;
padding:0;
margin:0;
-webkit-text-size-adjust:none;
overflow:hidden;
}

.title {
font-size: 10px;
padding: 4px;
color: #fff;
margin: 0;
background-color: #999;
font-weight: bold;
}

p {
padding:0;
margin:0;
}

a {
text-decoration: none;
color: #333;
-webkit-tap-highlight-color: transparent;
display: block;
}

a:hover {
text-decoration: none;
background: #CCC;
}

a:hover img {
filter: alpha(opacity=60);
opacity:0.60;
}

img {
vertical-align:text-bottom;
}

table {
width:100%;
table-layout:fixed;
}

table td {
vertical-align:top;
text-align:center;
}

table.item td {
width:20% !important;
}

table.item .list img {
width: 98% !important;
border: 1px solid #CCC;
}

.r3-ranking-pict2{
height:30px;
}

.ranking{
font-size:12px;
color: black;
font-weight: bold;;
}

.r3-ranking-arrow{
height:15px;
}

table.item .rank td {
width:20% !important;
border:1px solid #FFF;
}


table.item .price {
color: #ea0000;
padding: 0px;
font-size: 11px;
margin-top:5px;
margin-bottom:20px;
}


.title-b {
font-size: 10px;
background: #FFF;
padding: 0px;
color: #000;
border-radius: 5px;
border: 2px #fff solid;
margin-right: 5px;
}

.item-box {
width:100%;
clear:both;
background:#FFF;
}









No.1
No.2
No.3



円 ()
円 ()
円 ()



No.4
No.5
No.6


円 ()
円 ()
円 ()

----------------------------------------

Answer

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

Answer

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