楽天Gold利用でスマホ用トップページを作成する件について

Question

ご担当様

お世話になっております。
落合と申します。

楽天スマホデザイン仕様変更の伴い、スマホ用トップページを現状と同じ内容でGoldで作成しております。そこで、教えてください。

現状のトップページ
https://www.rakuten.co.jp/11kaigofuku/index_smart.html

Goldスマホ用トップページ（作成中）
https://www.rakuten.ne.jp/gold/11kaigofuku/index_sp.html


①おおかた現状の通り反映はできているのですが、上から降りてくるメニューバーが表示されません。
どうすれば表示されるのか教えていただけますでしょうか。

②トップページ内下の方によくわからない空白（余白）があります。なぜこのように空白ができているのかお分かりなるでしょうか。

③楽天の仕様で「注文カテゴリ」や「ショップ内注目商品」をGoldへ反映することはできるのでしょうか。可能であれば、その手順を教えてください。

④フッター部分にあたる場所に「ショップメニュー」を設けたいのですが、現状のトップページのように楽天仕様のショップメニューを反映するにはどうすればよいのでしょうか。

⑤Gold内ではスクロールなど使っても禁止タグとはみなされないと認識しておりますが、
あっておりますでしょうか。

ご確認宜しくお願い致します。

株式会社興和堂
落合###HR######IMG09d9e96ad5bc240d21689bfe788b3d93d.pngIMG0###

Answer

ECマスターズの伊藤です。

> 楽天Gold利用でスマホ用トップページを作成する件について

いただいたご質問ですが、確認して、順番に回答しておりますので、
恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

ECマスターズの伊藤です。

> ①おおかた現状の通り反映はできているのですが、上から降りてくるメニューバーが表示されません。
> どうすれば表示されるのか教えていただけますでしょうか。

ページ内にjQueryが読み込みされていないようです。
custom_header.jsに対応したバージョンのjQueryの
読み込みをお願いいたします。


> ②トップページ内下の方によくわからない空白（余白）があります。なぜこのように空白ができているのかお分かりなるでしょうか。

iframeの中身と、枠の高さがあっていないためです。
sp_head.cssに記載されている、
下記２箇所770を修正してください。

@media screen and (-webkit-min-device-pixel-ratio:0){
.if_cont {
height: 770vw; 
}

@media screen and (-webkit-min-device-pixel-ratio: 3){
.iw_cont {
/*position: relative; 20190214コメントアウト*/
width: 100%;
/*padding: calc(1950 / 320 * 100%) 0 0; 20190214コメントアウト*/
height: 770vw; /*20190214追記*//*スマホTOPページ長さ調整（20190215）770vw→700vw*/
}
}


> ③楽天の仕様で「注文カテゴリ」や「ショップ内注目商品」をGoldへ反映することはできるのでしょうか。可能であれば、その手順を教えてください。

GOLDに反映する方法はございません。

セレクトプレミアム10
https://www.intecrece.co.jp/ecm/master10.html
に含まれる

にぎわいランキング
https://www.intecrece.co.jp/ec/ranking/index.html

などのツールをご利用いただくことで、
似たようなご対応が可能かと思います。


> ④フッター部分にあたる場所に「ショップメニュー」を設けたいのですが、現状のトップページのように楽天仕様のショップメニューを反映するにはどうすればよいのでしょうか。

GOLDに楽天の標準のシステムを
反映させる方法はございません。
似たようなデザインで、
HTMLにて作成していただくようになります。


> ⑤Gold内ではスクロールなど使っても禁止タグとはみなされないと認識しておりますが、
> あっておりますでしょうか。

GOLD内であれば、禁止タグは気にせず、ご利用いただくことができます。

Answer

ECマスターズ
伊藤様

お世話になっております。
落合です。

ご回答いただきありがとうございました。
大変参考となりました。

元のデータは業者に依頼を作っていただき、初心者レベルでできる修正については
ドリームウィーバーにて編集しております。

HTML自体、ほぼ知識が乏しく初心者なため教えてください。

「custom_header.jsに対応したバージョンのjQueryの読み込みする」
とはどういうことなのでしょうか。

ドリームウィーバーでもできることでしょうか。

何度もお手数をおかけして申し訳ございません。
ご確認宜しくお願い致します。

落合

Answer

ECマスターズの伊藤です。

> 「custom_header.jsに対応したバージョンのjQueryの読み込みする」
> とはどういうことなのでしょうか。
> 
> ドリームウィーバーでもできることでしょうか。

はい、ドリームウィーバーでもご対応いただけます。

外部にご依頼頂いたページとのことですので、
バージョンもご不明かと思いますので、

他のページにて
jquery-1.11.1
が指定されておりましたので、



を~の間に記述を
お試しいただけますでしょうか。

Answer

ECマスターズ
伊藤様

ご回答ありがとうございます。
何とか読み込みができました。

それと、デザインレシピから「Flexboxをつかった横並びカスタム」を使って
画像を並べてみたのですが、１行目が横並びできず、１画像が縦に並んでしまいます。
２列目については４画像横並びできております。

Goldスマホ用トップページ（作成中）
https://www.rakuten.ne.jp/gold/11kaigofuku/index_sp.html

なにかたタグに間違えがあるのでしょうか。
何度もお伺いをしてお手数をお掛け致します。

何卒宜しくお願い致します。

落合

Answer

追加でお伺いした件があります。

スマホ画面いっぱいに表示されているのを、
左右に少し余白を持たせたいのですが、どのようにすればよいのでしょうか。
検索していろいろと試してみたのですが、うまく表示できませんでした。

上記ご質問と合わせてご回答いただけますようお願い申し上げます。

何卒宜しくお願い致します。

落合

Answer

ECマスターズの伊藤です。

> それと、デザインレシピから「Flexboxをつかった横並びカスタム」を使って
> 画像を並べてみたのですが、１行目が横並びできず、１画像が縦に並んでしまいます。
> ２列目については４画像横並びできております。

こちらはどの部分が対象となるのか
詳細な場所をご連絡いただけますでしょうか。

> スマホ画面いっぱいに表示されているのを、
> 左右に少し余白を持たせたいのですが、どのようにすればよいのでしょうか。

余白を付けたい箇所を、


余白を付けたい箇所


などのように、一つ大きい枠を追加していただき、
その枠に対して、marginもしくはpaddingを
設定いただくことで、ご対応いただくことができます。
#containter{margin:0 5px}

Answer

ECマスターズ
伊藤様

ご回答ありがとうございます。
余白については試してみます。

＞> それと、デザインレシピから「Flexboxをつかった横並びカスタム」を使って
＞> 画像を並べてみたのですが、１行目が横並びできず、１画像が縦に並んでしまいます。
＞> ２列目については４画像横並びできております。

＞こちらはどの部分が対象となるのか
＞詳細な場所をご連絡いただけますでしょうか。

タイトル「注目カテゴリ」から下の画像部分です。

ご確認よろしくお願いします。

落合

Answer

ECマスターズの伊藤です。

> タイトル「注目カテゴリ」から下の画像部分です。

1行目の


及び、画像を囲うdivがないようですので、
再度ソースのご確認をお願いいたします。

Answer

ECマスターズ
伊藤様

お世話になっております。
ご回答ありがとうございます。

> タイトル「注目カテゴリ」から下の画像部分について解決できました。
ありがとうございました。

以前お伺いしていた、余白の件で、

> ②トップページ内下の方によくわからない空白（余白）があります。なぜこのように空白ができているのかお分かりなるでしょうか。

iframeの中身と、枠の高さがあっていないためです。
sp_head.cssに記載されている、
下記２箇所770を修正してください。

@media screen and (-webkit-min-device-pixel-ratio:0){
.if_cont {
height: 770vw;
}

@media screen and (-webkit-min-device-pixel-ratio: 3){
.iw_cont {
/*position: relative; 20190214コメントアウト*/
width: 100%;
/*padding: calc(1950 / 320 * 100%) 0 0; 20190214コメントアウト*/
height: 770vw; /*20190214追記*//*スマホTOPページ長さ調整（20190215）770vw→700vw*/
}
}

以上の内容にて調整をしているのですが、余白が小さくなりません。
修正している箇所が間違えているのでしょうか。

何度もお手数をお掛け致します。
ご回答いただけますようお願い申し上げます。

何卒宜しくお願い致します。

落合

Answer

ECマスターズの伊藤です。

> 以上の内容にて調整をしているのですが、余白が小さくなりません。
> 修正している箇所が間違えているのでしょうか。

現在、一番下までスクロールした状態で、
添付の状態となっております。

こちらと見た目が異なるようであれば、
キャッシュが原因だと思いますので、
キャッシュの影響を受けない、
シークレットモードでのご確認をおねがいいたします。

シークレットモードの起動方法は、下記URLをご参照ください。
https://bit.ly/2Uup9r7###HR######IMG0c09f0ab6d8080ea32f9056b4cec07338.pngIMG0###