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

Question

身も蓋もない質問で申し訳ないのですが

https://www.rakuten.ne.jp/gold/e-zakkamania/mobile/sp_html/index.html

画面上部のアウター、トップスなどのカテゴリーがスライドバナーになってまして
こちらを参考にしたいと思っております。

弊社も商品のカテゴリーが非常に多くありまして
どうしてもカテゴリーが多いとカテゴリーを並べていくバナーにすると
（2×N行のバナーなど）
バナー群が縦に長くなってしまう為
人気のカテゴリーだけは上記URLのアウターなどのような感じのスライドバナーで
表示出来ればと考えておりますが、自分の知識だけでは上手く出来ません
サンプルとなるコードを教えて頂けないでしょうか。

あと、前にスライドバナーだけのページを作って
インラインフレームで呼び出そうとして作ったのですが
レスポンシブデザインにしようと
スマホページでインラインフレームをWidth=100%にすると無限に横に広がってしまって
まともに表示出来なかった事がありました
（PCページで呼び出した際はWidthをPixel指定しているので起きない）

ホントはカテゴリーのスライドバナーも
goldページのトップページだけでなく
RMSのカテゴリーや商品ページにもやれるようにしたいのですが
（RMS内のデザインだと文字数制限もあり、iframeで呼び出した方が都合が良いので）
どのようにすれば良いでしょうか？

Answer

ECマスターズの田中です。

横幅画面いっぱいで表示している要素の中に、
スタイルシートで
「overflow-x: scroll;」および「white-space: nowrap;」
さらに、スマートフォンの慣性スクロールを有効にする
「-webkit-overflow-scrolling:touch;」
以上３つのプロパティを設定したブロック要素（など）を
加えていただくことで、
横にスライドできる箇所を作ることができます。

例）

横にスライドさせたいHTMLソース


RMSにてiframeを埋め込む場合も、
同様の仕組みを作成していただければ
無限に広がるのを防ぐことができるかと思いますので、
まずは一度、アクセスの少ない（もしくはダミーの）商品ページの
スマートフォン用商品説明文に挿入してご確認いただけますでしょうか。

例）




※各タグ・style属性は、RMSのスマートフォン用項目に本来入力できないため、
　バグを利用しており、今後ご利用いただけなくなる可能性がございます。

Answer

ご回答ありがとうございました。

それでご教授頂いたdivタグでiframeを埋め込んでみたのですが
上手くいきませんでした
（まずはgoldページでテストのスマホページを作ってそこからiframeタグでスライドバナーを呼び出し）

【iframe呼び出し元HTMLタグ】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝



＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

【iframeソース】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝





  
  
  
  
  
    html, body {
      margin: 0;
      padding: 0;
    }
 
    * {
      box-sizing: border-box;
    }
 
    .slider {
        width: 50%;
        margin: 100px auto;
    }
 
    .slick-slide {
      margin: 0px 20px;
    }
 
    .slick-slide img {
      width: 100%;
    }
 
    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
  





  
    
      
      【商品名A】
    
    
      
      【商品名B】
    
    
      
      【商品名C】
    
    
      
      【商品名D】
    
    
      
      【商品名E】
    

  
 
  
  
    $(document).on('ready', function() {
      $(".regular").slick({
        dots: true,
        autoplay: true,//自動再生あり
        autoplaySpeed: 2000,//自動再生でのスライダー切替スピード2000ms(2秒)
      });
    });
  



＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

ネットに上がってたサンプルソースそのままで作ってるものですから
どこを微調整すべきか分かりません。
どちらを直せば良いかお教え頂けないでしょうか。

以上、宜しくお願いします。

Answer

ECマスターズの田中です。

上手くいかなかった、というのは、
具体的にどのような問題が有りましたでしょうか。

原因究明も含め、実際に確認させていただく必要がございますので、
タグの設置を行われましたページのURLを
元質問右下の「投稿内容について報告する」より
お知らせいただきますようお願いします。
（表示確認用に、複製したダミーのページをご用意いただいても結構です）

設置自体ができなかった場合は、
どの画面でどのようなエラーメッセージが表示されたか
お知らせいただきますようお願いします。

Answer

私もこれ知りたいので
まとめソース頂けると助かります！
メニュー、くるくるーっとしたいです(´;ω;｀)

(以前うまくいかないとフォーラムで質問したらｊクアリー勉強してくださいと言われたものです☆ｊクアリー動画、完結すぎて、落とし込めませんでした(´;ω;｀))

Answer

＞ECマスターズ　田中様
ご返信ありがとうございます。
説明不足ですみません。
教えて頂いたDIVタグを入れてもiframeで挿入したHTMLがみれなくなってしまう
（ひたすら読み込んでいる？）
という症状でした。

PCで直接URL叩くとサイズ縦横にスクロールバーは出るものの
表示はされているのですが…

Answer

ECマスターズの田中です。

お知らせいただき、ありがとうございます。
実際のページを確認した上で、
私でも混同していた部分がございますので、

スライドする仕組みについて、
まずは一度ご確認いただきたい点がございます。

イーザッカさんのトップページは、
最初の返信にて申し上げた通りの仕組みなのですが、
「横にスライドさせたいHTMLソース」自体には、
slick.jsなどのスライドの仕組みは導入されておらず、
単純に横長なコンテンツが設置されているだけとなっております。

左右端に < および > のボタンがございますが、
あくまでもスクロールができる旨を表現するためのもののようで、
タップで内容をスクロールさせる、などの機能は持っておりません。

443さんでも、いただいたindex_slider_test.htmlに

= この下の行から ====================




（中略）

= この上の行まで ====================

のように、
私よりご案内差し上げたタグに、単純に画像を並べたタグを
ご設置いただくと、おわかりいただけるかと思います。

このように、単純に横長なコンテンツが設置されているだけですので、
自動スクロール・左右ボタンでスクロール、などの仕組みはございません。

そのような仕組みを導入する場合は、
私よりご案内差し上げたタグは使わずに、
純粋にjQueryプラグイン（slick.js）で作成されたスライダー（recommend_sp.html）を
iframeで、ページ幅100%でご設置いただいた上で、
スライダーの見た目を調整してご対応いただく必要がございます。
その場合、フリックによるスクロールができなくなる代わりに、
左右ボタンをタップしてのスクロール、スライド単位でのスクロールが
できるようになります。

443さん、pyonさん、それぞれ、
どちらの形式での実装をご希望でしょうか。
イーザッカさんと同じ仕組みをご希望でしたら、
まずは、私よりご案内差し上げた、単純に画像を並べた形での設置をお試しください。

Answer

＞ECマスターズ　田中様
ご返信ありがとうございます。

ご回答ありがとうございました。
教えて頂いた画像を並べるタイプの物でも十分利用出来るので
画像だけで解決するクーポン画像群とかはこちらで試したいと思います。
（今は横長のクーポン5種を縦に並べて5倍分のheightを使用してしまってました）

それでやはりiframeで呼び出してスライダーをやりたいものですから

Answer

ECマスターズの田中です。

私にて、無限に横幅が広がる現象を確認いたしました。
なお、使われているslick.jsのバージョンが若干古いようです。

まずは、最新版のslick.jsに差し替えた上で、動作をご確認いただけますでしょうか。

つまり、recommend_sp.htmlの先頭にある、計４つの各タグを、
下記内容に置き換えてみてください。






なお、このまま使い続けると、楽天外部のURLを利用する形になりますので、
各URLを直接開き、名前をつけて保存し、楽天GOLDにアップロードしたファイルのURLに
差し替えていただくことをオススメします。

無事動作するようでしたら、
スライダーの起動設定に
centerMode: true,
を加えてみてください。

Answer

ご回答ありがとうございました。
最新版に差し替えてはみたのですが
症状が変わりませんでした。
パソコンで同一URLを確認しましたが、
（縦のスクロールバーは出るものの）
表示はされているので
スマホで見る場合のみの症状かとは思いますが
どこを修正すれば良いか分かりません。

また、cssやjsのURLを開いてブラウザから保存してしまったせいか
SJISでファイルを保存してしまっていて
左右の矢印とスライド下部の丸も文字化けしてしまってます。

その後、ダウンロードツールで落とし直した物を再度アップしたのですが
すぐには反映されないのか知りませんが文字化けしたままです。

上記2点どのように修正すればよいでしょうか。
以上、宜しくお願いします。

Answer

ECマスターズの田中です。

> 症状が変わりませんでした。

一度、スライダー（.slider）の幅の指定を
width: 80%;
という、親要素の割合から、
width: 80vw;
という、画面幅の割合への変更をお試しいただけますでしょうか。

> 左右の矢印とスライド下部の丸も文字化けしてしまってます。

ファイルを提供しているサービスが、
CSSファイルの先頭になければならない文字コード指定の前に
コメントを記載していることが原因のようです。

CSSファイルを、
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css
から
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css
にご変更いただけますでしょうか。

Answer

ありがとうございました。
やっと出来ました！＼(^o^)／

去年からずっと業務の合間をみては独学で試していたのですが
なかなか上手く出来ず、こんな事であれば
変な意地を張らずに素直にフォーラムで聞いておけば良かったと後悔してます

あと副産物的に知ることが出来た
imgタグとスタイルシートだけで出来るスライドもページ作りに活かそうと思います。
長々とご対応頂きましてありがとうございました。