楽天Goldで作成した個別ページをレスポンシブにする方法

Question

お世話になっております。
楽天Goldで個別ページ(商品の一覧表)を作成したいと思っているのですが、
スマホで見た場合にレスポンシブで見られるようにするにはどうすれば良いでしょうか。

ちなみに画像にwidth="100%"を付けるという方法もあるかもしれませんが、
1カラムで作成しようとしているので、その場合、PCの画面で横長になってしまい、
見栄えが悪くなってしまう可能性が高くなってしまうため
良い方法があれば教えていただけますとありがたいです。

Answer

ちなみにそもそもの問題として、楽天Goldは今後なくなる可能性があるので、
楽天Goldでページを作ること自体にリスクがあるのでしょうか。
ただ、カテゴリページで作ろうとすると文字数制限があるので、文字数が多い場合は、
楽天Goldしか選択肢はないのかなと思っています。

Answer

ECマスターズの伊藤です。

> ちなみに画像にwidth="100%"を付けるという方法もあるかもしれませんが、
> 1カラムで作成しようとしているので、その場合、PCの画面で横長になってしまい、
> 見栄えが悪くなってしまう可能性が高くなってしまうため
> 良い方法があれば教えていただけますとありがたいです。

レスポンシブは基本的には%で指定するのが
一般的となっております。
（どのような横幅でも対応できるため）

PCで見るときは、横幅を980px、
スマホでは100%で表示、といった方法がございますので、
ご案内させていただきます。

HTMLに記述されているbodyタグ
========

========
と
========

========

2つがあると思いますので

========


========
と
========


#container{
    margin:auto;
    width: 980px;
}
@media screen and (max-width:375px) {
    #container{
        width:100%;
    }
}


========

に変更をお願いいたします。
(body内のタグをdiv id="container"で囲う形になります)

980pxの値については、ご希望の数値に
変更ください。

レスポンシブ対応はHTMLとCSSを
きちんと理解していないと対応が難しいため、
もし、こちらの方法でうまくできない場合、
ココナラなどを利用いただき、
制作を依頼いただくのがよろしいかと思います。

> ちなみにそもそもの問題として、楽天Goldは今後なくなる可能性があるので、
> 楽天Goldでページを作ること自体にリスクがあるのでしょうか。

GOLDがなくなる予定は
今のところございません。

現在案内されているのは、スマートフォンの
トップページでGOLDが使えなくなるといった
ご案内となっておりますので、
スマホのGOLDページ以外は、引き続き
ご利用いただくことができます。