ショップレビュー更新君(R)スマホ表示について

Question

お世話になります
pcは、うまく表示されるのですがSPはwidthやheighを調整してみたのですが
横幅がズレてしまいます。何かいい方法教えてください。
お願いします
↓
スマホトップページ編集・トップ説明文(1)へ

Answer

ECマスターズの田中です。

楽天のスマートフォン用トップページの横幅は、
機種によって可変する仕組みになっております。

固定値で指定するのは困難ですので、まずは
width="100%"
とご指定いただいた上で、
高さや、内容の調整（スマートフォンでも1行に見えるようにする、など）を
行っていただきますようお願いします。

Answer

田中さん

御世話になります

width="100%"と指定し、高さを調整してみなのですがレイアウト上手くできなかったです
あらためて教えてください。

Answer

ECマスターズの伊藤です。

> width="100%"と指定し、高さを調整してみなのですがレイアウト上手くできなかったです

うまく行かなかった箇所は、
高さのご指定でよろしかったでしょうか。

height="20%"
とご指定頂いておりますが
heightは、親要素に高さが指定されていないと
％指定をすることができません。

そのため、
height="100"
のように、高さを固定値にて指定いただきますよう
お願いいたします。

Answer

伊藤さま

御世話になります。

height="100"
のように、高さを固定値にて指定いただきますよう
お願いいたします。
↓
はい、30,80,100など試してみたのですが、何故か？1行にはおさまりきれません。
いまは、width="100%" height="100"　にしています

Answer

ECマスターズの伊藤です。

> はい、30,80,100など試してみたのですが、何故か？1行にはおさまりきれません。
> いまは、width="100%" height="100"　にしています

失礼いたしました。
iframeの高さではなく

レビュー数：XXXXX 総合
　　評価：XXXXXX

のようになっているのを

レビュー数：XXXXX 
総合評価：XXXXXX

もしくは

レビュー数：XXXXX 総合評価：XXXXXX

とされたいということでしょうか。

その場合

https://www.rakuten.ne.jp/gold/XXXXX/XXXXX/header.html

にて

レビュー総数：###REVIEWNUM###
総合評価：###STAR### ###EVAL###　

のように改行を入れていただくか

font-size: 15px; /* 文字の大きさ */

にて、文字サイズの調整をお願いいたします。

なお、こちらを適用していただいた場合、
PC版にも同様のレイアウトが適用されます。

PC版とレイアウトを変更したいようであれば
改行を入れる場合は


↓↓↓


としていただき、スマホ版にのみ
brが適用できるように
〜の間に
下記のCSSを追加してください。

.sp_br{
    display:none;
}
@media only screen and (max-width : 480px) {
.sp_br{
    display:inline-block;
}
}


文字サイズを変更するのであれば
スマホの文字サイズを下記に記述していただき
〜の間に追加してください

@media only screen and (max-width : 480px) {
font-size: 10px; /* 文字の大きさ */
}

Answer

伊藤さん、

ありがとうございます。

ソースを変更するとpc表示にも影響するんですね。
とりあえず、文字大きさで対応しました。

1行で表示されるスマホバージョンも、あれば嬉しいです。

Answer

ECマスターズの伊藤です。


> ソースを変更するとpc表示にも影響するんですね。
> とりあえず、文字大きさで対応しました。

ご対応いただき、ありがとうございます。
ショップレビュー更新くんは、
現状、１つしか作成できず

PC、スマホとも同じファイルを参照するため、
両方に修正した内容が反映されます。

> 1行で表示されるスマホバージョンも、あれば嬉しいです。

貴重なご意見、ありがとうござます。
社内にて検討をさせていただきます。

リリースの際には、ECマスターズクラブ内や
レターにて、ご案内いたします。