• 文字サイズ


解決済

イーザッカマニアストアーズさんみたいなトップページを作りたい

  • 相談者:非公開
  • 2018/11/12 15:36
身も蓋もない質問で申し訳ないのですが

https//www.rakuten.ne.jp/gold/SHOP-URL/mobile/sp_html/index.html

画面上部のアウター、トップスなどのカテゴリーがスライドバナーになってまして
こちらを参考にしたいと思っております。

弊社も商品のカテゴリーが非常に多くありまして
どうしてもカテゴリーが多いとカテゴリーを並べていくバナーにすると
(2×N行のバナーなど)
バナー群が縦に長くなってしまう為
人気のカテゴリーだけは上記URLのアウターなどのような感じのスライドバナーで
表示出来ればと考えておりますが、自分の知識だけでは上手く出来ません
サンプルとなるコードを教えて頂けないでしょうか。

あと、前にスライドバナーだけのページを作って
インラインフレームで呼び出そうとして作ったのですが
レスポンシブデザインにしようと
スマホページでインラインフレームをWidth=100%にすると無限に横に広がってしまって
まともに表示出来なかった事がありました
(PCページで呼び出した際はWidthをPixel指定しているので起きない)

ホントはカテゴリーのスライドバナーも
goldページのトップページだけでなく
RMSのカテゴリーや商品ページにもやれるようにしたいのですが
(RMS内のデザインだと文字数制限もあり、iframeで呼び出した方が都合が良いので)
どのようにすれば良いでしょうか?
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2018/11/12 19:43
ECマスターズの田中です。

横幅画面いっぱいで表示している要素の中に、
スタイルシートで
「overflow-x: scroll;」および「white………(省略)………
  • 返信者:非公開(質問者)
  • 2018/11/13 09:53
ご回答ありがとうございました。

それでご教授頂いたdivタグでiframeを埋め込んでみたのですが
上手くいきませんでした
(まずはgoldページでテ………(省略)………
  • 返信者:非公開
  • 2018/11/13 11:18
ECマスターズの田中です。

上手くいかなかった、というのは、
具体的にどのような問題が有りましたでしょうか。

原因究明も含め、実際に確認させていた………(省略)………
  • 返信者:非公開
  • 2018/11/13 12:14
私もこれ知りたいので
まとめソース頂けると助かります!
メニュー、くるくるーっとしたいです(´;ω;`)

(以前うまくいかないとフォーラムで質問したら………(省略)………
  • 返信者:非公開(質問者)
  • 2018/11/13 14:07
>ECマスターズ 田中様
ご返信ありがとうございます。
説明不足ですみません。
教えて頂いたDIVタグを入れてもiframeで挿入したHTMLがみれなくな………(省略)………
  • 返信者:非公開
  • 2018/11/13 16:05
ECマスターズの田中です。

お知らせいただき、ありがとうございます。
実際のページを確認した上で、
私でも混同していた部分がございますので、

ス………(省略)………
  • 返信者:非公開(質問者)
  • 2018/11/13 16:46
>ECマスターズ 田中様
ご返信ありがとうございます。

ご回答ありがとうございました。
教えて頂いた画像を並べるタイプの物でも十分利用出来るので
画………(省略)………
  • 返信者:非公開
  • 2018/11/13 20:13
ECマスターズの田中です。

私にて、無限に横幅が広がる現象を確認いたしました。
なお、使われているslick.jsのバージョンが若干古いようです。
………(省略)………
  • 返信者:非公開(質問者)
  • 2018/11/14 13:21
ご回答ありがとうございました。
最新版に差し替えてはみたのですが
症状が変わりませんでした。
パソコンで同一URLを確認しましたが、
(縦のスクロールバ………(省略)………
  • 返信者:非公開
  • 2018/11/14 20:30
ECマスターズの田中です。

> 症状が変わりませんでした。

一度、スライダー(.slider)の幅の指定を
width: 80%;
という、親要………(省略)………
  • 返信者:非公開(質問者)
  • 2018/11/15 14:34
ありがとうございました。
やっと出来ました!\(^o^)/

去年からずっと業務の合間をみては独学で試していたのですが
なかなか上手く出来ず、こんな事で………(省略)………
このフォーラムへの質問は終了しました