アイテムナビのスライドバナー作成

Question

下記のページのようにアウター・トップスなどのアイテムナビを
スライドして選択が出来るようにしたいのですが
どうすればいいでしょうか？
宜しくお願い致します。

https://www.rakuten.ne.jp/gold/e-zakkamania/mobile/sp_html/

Answer

ECマスターズの田中です。

＞下記のページのようにアウター・トップスなどのアイテムナビを
＞スライドして選択が出来るようにしたいのですが
＞どうすればいいでしょうか？

横幅画面いっぱいで表示している要素の中に、
スタイルシートで
「overflow-x: scroll;」および「white-space: nowrap;」
以上２つのプロパティを設定したブロック要素（など）を
加えていただくことで、
横にスライドできる箇所を作ることができます。

例）

横にスライドさせたいHTMLソース


※タグおよびstyle属性は、RMSのスマートフォン用項目に本来入力できないため、
　共通説明文などに入力する場合はバグを利用する必要がございます。

Answer

実装できました！
有難うございます。
ヘッダーに設置したのですがアイテム画像の上の
余白をなくしたいのですがどうしても出来ません。
どうすればいいのでしょうか？
また上のショップロゴの下の余白も小さくしたいのですが出来ませんでした。
合わせて教えて頂けると助かります。

Answer

ECマスターズの田辺です。

＞ヘッダーに設置したのですがアイテム画像の上の
＞余白をなくしたいのですがどうしても出来ません。

スライドの中にあるアイテムの余白についてでよろしいでしょうか。

その場合は、の中にある記述の編集をお願いいたします。

１：.category を margin: 0; にしていただき、
もう一つmarginを設定している.categoryがございますので
そちらは削除してください。

２：.category_wrapperも２つありますので片方をまるごと削除し、margin-top:6pxを追加します。

３：との間にコメントをする場合には  ではなく /**/ になりますので、
.category_wrapperの上にある  は削除してください。


そして、ショップロゴの下の余白を小さくする場合は、
ul#logo-head に設定している height: 40px; を
height: 30px; にご変更ください。

Answer

ご回答有難うございます。

指示通り変更したのですがスライドしていたのがスライドしなくなりました。
上の余白も多くなったように見えます。
何が悪いのでしょうか？
また縦長のアイテムバナーの横に横長のバナーを置きたいのですがこれも上手く行きません。
（

Answer

ECマスターズの田辺です。

＞指示通り変更したのですがスライドしていたのがスライドしなくなりました。

.category の横に「,」が残っていることで
以前設定いただいたスクロールも動作しなくなっております。

そのため「,」の削除をお願いいたします。

誤）.category, {
正）.category {


＞縦長のアイテムバナーの横に横長のバナーを置きたいのですがこれも上手く行きません。

スライド内に横長の画像も入れたいということでしょうか。

スライド内のに一律で横幅を設定しているため、
そのまま横長の画像を入れると小さく表示されてしまいます。

そのため、横長画像のにclassを設定し、
（例えば）
縦長画像と別でwidthの設定が必要です。

また、新たに設定したwidthを優先的に読み込ませるために
!importantを加えてください。

.yoko_bnr {
  width: 35%!important;
}

Answer

お返事有難うございます。
指示通りにするとスライドが出来ました。
横長の画像も!importantを加えると実装する事が出来ました。
ずっと解決が出来ませんでしたので大変助かりました！
本当に有難うございました。

Answer

ECマスターズの田辺です。

解決したようで何よりです。

また、１点気になったのですが、
トップページと商品ページのスライドバナーは問題ないのですが、
カテゴリページに設置していただいたスライドバナーが
ガイドライン違反になるためご確認をお願いいたします。

Ⅱ-(9)-31　当社が全店舗に提供している共通コンテンツを隠す行為
https://www.rakuten.co.jp/shops/manual/navi/rule/10_faq004.html

楽天の共通ヘッダの上にバナーを設置し、
共通ヘッダを下にずらしているため禁止行為に該当します。

Answer

カテゴリページは変更していませんでしたね。
変更するように致します。
ご指摘ありがとうございました。