https化によりwebスライダーのレイアウトが崩れた

Question

お世話になっております。
先日自社サイト（Eストアー）のhttps化を無事に完了したのですが、1つ問題点があります。
https://www.sayori.co.jp/
サイトを見ていただいたらわかるように、左側に設置してあるスライダーのレイアウトが崩れております。http://⇒https://に一括置換しただけなのですが、なぜか崩れてしまいました…

当方CSS等に詳しくないため、スライダーを設置するときもコピペで置き換えただけなので、
どこの記述が問題なのかがさっぱりわかりません。

もし可能であれば対処法を教えていただけましたら幸いです。
宜しくお願いいたします。

Answer

ECマスターズの田中です。

いただいたURLにて、スライダー表示用に埋め込まれた
slideshow01.html の動作を確認したところ、
詳しい原因は不明なのですが、
外部スタイルシートを読み込むlinkタグにて、
css/common.css 用のタグが、異なるURLを読み込もうとして
エラーを起こしていることが分かりました。

css/common.css
上記URLを、
https://www.sayori.co.jp/slideshow/css/common.css
このように絶対パスにご変更いただいた後、
改めて表示が乱れるかどうかをご確認いただきますようお願いします。

Answer

ECマスターズ田中様お返事ありがとうございます。変更してみましたが、やはりレイアウトが崩れてしまいます… ちなみに、https化する前はこのように表示されておりました。(添付画像のとおり) http時代(正常に表示されていた時)のソースを記載します。バレエサヨリweb本店　スライドバナー01 $(function(){ $(window).load(function(){ var setWrap = $('.slideShow'), setMainView = $('.mainView'), setThumbNail = $('.thumbNail'), setMaxWidth = 520, setMinWidth = 300, thumbNum = 6, thumbOpc = 0.5, fadeTime = 1000, delayTime = 5000, sideNavi = 'on', // 'on' or 'off' autoPlay = 'on'; // 'on' or 'off' setWrap.each(function(){ var thisObj = $(this), childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiFst = mainUl.find('li:first'), childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last'); thisObj.css({width:setMaxWidth,display:'block'}); mainLi.each(function(i){ $(this).attr('class','view' + (i + 1).toString()).css({zIndex:'98',opacity:'0'}); mainLiFst.css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime); }); thumbLi.click(function(){ if(autoPlay == 'on'){clearInterval(setTimer);} var connectCont = thumbLi.index(this); var showCont = connectCont+1; mainUl.find('.view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'});}); mainUl.find('.view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'});}); $(this).addClass('active'); $(this).siblings().removeClass('active'); if(autoPlay == 'on'){timer();} }); thumbLi.css({opacity:thumbOpc}); thumbLiFst.addClass('active'); // メイン画像をベースにエリアの幅と高さを設定 var mainLiImg = mainLi.find('img'), baseWidth = mainLiImg.width(), baseHeight = mainLiImg.height(); // レスポンシブ動作メイン imgSize(); function imgSize(){ var windowWidth = parseInt($(window).width()); if(windowWidth >= setMaxWidth) { thisObj.css({width:setMaxWidth}); childMain.css({width:baseWidth,height:baseHeight}); mainUl.css({width:baseWidth,height:baseHeight}); mainLi.css({width:baseWidth,height:baseHeight}); thumbLi.css({width:((setMaxWidth)/(thumbNum))}); } else if(windowWidth < setMaxWidth) { if(windowWidth >= setMinWidth) { thisObj.css({width:'100%'}); childMain.css({width:'100%'}); mainUl.css({width:'100%'}); mainLi.css({width:'100%'}); } else if(windowWidth < setMinWidth) { thisObj.css({width:setMinWidth}); childMain.css({width:setMinWidth}); mainUl.css({width:setMinWidth}); mainLi.css({width:setMinWidth}); } var reHeight = mainLiImg.height(); childMain.css({height:reHeight}); mainUl.css({height:reHeight}); mainLi.css({height:reHeight}); var reWidth = setThumbNail.width(); thumbLi.css({width:((reWidth)/(thumbNum))}); } } $(window).resize(function(){imgSize();}); imgSize(); // サムネイルマウスオーバー var agent = navigator.userAgent; if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){ thumbLi.hover(function(){ $(this).stop().animate({opacity:'1'},200); },function(){ $(this).stop().animate({opacity:thumbOpc},200); }); } // ボタン移動動作 function switchNext(){ var setActive = thumbUl.find('.active'); setActive.each(function(){ var listLengh = thumbLi.length, listIndex = thumbLi.index(this), listCount = listIndex+1; if(listLengh == listCount){ thumbLiFst.click(); } else { $(this).next('li').click(); } }); } function switchPrev(){ var setActive = thumbUl.find('.active'); setActive.each(function(){ var listLengh = thumbLi.length, listIndex = thumbLi.index(this), listCount = listIndex+1; if(1 == listCount){ thumbLiLst.click(); } else { $(this).prev('li').click(); } }); } // サイドナビボタン（有り無し） if(sideNavi == 'on'){ childMain.append(''); var btnPrev = thisObj.find('.btnPrev'),btnNext = thisObj.find('.btnNext'),btnPrevNext = thisObj.find('.btnPrev,.btnNext'); if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){ btnPrevNext.css({opacity:thumbOpc}).hover(function(){ $(this).stop().animate({opacity:'0.9'},200); },function(){ $(this).stop().animate({opacity:thumbOpc},200); }); } else { btnPrevNext.css({opacity:thumbOpc}); } btnPrev.click(function(){switchPrev();}); btnNext.click(function(){switchNext();}); } // 自動再生（有り無し） if(autoPlay == 'on'){ function timer(){ setTimer = setInterval(function(){ switchNext(); },delayTime); } timer(); } }); }); }); ###HR######IMG026815c3e7e9b4bd39eafbf24522622a6.jpegIMG0######BR###

Answer

ECマスターズの塚本です。

いただいたご質問ですが、
本日担当が休みをとっておりまして、
明日の回答となります。

大変ご迷惑おかけしますが、
回答まで今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。

ソースをご記載いただきありがとうございます。
いただいたソースを現在のソースと比較したところ、

の直上にあったはずの



上記、resetCSSの読込がなくなっておりましたので、
一度、URLの http:// を https:// に修正していただいた上で、
再度記載して、表示をご確認いただけますでしょうか。

Answer

お返事ありがとうございました！
そのままhttpsに修正して読み込ませようとした所、CSS提供元であるhttp://black-flag.net/がそもそもhttps化されていなかったので読み込みエラーになりました…。

なので提供元のhttp://black-flag.net/data/css/reset.cssにアクセスし、https://www.sayori.co.jp/slideshow/css/common.cssの記述の上にコピペした所、正常に表示されました。

コピーライトが気になる所ではありますが、提供元のサイトを読んだら添付画像のとおりライセンスフリーでしたので現状はコピペのままで問題ないかなと思うのですが…

とりあえず表示が直りましたので、ステータスを【解決した】に変更させていただきます！
ありがとうございました！###HR######IMG06c02e503444975617006139a080da121.jpegIMG0######BR###

Answer

ECマスターズの田中です。

無事解決して何よりです。
コピーライトを含めてそのままコピーされており、
ライセンス上も特に問題ございませんので
ご安心ください。