ECステーション製スライドバナーでリンクが飛ばない【PC】

Question

お世話になります。

ECステーションにて作成したPC版のスライドバナーをクリックしてもリンク先に飛ばないことが発覚いたしました。
WindowsでもMacでもGoogle Chrome(最新)でスライドのリンクが正常に動作しません。

IEやEdgeだと普通に動作するのでChromeのバグでしょうか...?

ECマスターズ会員様の質問からサイトに入り、スライドバナーをクリックしてみましたが、
Chromeだと同じようにリンクに飛べません...

ちなみに以下、当店のリンクです。
https://www.rakuten.co.jp/kimonofun/

Accepted Answer

ECマスターズの田中です。

iPadのiOSを最新版（12.2）にアップデートしたところ、
Safariにて同じ現象を確認することができました。

さらに確認を進めていたところ、
iframe自体ではなく、それを囲むタグにて、
position:relative; と position: absolute; を組み合わせて
中身をページから浮かせる処理を行われていることがわかりました。

この浮いている構造が原因で、
アップデートをきっかけに、正確な横幅が取得できなくなって
横幅の拡がりが発生しているものと存じます。

スライドバナーの内容は修正せず、
それを囲むタグにて、先述の浮かせる構造を
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
上記Flexboxによる構造に変えることで解決できますので、

スライドバナー設置用のタグを、下記に置き換えていただいた上で、
表示をご確認いただきますようお願いします。



  
  
    
    
    
  



3箇所記載してあるstyle属性は、
class属性に変更して、外部CSSファイルの中に組み込んでいただいても結構です。
細かい微調整はCSSによる調整をお願いします。
どうしても調整しきれない部分がございましたらお知らせください。

Answer

ECマスターズの田中です。

ECステーションにて、
最新版のChromeで同様の症状が起こることを確認しており、
正常動作に向けて修正を行っておりますので、
ご不便をおかけして申し訳ありませんが、
修正完了まで、今しばらくお待ちいただきますようお願いいたします。

Answer

ECマスターズの田中です。

大変お待たせいたしました。
ECステーションにて、修正が完了しましたので、
お手数ですが、ECステーションの管理画面より
再度アップロードを行っていただきますようお願いします。

再度アップロードしても修正されない場合、
ECステーションのシステム、もしくはスライドバナーにて
キャッシュ（以前読み込んだデータ）を利用している可能性がございますので、

https://support.google.com/chrome/answer/95464?co=GENIE.Platform%3DDesktop&hl=ja&oco=0
プライベートブラウジングした状態で
ECステーションにログイン・アップロードを行っていただいた上で、
表示をご確認いただきますようお願いします。

Answer

ご対応ありがとうございます。

リンクは飛ぶようになったのですが、今度はページ送り(矢印)がなくなったのですが、こちらもバグでしょうか？

Answer

ECマスターズの田中です。

スライドバナーの作成画面で
「コントロール」を「表示」に設定しても、
左右の矢印が表示されない、ということですね。

状況を確認して改めてご返信させていただきますので、
今しばらくお待ちいただきますようお願いします。

Answer

ページ送りの件よろしくお願いいたします。

新たに、『レスポンシブ』にチェックを入れて、
スライドバナーをスマホで使用すると永遠と
横に広がり続ける事象も発生しているので
合わせて調査していただきましたら助かります。

ECステーション様に直接問い合わせるべきだとは思いますが、
あちらはいつもレスポンスが悪いため、
ECマスターズ様より直接伝えていただけると、
対応が早いかと思いこちらにて失礼致します。

↓正常な表示（拡大されないうちに慌てて撮っているため、少しずれてます。）###HR######IMG0afdb1336b6bbe917fcea298b38d5b25c.pngIMG0######BR###

Answer

確認端末はiPhoneX safari

↓（画面遷移やリロードにより画面が広がり続けます。）###HR######IMG0011b050f8c2be47a00186605181a5390.pngIMG0######BR###

Answer

ECマスターズの塚本です。

いただいたご質問ですが確認しまして
担当より週明けにご回答させていただきます。

お時間いただきますが今しばらくお待ちください。

Answer

ECマスターズの田中です。

スライドバナーが横に広がり続ける事象によって
ご不便をおかけして、申し訳ありません。

私にて確認したところ、
スライドバナーを構成するjQueryプラグインに
不具合があり、最新版に更新すると正常に動作することがわかりました。

ECステーションにも修正依頼を行っておりますが、
取り急ぎ修正される場合は、
大変お手数をおかけしますが、

https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css
をダウンロードし、ファイル名を
jquery.bxslider.4.2.12.min.css
にご変更いただき（.cssが表示されていない場合はその前まで）、

https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js
をダウンロードし、ファイル名を
jquery.bxslider.4.2.12.min.js
にご変更いただき（.jsが表示されていない場合はその前まで）、

完成した
「jquery.bxslider.4.2.12.min.css」「jquery.bxslider.4.2.12.min.js」
以上２つのファイルを、
楽天GOLDの「ecstation」フォルダ内の「toolbox」フォルダに、
同名ファイルを上書きする形でアップロードしていただきますよう
お願いいたします。

なお、楽天GOLDにおけるjsファイルの上書きは
反映に1時間程度かかる可能性がございますことをお含みおきください。

ご不便をおかけして申し訳ありませんが、
何卒よろしくお願いいたします。

Answer

ECマスターズの田中です。

只今、ECステーションより
スライダーが広がる問題が解決した旨の連絡がございました。

既存のスライドバナーの問題を解決するには
再アップロードが必要となりますので、

度々お手数をおかけしますが、
ECステーションのスライドバナーにて、
再度、アップロードを行っていただき、
問題なく動作することをご確認いただきますようお願いします。
（前回ご案内差し上げたアップロード作業は不要となります）

Answer

ご対応ありがとうございました。確認しましたところ、
スマホ・PCで確認した場合期待通りの表示になるのですが、

タブレットで表示した場合スーパーリロード後には
期待通りの表示になるのですが、カテゴリページ・商品ページを開くと
スライドバナーが大きく表示されてしまいます。

これにはどう対応したら良いでしょうか？###HR######IMG0ecce04e240d9718bf6d6c8df9889d95b.pngIMG0######BR###

Answer

ECマスターズの田中です。

弊社のiPadにて確認したところ、
添付ファイルの通り、問題なく表示されておりました。

今一度、タブレットにて、プライベートブラウズをオンにした状態で
表示をご確認いただけますでしょうか。
https://support.apple.com/ja-jp/HT203036###HR######IMG0daf511f6c371bd61a6b49465f57cb242.jpegIMG0######BR###

Answer

ご確認ありがとうございます。

このページからカテゴリページや商品ページに移動したらレイアウトが崩れます。

現在、プライベートブラウズで確認してみましたがレイアウトが崩れました。

Answer

ECマスターズの田中です。

ご確認いただき、ありがとうございます。

ECステーションにも確認を取りながら、
原因を調査いたします。

社内で同じ現象が確認できないため、
お時間をいただく可能性があり、
また、ご協力をお願いする場合もあるかと思いますが、
何卒よろしくお願いいたします。

Answer

スーパーリロード・再起動・プライベートブラウズでも
表示崩れのままです。

PCのChromeの検証等では、正常に表示され、
確認環境のipad mini ・ ipad Air のsafariでは、
先の画像のようにスライドバナーが設定を突き破って
width100％になってしまいます。

ECステーションのバグなのか、自分のミスなのかわからないところも厄介です。

Answer

ECマスターズの田中です。

> スーパーリロード・再起動・プライベートブラウズでも
> 表示崩れのままです。

それでは、履歴データの削除ではいかがでしょうか。
https://i-bitzedge.com/tips/how-to-clear-safari-data
上記ページの手順に沿って、「履歴とWebサイトデータを消去」を
お試しいただきますようお願いします。

Answer

履歴データも毎回消していますが、変わりありません...。

Answer

ECマスターズの田中です。

> 履歴データも毎回消していますが、変わりありません...。

ご対応ありがとうございます。
引き続き、原因を調査いたしますので
今しばらくお待ちいただきますようお願いします。

Answer

ありがとうございました。
おかげさまで解決いたしました。

また、わかりやすいページをご紹介いただきありがとうございます。
Flexboxについて詳しく学んでみようと思います。