楽天goldページ作成について

Question

お世話になっております。
現在楽天goldにてレスポンシブ対応のトップページを作成しています。
https://www.rakuten.ne.jp/gold/******/top/index.html

制作している段階で３点ほど疑問点が出てきたので質問させていただきます。

①
上部のショップロゴと、右のテキストメニューが上揃えになってしまっているので
ショップロゴの縦幅の中心に、右のメニューがくるように揃えたいです。

②
一番上の灰色のヘッダーが、画面サイズいっぱいの両端揃えになってしまっているので
それぞれスライドショーの両端の表示位置に揃えたいです。
※グレーの帯は画面いっぱいのまま

③
ECステーションさんの「にぎわいRMIX」で新着商品のiframeを記載しているのですが
なかなかキレイに表示されません。
（NEW ITEMのところです）
希望としては、PCで見たときに、「横３個の3列」に並んでほしく
スマホで見たときには「横２個の5列」に表示されるようにしたいのです。
何か方法はありますでしょうか？
あとiframe全体の横幅を、メインメニューの横幅に合わせたいです。

長々とすみません。
お忙しいところ恐縮ですが
ご対応の程宜しくお願いいたします。###IMG06004e8afb10e932ee2a74582c5141674.jpegIMG0###

Answer

ECマスターズの塚本です。

ご返信が遅くなりまして大変申し訳ございません。

担当よりお調べしまして、回答させていただきますので、
今しばらくお待ちいただければと思います。

Answer

ECマスターズの田中です。

お待たせいたしました、
いただいた疑問点について回答させていただきます。

それぞれ、ページ内で読み込んでいる
〜タグの間、
もしくは外部スタイルシートファイルの中に、
記述を追加していただくことで解決できます。

> (1)

本来であれば、HTMLタグの構造自体を変える必要がございますが、
変更が大掛かりになるため、
ピクセル単位で調整する方法を採っております。
ロゴのサイズが変わるなど、要素の変更時はご注意ください。

= この下の行から ====================
nav ul.gnav > li:nth-of-type(n+2) {
    padding-top: 20px;
}
body nav ul.gnav > li.subnav > a:before, body nav ul.gnav > li.subnav > a:after {
    top: 35px;
}
= この上の行まで ====================

> (2)

= この下の行から ====================
.pconly h4{
max-width:980px;
margin:0 auto;
}

.pconly{
background-color:#E6E6E6;
}
= この上の行まで ====================

> (3)

こちらは、index.htmlではなく、
ECステーションの管理画面より、
にぎわいRMIX（rmixC.html）で使われているテンプレートの中に
追記をお願いします。
（6/25 10:16 修正）

= この下の行から ====================
@media screen and (max-width: 590px){
    body ul.slider li {
        width: calc( ( 100vw - 20px ) / 2 - 20px );
        height: calc( ( 100vw - 20px ) / 2 + 18pt );
    }
    body .pict {
        width: 100%;
        height: auto;
    }
}
= この上の行まで ====================

Answer

お世話になっております。
お忙しい中、ご回答ありがとうございました。
①②について、修正できたのですが
③のNEW ITEMが直りません…
にぎわいRMIXの稼働設定では、ページ更新の履歴はあるのですが
反映に時間がかかるのでしょうか？

お手数ですがお手すきの際にご確認宜しくお願いいたします。

Answer

ECマスターズの田中です。

失礼いたしました、
実際のページを確認したところ、
スタイルシートは正しくご記載いただいているのですが、
既存の規則によって上書きされてしまっていることがわかりました。

元のソースも修正させていただきましたので、
お手数ですが、修正後の通り、
ul.slider li {
.pict {
以上2行の先頭に「body」を追記し、
既存の規則よりも優先されるようご記載いただけますでしょうか。

Answer

お世話になります。
修正したところ、パソコンで２列、スマホで３列に
表示されることができました。
ありがとうございます。

ただ、PCで見たときにNEW ITEMの下線の長さに対して
左に寄った感じで小さく表示されてしまいます。
iframe全体の横幅を、メインメニュー(NEW ITEMの下線の横幅）に合わせたい
もしくは近づけたいですが、
どこを調整したらよいのでしょうか？
全くの初心者でお手数をおかけしてすみません。
宜しくお願いいたします。

Answer

ECマスターズの田中です。

> どこを調整したらよいのでしょうか？

同じく、にぎわいRMIXのテンプレート設定の
スタイルシート、「/*◇スライド◇*/」と記載されている部分の
各値を調整していただきますようお願いします。

ul.slider への規則にある padding にて、全体の左右の余白、
ul.slider li への規則にある
paddingにて、 各商品ごとの左右の余白、
widthにて、各商品ごとの横幅を、
それぞれ設定しております。

paddingプロパティでは、２つ目の値が右側、４つ目の値が左側の
余白をそれぞれ指定しておりますので、

ul.slider の padding が 0px 10px 10px 10px
ul.slider li の padding が 10px 10px 10px 10px
ul.slider li の width が170pxである場合、

全体として左右に10px余白を作り、
各商品ごとにさらに左右に10px余白を作り、
商品を表示する部分は横幅170pxで表示することになりますので、
３列表示した場合、全体の幅としては
10px + ( 10px + 170px + 10px ) x 3 + 10px = 590px
となり、合計590px分が表示のために使われることになります。

これを踏まえて、iframeタグの横幅に合わせて
各プロパティの値を調整していただければ結構なのですが、
rmixC.html用のiframeは、最大横幅666pxとして、
ウィンドウの横幅が狭まるのに合わせて
iframeの横幅もどんどん狭くなっていく仕組みになっておりますので、

px単位ではなく、iframe全体の幅からの割合で計算できるvw単位を利用し、
さらに計算を加える必要がございます。

たとえば、現在の余白を保ったまま、領域全体を使って３列表示させる場合は、
ul.slider li の width を calc( ( 100vw - 20px ) / 3 - 20px ) にご変更ください。

「/*◇スライド◇*/」部分の調整が終わりましたら、
次に「/*◇商品画像◇*/」と記載されている部分を２箇所、
再び「/*◇スライド◇*/」の部分を１箇所、
それぞれ調整をお願いします。

.pictへの規則にて、高さ（height）が170px、横幅（width）は未指定となっておりますので、
height の値を auto に変更の上、「width: 100%;」を追記してください。
そうすると、画像が大きくなる分、全体の高さがたりなくなりますので、
「/*◇スライド◇*/」の下にあるul.slider li の height の値を大きくしていただく形になります。

Answer

お世話になります。
修正したところ、イメージ通りの表示になりました…！
何度も質問してしまい、お忙しい中お手数をおかけしてすみませんでした。
大変助かりました。ありがとうございました！