- 文字サイズ変更
- 小
- 中
- 大
解決済
スマホのスライドバナーがうまくいきません
- 相談者：非公開
- 2017/04/06 00:44
いつもお世話になっております。
楽天大学の
【SP】【ガイド】7スマホでもスライドショーを実装！コンパクトにまとめたスライドショーの作り方①
に従って作業したつもりなのですが、その表示したい箇所が真っ白で何も表示されません。
何を直せばよいかわかりません。
教えていただけないでしょうか？
宜しくお願い致します。
１）「flexslider.css」「jquery.flexslider-min.js」「common.js」「suraide20170406.html」
・GOLD保存フォルダは、
「flexslider.css」：/sp/css
「jquery.flexslider-min.js」：/sp/js
「common.js」：/sp/js
「suraide20170406.html」：/sp
「1.JPG」「2.JPG」「3.JPG」（スライドバナー使用各画像）：/sp/images
・各内容
・「flexslider.css」：資料を見て以下を最下位へ貼り付け
.slideshow2 {
width:950px;
}
・「common.js」：資料を見て必要コードを貼り付けました。
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
]);
]);
・「suraide20170406.html」：資料を見て作成しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>●スマホトップページのスライドバナー</title>
<link rel="stylesheet" href="http//www.rakuten.ne.jp/gold/SHOP-URL/sp/css/flexslider.css">
<script src="店舗URL/js/jquery.flexslider-min.js"></script>
</head>
<body>
<div class="slideshow2"><div class="flexslider"><ul class="slides">
<li><img src="http://image.rakuten.ne.jp/gold/furu2525/sp/images/1.JPG"></li>
<li><img src="http://image.rakuten.ne.jp/gold/furu2525/sp/images/2.JPG"></li>
<li><img src="http://image.rakuten.ne.jp/gold/furu2525/sp/images/3.JPG"></li>
</ul></div></div>
</body>
</html>
・スマホ トップ説明文（１）へ貼り付け（ECマスターズフォーラムの過去質問回答を参考に貼り付けました）
<div style="overflow:hidden;width:304px;margin:0 auto;"
>
<iframe
src="http//www.rakuten.ne.jp/gold/SHOP-URL/sp/suraide20170405.html" width="100%" marginwidth="0" height="75" marginheight="0" scrolling="no" frameborder="0" hspace="0" vspace="0" style="-o-transform:scale(0.5961);-webkit-transform:scale(0.5961);-moz-transform:scale(0.5961);-ms-transform:scale(0.5961);transform:scale(0.5961);-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;">
</iframe
>
</div
>
２）楽天大学の参考ダウンロード資料を添付させていただきました。
これを見て作業しました。
・【SP】【ガイド】7スマホでもスライドショーを実装！コンパクトにまとめたスライドショーの作り方①
楽天大学の
【SP】【ガイド】7スマホでもスライドショーを実装！コンパクトにまとめたスライドショーの作り方①
に従って作業したつもりなのですが、その表示したい箇所が真っ白で何も表示されません。
何を直せばよいかわかりません。
教えていただけないでしょうか？
宜しくお願い致します。
１）「flexslider.css」「jquery.flexslider-min.js」「common.js」「suraide20170406.html」
・GOLD保存フォルダは、
「flexslider.css」：/sp/css
「jquery.flexslider-min.js」：/sp/js
「common.js」：/sp/js
「suraide20170406.html」：/sp
「1.JPG」「2.JPG」「3.JPG」（スライドバナー使用各画像）：/sp/images
・各内容
・「flexslider.css」：資料を見て以下を最下位へ貼り付け
.slideshow2 {
width:950px;
}
・「common.js」：資料を見て必要コードを貼り付けました。
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
]);
]);
・「suraide20170406.html」：資料を見て作成しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>●スマホトップページのスライドバナー</title>
<link rel="stylesheet" href="http//www.rakuten.ne.jp/gold/SHOP-URL/sp/css/flexslider.css">
<script src="店舗URL/js/jquery.flexslider-min.js"></script>
</head>
<body>
<div class="slideshow2"><div class="flexslider"><ul class="slides">
<li><img src="http://image.rakuten.ne.jp/gold/furu2525/sp/images/1.JPG"></li>
<li><img src="http://image.rakuten.ne.jp/gold/furu2525/sp/images/2.JPG"></li>
<li><img src="http://image.rakuten.ne.jp/gold/furu2525/sp/images/3.JPG"></li>
</ul></div></div>
</body>
</html>
・スマホ トップ説明文（１）へ貼り付け（ECマスターズフォーラムの過去質問回答を参考に貼り付けました）
<div style="overflow:hidden;width:304px;margin:0 auto;"
>
<iframe
src="http//www.rakuten.ne.jp/gold/SHOP-URL/sp/suraide20170405.html" width="100%" marginwidth="0" height="75" marginheight="0" scrolling="no" frameborder="0" hspace="0" vspace="0" style="-o-transform:scale(0.5961);-webkit-transform:scale(0.5961);-moz-transform:scale(0.5961);-ms-transform:scale(0.5961);transform:scale(0.5961);-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;">
</iframe
>
</div
>
２）楽天大学の参考ダウンロード資料を添付させていただきました。
これを見て作業しました。
・【SP】【ガイド】7スマホでもスライドショーを実装！コンパクトにまとめたスライドショーの作り方①
このフォーラムへの質問は終了しました
今気になってる疑問、
セミナーに参加すれば解決するかも！？
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
- 返信者：非公開
- 2017/04/06 16:50
ECマスターズの田中です。
＞何を直せばよいかわかりません。
＞教えていただけないでしょうか？
複数ございますので、再発を防ぐためにも、
１つ１………（省略）………
＞何を直せばよいかわかりません。
＞教えていただけないでしょうか？
複数ございますので、再発を防ぐためにも、
１つ１………（省略）………
- 返信者：非公開（質問者）
- 2017/04/07 00:55
どうも有り難うございます。
教えていただいた内容へ修正してみたのですが、
やはり、スマホトップページの最上部の表示したい箇所が、白紙スペースになってしま………（省略）………
教えていただいた内容へ修正してみたのですが、
やはり、スマホトップページの最上部の表示したい箇所が、白紙スペースになってしま………（省略）………
- 返信者：非公開
- 2017/04/07 13:52
ECマスターズの田中です。
実際にGOLDにて公開されている「suraide20170406.html」を確認したところ、
http//www.raku………（省略）………
実際にGOLDにて公開されている「suraide20170406.html」を確認したところ、
http//www.raku………（省略）………
- 返信者：非公開（質問者）
- 2017/04/07 15:53
確認したのですが、そんなところに気づかず失礼しました。
しかし、やっぱり空白スペース表示となってしまいます。
ページ作成業者に頼むと高額なので自分でした………（省略）………
しかし、やっぱり空白スペース表示となってしまいます。
ページ作成業者に頼むと高額なので自分でした………（省略）………
- 返信者：非公開
- 2017/04/07 16:35
ECマスターズの田中です。
実際にGOLDにて公開されている「suraide20170406.html」を確認したところ、
FlexSliderを動作さ………（省略）………
実際にGOLDにて公開されている「suraide20170406.html」を確認したところ、
FlexSliderを動作さ………（省略）………
- 返信者：非公開（質問者）
- 2017/04/08 00:16
解決しました！
田中様に、一つの事にいつまでもお手数をお掛けしては、申し訳ないと思ったのですが、
親切・丁寧なご対応に感謝を申し上げます。
どうも有り………（省略）………
田中様に、一つの事にいつまでもお手数をお掛けしては、申し訳ないと思ったのですが、
親切・丁寧なご対応に感謝を申し上げます。
どうも有り………（省略）………
このフォーラムへの質問は終了しました
質問を検索する