コピペでOK!楽天のページにjQueryで動くバナーを設置する方法

公開日:  最終更新日:2018/06/21

【新しい記事】こちらもあわせてどうぞ

【初心者向け】jQueryでスライドバナー最新版(2018年6月)

「売れている楽天のショップ」 「担当のECCからここを参考にしたら良いと言われたショップ」 「なんかかっこいいなと思ったショップ」 それらのショップにはほとんどの場合「動くバナー」が設置されていたりしませんか?

「どうやってやるんだろう」「うちの店舗では無理だな」そんな風に思っている担当者の皆様ご安心下さい。ハカセの研究室なら簡単にコピペだけで導入出来ます。しかも無料です。

jqueryロゴ入りイメージ

今まで出来なかった事が出来る。そう、jQueryならね。

いきなりうざい感じで始まりましたが、本日はやってみたいと考えてる方も多いはずの「jQuery(ジェイクエリー)」を使用した動くバナーの導入方法を説明します。

jQueryとは?
オープンソースのJavaScriptライブラリの一つ。2006年1月にJohn Resig氏が最初のバージョンを公開し、現在は有志プログラマによる開発者集団「jQuery Team」が開発・メンテナンスしている。
IT用語辞典 e-words より

これだけ読んでもさっぱり何の事かわからないかも知れません。実際私は1ミリも解りませんが、簡単に説明するとJavaScriptというプログラム言語を簡単にしてくれる拡張パーツみたいなものです。(多分…)

「簡単にしてくれる」と書きましたが、正確には「少ないコードで」と言った方が正しいかも知れません。コードが少なくて済めば当然ページは軽くなるので、読み込みで待たされる様な事も少なくなります。

さらに大きなメリットとしては、ほとんどのデバイスのほとんどのブラウザで動いてくれると言う事があります。

一昔前、ホームページの動くパーツと言えばgifアニメかFlashでした。Flashはプレイヤーがインストールされていないと再生出来ない(動かない)うえ、iPhoneやiPadなどのiOSでは実質再生不可だったりと不便でした。(もちろん便利な点もたくさんあります)

そこでここ数年人気になって来たのがjQueryを使った数々の仕掛け。動くバナー、ロールオーバーのアクション、スムーススクロールなど実に多くの事に使われています。

もちろん私も使ってます。

このサイトでも派手なところから地味なところまで、結構な数のjQueryのコードが動いています。ちなみに画面左下にあるページ上部へ戻るボタンを押すとスムースに上部までスクロールするのですが、そちらのコードはこんな感じ。

	$(function(){
		$('a[href^=#]').click(function(){
			var speed = 500;
			var href= $(this).attr("href");
			var target = $(href == "#" || href == "" ? 'html' : href);
			var position = target.offset().top;
			$("html, body").animate({scrollTop:position}, speed, "swing");
			return false;
		});
	});
	

ちなみにこのサイトを参考にしました。
KLUTCHE
[browser-shot width=”600″ height=”400″ url=”http://klutche.org/archives/536/”]

たったこれだけのコードで「アンカー(#)へのリンクをクリックしたらニューンとスムーズにスクロールしろ」的な事を実現しているのです。仕組みは良くわかりませんがすごい奴です。jQueryは出来る子です。

さて、じゃあそろそろ本題。どうやってjQueryを(正しくはjQuery依存のコードを)楽天のページで動かすのか。

jQueryバナー実装の流れ

  1. バナーの画像を用意
  2. jQueryファイルのリンクを貼る
  3. JavaScriptとHTMLを書く
  4. CSSで調整(必要であれば)
  5. iframeで商品ページやカテゴリページに読み込む

なぜわざわざiframeで読み込むのかというと、商品ページやカテゴリページなど楽天RMSで作るページにはscriptタグが使用出来ないからです。

参考記事
楽天ショップで外部スタイルシートを利用する方法

バナーの画像を用意

こればっかりはこちらで用意出来ないので、ご自分でご用意下さい。記事内ではダミーの画像を使用します。

jQueryファイルのリンクを貼る

jQueryの本家サイトから、最新のjQueryライブラリファイルを ダウンロードして下さい。「Download the compressed, production jQuery 2.0.2」のリンクを右クリックしてファイルを保存して下さい(Macの方はoption+クリック)。

ダウンロードした「jquery-2.0.2.min.js」をGOLDにアップします。

アップしたjQueryライブラリファイルを読み込むタグを、GOLDのページの</body>の直前あたりにコピペ。(ファイルのURLを書き換えるのを忘れずに)

<script type="text/javascript" src="アップした「jquery-2.0.2.min.js」のURL"></script>

JavaScriptとHTMLを書く

ここでちょっと補足説明。「jQuery スライドバナー」とか「jQuery バナー」とかで検索すると色々なコードが公開されていますが、そのコードには「プラグイン」タイプと「コードのみ」のタイプがあります。

「プラグイン」タイプの場合は、コードが外部ファイル(~.jsというjavascriptファイル)になっているので、上で読み込んだjQueryのライブラリファイルと同じようにGOLDにアップした上でリンクを貼ります。

<script type="text/javascript" src="プラグインの「~.js」のURL"></script>

コードのみの場合は<body></body>の直前に<script type=”text/javascript”></script>で囲んで該当のコードを記載します。

※なんでjavascriptを<body>の最後に書くかって言うのは、めんどくさいので説明しませんがその方がページの読み込みが早いからと覚えておいて下さい。

実際にやってみる
ここを参考に作って見ます。 jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法|BlackFlag [browser-shot width=”600″ height=”400″ url=”http://black-flag.net/jquery/20130423-4566.html”]

リンク先の説明通りに作ってみれば、ほとんど調整しなくても簡単に出来るはずです。(感謝です)

GOLDにアップするページのソースはこんな感じになるはずです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>jQueryを使ったスライドバナー</title>
<style type="text/css">
/* .slideShow
------------------------- */
.slideShow {
	margin: 0 auto;
	text-align: left;
	display: none;
}

/* .mainView
------------------------- */
.slideShow .mainView {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.slideShow .mainView ul {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.slideShow .mainView ul li {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
}
.slideShow .mainView ul li img {
	width: 100%;
}

/* .thumbNail
------------------------- */
.slideShow .thumbNail {
	width: 100%;
	overflow: hidden;
}

.slideShow .thumbNail ul {
	width: 110%;
}

.slideShow .thumbNail ul li {
	float: left;
	display: inline;
	overflow: hidden;
	cursor: pointer;
}

.slideShow .thumbNail ul li img {
	width: 100%;
}

.slideShow .thumbNail ul li.active {
	filter: alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}

/* sideNavi
------------------------- */
.slideShow .mainView .btnPrev,
.slideShow .mainView .btnNext {
	top: 0;
	width: 5%;
	height: 100%;
	position: absolute;
	z-index: 100;
}
.slideShow .mainView .btnPrev {
	left: 0;
	background: #ccc url(../img/btnPrev.png) no-repeat center center;
}
.slideShow .mainView .btnNext {
	right: 0;
	background: #ccc url(../img/btnNext.png) no-repeat center center;
}


/* =======================================
	ClearFixElements
======================================= */
.slideShow ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.slideShow ul {
	display: inline-block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}


.slideShow { margin:0;}/*全体の入れ物を左寄せに*/

</style>
</head>

<body>
<div class="slideShow">


<!-- ・各画像のURLを使用するものに変更する
・リンク先(#1から#6まで)を必要に応じて変更する -->

<div class="mainView">
<ul>
<li><a href="#1"><img src="banner01.jpg" alt=""></a></li>
<li><a href="#2"><img src="banner02.jpg" alt=""></a></li>
<li><a href="#3"><img src="banner03.jpg" alt=""></a></li>
<li><a href="#4"><img src="banner04.jpg" alt=""></a></li>
<li><a href="#5"><img src="banner05.jpg" alt=""></a></li>
<li><a href="#6"><img src="banner06.jpg" alt=""></a></li>
</ul>
</div><!--/.mainView-->

<div class="thumbNail">
<ul>
<li><img src="banner01.jpg" alt=""></li>
<li><img src="banner02.jpg" alt=""></li>
<li><img src="banner03.jpg" alt=""></li>
<li><img src="banner04.jpg" alt=""></li>
<li><img src="banner05.jpg" alt=""></li>
<li><img src="banner06.jpg" alt=""></li>
</ul>
</div><!--/.thumbNail-->

</div><!--/.slideShow-->

<!-- ↓のsrc=""の中をアップしたライブラリファイルのURLに変更 -->
<script type="text/javascript" src="jquery-2.0.2.min.js"></script>

<script>
$(function(){
	$(window).load(function(){
		var setWrap = $('.slideShow'),
		setMainView = $('.mainView'),
		setThumbNail = $('.thumbNail'),
		setMaxWidth = 800,
		setMinWidth = 320,
		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('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
				var btnPrevNext = $('.btnPrev,.btnNext'),btnPrev = $('.btnPrev'),btnNext = $('.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();
			}
		});
	});
});
</script>
</body>
</html>

AKIKO様のご指摘によりスタイルシートを一部修正。2013/11/19

見本はこんな感じです。→見本

※文字コードを楽天ページ用に「euc-jp」に修正しました。2013/10/22

CSSで調整(必要であれば)

今回は参考にしたblack-flag.netさんで全部用意してくれてたので、サクッとコピペのみで行けました(感謝・感謝)が、iframeで読み込む事を考えて下記の1行を追加しました。

		.slideShow { margin:0;}/*全体の入れ物を左寄せに*/
		

iframeで商品ページやカテゴリページに読み込む

出来たページの動作確認をしたら、GOLDにアップして、バナーを置きたいページの置きたい部分に下記のコードを追加します。

<iframe src="アップしたバナーのページのURL" frameborder="0" scrolling="no" width="460" height="400" align="left"></iframe>

こんな感じで表示されるはずです。


なんだそんなに難しくないじゃん

どうでしょう、私の文章力の無さで説明は長くなってしまいましたが、仕組みさえわかってしまえばそんなに難しくないのではないでしょうか。

動くバナーを設置したらすぐ売上が上がるってものではありませんが、人気【ひとけ】を演出できたり、狭いスペースで複数の商品へのリンクが設置出来たり、動く事で目立ったりとメリットは少なからずあります。

ネット上にはまだまだたくさんのコードが公開されていますので、色々と導入してみてはいかがでしょう(やりすぎ注意です)。毎日少しづつでも「お客さんが来たくなる売り場」「安心して買いたくなる売り場」を作っていく事が大事だと思います。

それではまた。

コメント

  1. mmmtonatto より:

    博士様

    こんにちは。
    とっても役に立つ記事をありがとうございます!

    色々調べたのですが、迷子になりつつあるので、
    質問させてください。

    場違いだったら消去してください!

    今楽天GOLDで編集しているのですが、下記のようなエラーが出てiframeが表示できません!
    「The XSS Auditor refused to execute a script in ‘xxx’ because its source code was found within the request. The auditor was enabled as the server sent neither an ‘X-XSS-Protection’ nor ‘Content-Security-Policy’ header. 」

    何かご助力いただければと思います。

    よろしくお願いします!

    • ハカセ より:

      mmmtonatto様
      コメントありがとうございます。
      「XSS Auditor」ってのはGoogle Chromeなどのブラウザに入っている保護機能の事らしいので、他のブラウザで見てみるとかすると見られるかも知れません。
      私もよくわからなくてごめんなさい。よろしくお願い致します。

  2. mmmtonatto より:

    ありがとうございます!
    プレビュー表示だった為でした!
    ご返信ありがとうございました!

  3. 安森 盛貞 より:

    博士さま

    初心者ですので、申し訳ございませんが
    もう少し詳しく教えていただければ助かります。

    ダウンロードした「jquery-2.0.2.min.js」を
    FTPでアップしました。

    アップしたjQueryライブラリファイルを読み込むタグを、GOLDのページというのがいまいち勉強不足で分かりません。

    当方、楽天でTOPページはGOLDではなく直接RMSを利用しております。

    お手数ですが宜しくお願いします。

    • ハカセ より:

      安森さま

      返事が遅くなりましたがコメントありがとうございます。

      まず、前提としてjQuery などjavascriptってやつは、RMSで作るページでは使えません。(使おうとしても”許可されてないHTMLが含まれてます”みたいなエラーが出ます)

      そのためGOLDの領域(FTPでアップする奴)にHTMLファイルを用意して、そこでjQueryを動かす必要があります。

      この記事で言うと「GOLDにアップするページのソースはこんな感じになるはずです」のあとのコードをメモ帳などにコピペして「○○.html」というファイル名で保存し、FTPでアップする必要があります。そこに「jquery-2.0.2.min.js」を読み込みますが、それはコードの中にある

      <script type="text/javascript" src="jquery-2.0.2.min.js"></script>

      って部分で読み込んでいます。

      「src=”jquery-2.0.2.min.js”」の部分でアップした「jquery-2.0.2.min.js」のURLを参照しているのですが、HTMLファイルと同じディレクトリ(フォルダ)にアップしたのであればそのままでいけますが、別のディレクトリにアップしたのであれば、変更する必要があります。(URLの参照の仕方が分からなければこちらを参考にしてみて下さい。絶対パスと相対パス|WEBページ作りのお勉強

      そしてそのFTPでアップしたHTMLファイルを「iframeで商品ページやカテゴリページに読み込む」以下のコードを参考に必要なページ(バナーを設置したいページ)に読み込むって感じです。(FTPでアップしたファイルのURLは、アップ先のフォルダを特に指定していなければ、「http://www.rakuten.ne.jp/gold/あなたのお店の固定URL/○○.html」の様になるはずです。)

      文章が下手で申し訳ありませんが、お役に立てば幸いです。

  4. 平山 より:

    初めましてこんにちは!

    わかりやすい、説明ありがとうございます。

    全て、順調に作業をできたのですが、

    最後に楽天GOLDにアップして

    iframeで設定をすると、

    GOOGLE CHROMEでは、表示されるのですが、

    IEでは、iframeの場所が真っ白になってしまいます。

    何か方法はありますか?

    • ハカセ より:

      平山様
      コメントありがとうございます。

      う~ん。ソースを見てみないとなんとも言えませんが、
      考えられる原因としては「HTMLの文法間違い」や「文字コードの間違い」などでしょうか。

      まずはソースコードをこちらのページなどでチェックしてみてはいかがでしょう。
      HTML構文チェックサービス

      文字コードに関しては楽天のページは基本的に「euc-jp」です。
      って書いてて気が付きましたが、見本のHTMLは「utf-8」になってますね・・・。
      (直しておきます)

      どうしてもわからなければ、ソースコードをメールで頂くか、サイトのURLを教えて下されば、分かる範囲でお答えしますよ。(直ぐに返事出来るとは限りませんが・・・)
      よろしくお願いします。

  5. 平山 より:

    早速の返信ありがとうございました!

    教えていただいたチェックサイトで調べると !DOCTYPE html

    の部分の指示ができていなかったようです。

    そこの部分を修正すると解決できました。

    大変助かりました!ありがとうございます!!

  6. 平山 より:

    あと追加で質問なのですが、

    スライドショーをランダムに表示するなどは、簡単に指示できるものでしょうか?

    連続での質問失礼します。

    • ハカセ より:

      平山様
      解決してなによりです。
      技術系の問題は解決しないとヘコミますよね。私も現在進行中で問題が・・・

      それは置いといて、ランダム表示の件ですが、javascriptを理解していれば出来ます。
      がそんなに簡単では無いと思います。ので現実的なところで言えば、ランダム表示に対応したjQueryのプラグインなどを探すのが早いと思います。

      色々わかって来たらチャレンジしてみるのも面白いと思いますよ。

  7. toriii より:

    博士様

    とてもわかりやすい解説でありがたく拝読致しました。
    平山様と同じ現象について相談させてください。

    上記コードを参考にhtmlを組みGOLDへアップロード
    →iframeで読み込み
    →IEは真っ白、IE以外のブラウザでは表示OK。

    タグを確認するとUTF-8になっていたので、平山様とのやりとりを拝読し、意気揚々とeuc-jpへ変更すると、IEのみならず、SafariやChromeでも真っ白の表示になってしまいました。

    <UTF-8>
    IEのみ真っ白、他ブラウザ表示OK。

    <EUC-JP>
    全ブラウザ真っ白。

    DOCTYPE宣言が原因なのか?と平山様の書き込みと見本ページのソースを手がかりにタグを見てみましたが、良くわからなくなってしまいました。

    DOCTYPEは

    と書いていれば間違いないのでしょうか。。?
    教えて頂けると助かります。
    よろしくお願いします。

    • ハカセ より:

      toriii様コメントありがとうございます。

      doctypeはこんな感じであれば大丈夫だと思います。

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
      <title>無題ドキュメント</title>
      </head>
      
      <body>
      </body>
      </html>
      

      あとはエディタ(HTMLを書いているソフト)がeucに対応している必要があると思います。
      宣言文だけでなくソフト側から文字コードを変更する必要があるのかも知れません。

      参考になれば
      Terapadで簡単コード変換

      あとはソースコードを見てみないとなんとも言えないかなぁ・・・。

  8. toriii より:

    博士さま

    ご教授ありがとうございます。
    エディタはDream Weaverを使っています。

    新規ファイルを
    宣言を4.01 Transitionalで作成し、下記宣言で書きましたがやはり真っ白になります。
    UTF-8にすればIE以外は表示OK。

    他に疑えるところはありますでしょうか。。?

  9. toriii より:

    宣言を書いたはずが、、表示されませんでした。
    すみません。。

    ちなみにTerapadはWindowsのみに対応しているようで使えませんでした。

    • ハカセ より:

      toriii様

      Dreamweaverでしたら、そのHTMLファイルを開いて、
      「修正→ページプロパティ→タイトル/エンコーディング」で
      エンコーディングが「日本語(EUC)」になっていますでしょうか?

      症状だけを見ると文字コードが起因の様に思われるのですが、
      これで直らなければちょっと僕の知識では厳しそうです・・・。

      お役に立てれば良いのですが・・・

  10. toriii より:

    博士さま

    度々ありがとうございます。
    タイトル/エンコーディングは「日本語(EUC)」になっていました。

    試しにiframeで読み込んでいるページを直接開いてみても、
    UTF-8だとIE以外は表示OK、EUC-JPだと表示不可でした。

    更に試しに博士さまが公開されているタグを変更せずそのまま貼付けても同様の現象、ソースを見ると文字化けがあるという状態です。

    文字コードっぽいですよねぇ。。
    みなさんが設置出来ているという事は当方だけのなにかだと思います。
    とても単純なミスのような気がしているのですが、見つけられず。。
    もう少し探ってみます。

    • ハカセ より:

      toriii様

      コピペの時点で文字化けしてるって事は
      やっぱり文字コード周りな気がします・・・

      ソースを一旦テキストエディタなどにコピペし、
      テキストエディタにペーストしたものを再度コピーしなおして、
      改めて新規のHTMLファイルにペーストしてみてはいかがでしょうか?

      コピペ時にクリップボードにテキスト以外の情報までコピーされる事は意外とよくあります。

      また、ブラウザで表示されない状態の時(真っ白の時)、ブラウザでソースコードを表示して、コードが文字化けしているようでしたら、多分文字コード周りの問題だと思います。(先に言うべきでした・・・w)

      解決してみれば大したこと無い問題も、解決までは苦労するものです。諦めずに頑張ってください。

      よろしくお願い致します。

  11. toriii より:

    博士さま

    解決しました!
    原因が分からずじまいなのですが、参考サイトでご紹介されていた「KLUTCHE」のサイトのタグを使うとIE6からモダンブラウザまで問題なく表示することが出来ました。
    タグを見ても違うところはJqueryのバージョンぐらい…?

    ひとまずご報告させて頂きました。
    これからもよろしくお願いします!

    • ハカセ より:

      toriii様
      とりあえず解決して何よりです。
      jqueryのバージョンですか、僕の苦手とする分野なので
      そうなるとお手上げかも知れません。

      お役に立てませんでしたが、
      WEBページの作成は問題解決の連続ですので、
      これからも頑張ってください。
      試行錯誤の過程はメモ書きでもログを残すようにすると
      その後の成長が段違いだそうです。
      (僕も心がけてはいるのですが・・・)

      今後ともよろしくお願い致します。

  12. AKIKO より:

    博士様

    はじめまして、私は超初心者ですがよろしくお願い致します

    楽天のTOPページに画像のスライドショーを設置したく調べていまして

    こちらのサイトにたどり着きました。

    コピペをさせて頂き、楽天GOLDにアップし一応動作確認まではできましたが

    修正したい部分がありご連絡させて頂きました。

    メイン画像とサムネイル画像の横幅を合わしたく色々やってみましたが

    サムネイル画像の方が短く両端が短くなってしまいます。

    【ここを参考に作って見ます。】のBlack FlagさんのPAGEで見ますと

    メイン画像とサムネイル画像の両端が合っておりこの様に修正したいのですが

    恐れ入りますがご回答頂きましたら大変ありがたいです。

    よろしくお願い致します。

    • ハカセ より:

      AKIKO様
      コメントありがとうございます。

      確かに今見たところ、サイズあってませんね。

      スタイルシートに下部のこの部分を

      .slideShow ul {
      	display: inline-block;
      	overflow: hidden;
      }
      
      .slideShow ul {
      	display: inline-block;
      	overflow: hidden;
      	margin: 0;
      	padding: 0;
      }
      

      こんな感じにしてもらうと直るはずです。
      ソースは後で直して置きます。

  13. AKIKO より:

    博士様

    早々のご回答ありがとうございました。

    スタイルシート部分書き直しましたらうまくいきました。

    今からHP上にアップいたします。

    本当にありがとうございました。

    • ハカセ より:

      AKIKO様
      こんな僕でも多少はお役に立てた様で何よりです。これからもよろしくお願い致します。

  14. yama より:

    ハカセさま
    いつも参考にしております。

    win7、IE10で「互換表示ON」にしたところ、動くバナーが見えなくなってしまいました。

    他のブラウザやiPadでは普通に見ることが出来ます。

    何か足りない点はあるでしょうか?

  15. solid より:

    ハカセ様

    この度こちらのjQueryバナー実装を拝見させて頂き
    新しい楽天サイト内にて準備をしております。

    とても参考になり助かっております。。

    お陰様で無事作業は完了しましたが、2点ほど問題がございまして
    1.IEで見た場合、フレームの淵(左側と上側のみ)に青いラインが入っており
    修正が出来ませんでした。
    はかせ様のサンプルバナーも同様にこちらのPCのIEだと表示されております。
    クローム等ではラインはなく問題ございません。

    2.メインビジュアルの画像箇所の<a>タグにリンクを貼っておりますが
    ページ移動をせず、jQuery内でリンク先が無理やり表示される状態となっております。

    大変恐縮ではございますが、ご回答頂けますと幸いです。

    • ハカセ より:

      solid様
      コメントありがとうございます。
      お問い合わせの件

      1 IEでみた時青い線が出る

      これは画像にリンクを貼ると古いブラウザ(特にIE)ではリンクカラーのボーダー(枠線)が表示される事から発生しています。これを解決するには、スタイルシートに下記の一行を加えて下さい。

      a img { border:none;}
      

      これは a を指定した img の border を無しにするって意味です。

      2 リンクがiframe内で表示される

      これも私の説明不足でしたが、jQueryのバナーはGOLDでのページ。表示させるのはRMSで作ったページなど別のページ。バナーにリンクを貼った場合そのままだとバナーのページでリンク先に飛んでしまいます。なのでリンクを貼っている部分の a タグを下記の様に修正して下さい。

      <li><a href="#1" target="_parent"><img src="banner01.jpg" alt=""></a></li>

      a の部分に  target=”_parent” が追加されています。これはリンクを親要素(iframeを読み込んでいる元のページ)で表示させるという意味です。

      説明が若干雑になってしまいましたが、お役に立てれば幸いです。

      • solid より:

        ハカセ様

        ご返信頂きありがとうございます

        お陰様で、2点どちらも無事に解決でき
        大変納得のいくHPへと仕上がっております
        本当にありがとうございました。

        今後とも拝見させて頂きますので、よろしくお願い致します。

  16. yu より:

    博士様

    こんにちわ。いつも参考にさせて頂いております。
    さっそくですが、jquery-2.0.2.min.jsファイル、作ったバナー画像そして御社サイト内の上記htmlをコピペにて作成したファイルをcyberduckにてupしました。

    そのhtmlファイルをifremeにて楽天rmsに貼りましたがいまいち動作してくれません・・

    htmlの書き換え等がきちんとできていないのか・・?

    ftpでupしたファイルもブラウザにてurlを貼ってもエラーとなってしまい、upできていないのかすら分かっておりません。。

    初心者なもので困っております。
    どうぞご教授頂けます様よろしくお願いします!

    • ハカセ より:

      yu様
      コメントありがとうございます。
      動作しないというのは表示されないということでしょうか?
      エラーの内容はどのようなものでしょうか?
      もう少し詳しく教えて頂けるとお役に立てるかも知れません。
      よろしくお願い致します。

      • yu より:

        博士様
        ご返信ありがとうございます。

        おっしゃる通り表示されないのです・・・。

        ちなみにcyberduckにてupしたファイルのurlをブラウザで開いたところerror404の表示でページを開く事もできません・・・

        初心者なもので、htmlの記述が間違っているのか、ファイルのアップロードが間違っているのか・・分からない事が分かっていない状態です(><)

        どうぞ宜しくお願い致します。

        • ハカセ より:

          yu様
          アップロードしたURLにアクセスしして「404」のエラーと言う事は、アップしたHTMLファイル自体が見えない状態にあると思われます。

          「アップロード後、「403」や「404」のエラーが表示される」
          http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=050425-2

          そのファイルにアクセス出来てページが真っ白だとしたら、コードの間違いなどが考えられますが、まずは上記サイトを参考に404エラーを解決して見てください。

          • yu より:

            博士様

            ありがとうございます。上記サイトにて確認しましたがやはり404表示です・・・
            http://www.rakuten.ne.jp/gold/articolo/cabinet/images/banner1.jpg
            がurlです。
            hpは楽天goldで作成していませんのでhttp://www.rakuten.ne.jp/gold/articoloこのurlでtopページは開きません。。
            そこがいけないのでしょうか??

            ftpのやり方がいけないのかと思いfailezillaにて試してみても結果は同じでした・・

            goldとの接続はできているかと思います。cabinet csv,等の表示は確認できています。

            すでにお手上げ状態です(><)

  17. yu より:

    博士様
    たびたび申し訳ございません・・

    サーバー上にupする事はできました!

    上記の通りupしたところhtmlのソースの部分が表示されてしまい、スライドどころか画像も表示されません。

    画像のみであれば表示されています。
    尚、width()の()内すべてに数字をいれるのでしょうか??

    宜しくお願い致します。

    • ハカセ より:

      yu様

      問題の解決にはまず事実(今の状態)と原因の特定が必要です。
      質問をする場合は出来るだけ詳しい現状をお知らせ下さい。

      一応予想出来る対応策を書いておきますが、
      手当たり次第に対応せず、一つ一つ順番に確実に確認しましょう。

      (手当たり次第の対応と、「やったはず」って言う思い込みは問題の解決を遅らせます。私も何度も痛い目を見ましたw)

      ・作成したHTMLは動くのか?

      ローカルで保存したHTMLをブラウザで開くと正しく表示されますか?

      →動かない場合
      HTMLの作成時点で何か間違ってます。動くようにしましょう。

      →動く場合
      ・サーバ(楽天GOLD)へのアップロードは出来ているか

      cyberduckやfilezillaなどでエラーが起きていませんか?

      →エラーが表示されてアップロードされていない

      ftpの設定などアップロードのやり方が間違いです。

      →エラーは無く、アップロード成功している

      ・アップロードしたHTMLのURLは間違っていませんか?

      http://www.rakuten.ne.jp/gold/articolo/が御社のGOLDの大元のURLです。
      http://www.rakuten.ne.jp/gold/articolo/cabinet/images/banner1.jpg

      であれば、「cabinet」ってフォルダの中に「images」ってフォルダがあり、その中に「banner1.jpg」って画像がある状態です。

      ※それでも解決しない場合のみお読み下さい。
      上記を全てクリアした状態で「404 not found」って事はあまり考えられないのですが、パーミッションの設定が問題かも知れません。
      全てのユーザーが「読む」事が出来る様にして見てください。
      http://d.hatena.ne.jp/web-production-beginner/20110403/p2

      それでも解決しない場合、コンタクトフォームからメール下さい。
      すぐには対応出来ない場合もありますが、直接ご相談に乗ります。

  18. yu より:

    博士様
    ご丁寧な対応本当に感謝しています。
    ありがとうございます。

    博士様のおかげで、
    HPにバナーを無事貼る事ができました!ありがとうございます^^

    そのバナーが左に寄ってしまっているのですが、対処法
    はあるのでしょうか??

    質問ばかりですみません・・

  19. 質問者 より:

    博士様

    上記の説明通りで、スライドバナーを作成することができました!
    すごくわかり易い説明で本当に助かりました、ありがとうございます。

    早速、楽天GOLDにUPしトップページに貼り付けたのですが、リンクの表示がうまくできません。。。
    画像をクリックするとリンク先には飛ぶには飛ぶのですが、表示されるのが、バナーの画像部分のみリンク先に飛び、貼り付けたトップページ自体は表示が変わりません。
    (説明がうまくできず、伝わりにくいかもしれませんが・・・)

    ちなみにトップページはRMSで作成し、GOLDで作成していません。

    どこか設定を変更しないといけないのでしょうか?
    ご教授頂けますようお願いいたします!

    • ハカセ より:

      質問者様
      コメントありがとうございます。

      恐らくご質問の問題はリンクタグ(aタグ)のターゲットを指定すれば解決するはずです。

      <a href="リンク先URL" target="_parent"></a>

      iframeは別のHTMLファイルを覗きこむ窓の様なものなので、
      何も設定しないとその窓の中でリンク先に移動してしまいます。

      ターゲット属性の種類は

      target=”_parent” iframe
      を呼び出した親のHTMLがリンク先に移動する

      target=”_blank”
      iframeを呼び出したページとは別のページでリンク先を開く

      target=”_self”
      iframe内のHTMLがリンク先に移動する(指定していない場合これになります)

      target=”_top”
      iframeを呼び出した一番上の階層のHTMLがリンク先に移動する

      の4つがありますので、用途に併せて設定して下さい。
      (ホントはnewってのもあるんですが、良くわからないので割愛)

      よろしくお願いします。

  20. 質問者 より:

    博士様

    迅速なご回答ありがとうございます!
    早速ご指示頂いたよう変更しましたら、無事表示され解決いたしました!
    的確なご説明ありがとうございました。
    本当に感謝いたします!!

    今後ともよろしくお願いいたします。

  21. 質問者 より:

    博士様

    お世話になっております。
    当方2度目の質問になります。

    楽天市場内の買い物かごのカスタマイズについてお伺いします。
    CSSを楽天ゴールド内に設置し、リンクをかけましたが、指定した買い物かごのgifファイルが表示されません。。。

    リンク、CSSは下記の通りですが、どこか間違っていますでしょうか。
    ご教授頂けると幸いです。

    よろしくお願い申し上げます。

    /*買い物カゴボタン*/
    input {
    font-weight:bold;
    letter-spacing:.1em;
    background:http://www.rakuten.ne.jp/gold/ee-ne/○○;#fcfcfc no-repeat 204px 57px;
    margin-top:5px;
    cursor:pointer;
    border-color:#cdcdcd;
    border-style:solid;
    border-width:1px 2px 2px 1px;
    padding:8px 7px 7px 40px;
    }
    /*IE対応*/
    *html input {
    width:1pt;
    overflow:visible;
    padding-top:8px;
    padding-bottom:8px;
    padding-left:40px;
    background:http://www.rakuten.ne.jp/gold/○○;#fcfcfc no-repeat 204px 57px;
    }

    input:hover {
    background-color:#efefef;
    }

    /*個数入力*/
    input#units {
    border:solid #ccc 1px;
    background:#fff!important;
    width:30px;
    height:30px;
    cursor:auto;
    padding:7px 7px 7px 3px;
    }

    /*お問い合わせボタン*/
    font input {
    background:#fcfcfc 10px 5px 10px 0;
    background-image:none;
    margin-bottom:5px;
    padding:7px;
    }
    /*IE対応*/
    *html font input {
    background:#fcfcfc no-repeat 204px 57px;
    margin-bottom:6px;
    }

    • ハカセ より:

      質問者様
      多分、背景画像の指定部分の記述の問題だと思われます。

      間違い

      background:http://www.rakuten.ne.jp/gold/ee-ne/○○;#fcfcfc no-repeat 204px 57px;
      

      正しい記述

      background: url(http://www.rakuten.ne.jp/gold/ee-ne/○○) #fcfcfc no-repeat 204px 57px;
      

      BackgroundプロパティでURLの記載はこんな感じになるはずです。
      またセミコロン「;」はCSSでは、プロパティの終わりを示すので、途中に入るのは誤りとなります。

      あとついでに指摘させて頂くと「input」で大きく指定してしまうと、ページ内の別の「input」要素にもスタイルが効いてしまうので危険かも知れません…。

      よろしくお願い致します。

  22. 質問者 より:

    博士様

    早速のご回答ありがとうございます!
    ご指摘いただいた通り、修正致しましたが、やはりうまくいきません。

    あと、「input」の指定につきましてもご指摘いただき、ありがとうございます。
    しかし、詳しいものがおらず、公開されているものをそのまま転用致しましたので、内容がいまいち理解できておりません。。

    他に良い方法がございましたらご教授頂けますでしょうか。

    よろしくお願いいたします。

  23. como より:

    ハカセ様

    jQueryのバージョンを1.9.1にしたらうまくいきました。

    よくよく見たらjQueryのHPにはIE9 not supportedと書かれていました。

    お騒がせしました。ありがとうございました。
    先の質問は削除くださいませ。

    • ハカセ より:

      como様
      コメントありがとうございます。
      先のコメントは削除させていただきましたが、
      後の方にお役に立つと思い、こちらのコメントは残させて頂きます。
      jQueryのバージョンは私も良く見逃しますので、要チェックですね。
      解決してなによりです。

  24. 38138 より:

    博士さん、敬服いたします。
    7~8年前より、画像を動かしてみたいと思っていて、GIFアニメ・フラッシュ・Java、う~んとなっていた所にCSSが表れ、もはやさっぱり。
    それでも一念発起するも、自動で作成できるスライドショーが関の山。。。画像は動けどリンクには飛ばず逆にみっともないので外してしまい、それでもどうにかしたいとJavaの構文は理解できてもいざとなると、【HTMLのBODY部分にどうの】と言われると、???となってしまい、いざJavaをどこにどうするのかで躊躇してしまっておりました。
    あっちで調べこっちで調べ、博士さんのサイトも存じておりましたが、シンプルにまるっとコピペをしたら、あっさり2時間で全て解決・動作致しました。
    こちらのQ&Aのご対応されていらっしゃる姿勢といい、まさに敬服の一言です。

    技術だけでなく、人としても成長させて頂きました。
    ありがとうございます。
    ただただ、お礼を言わずにはいられませんでした。
    産まれて初めてのこのような書き込み故、不作法をお許しください。

    ご覧になられる方には不要のコメントかと存じます。
    お読みになられましたら、お手数をお掛け致しますが削除して頂ければ幸甚です。

    作業が夜半になられる事もあるかと存じます。どうぞくれぐれもお身体ご自愛ください。
    本当にありがとうございます。

  25. takesita より:

    博士 様
    はじめまして、すみません、初心者です。
    サイトを見て、jQueryでスライドショーを作りました。

    iframeでUPしようとしますが、真っ白で表示されません。
    同じコメントの方を見つけて、自力でと思い調べましたが、
    解決できませんでした。

    当方、素人で申し訳ないのですが助けていただきたいのです。
    一度見ていただけませんでしょうか?

    サイトをこの前見つけて、ほんと有難いです。
    仕事で急に楽天サイト担当になり、右も左もわからず、運営してます。

    サイトURLも記載してます。
    お暇なときに見ていただいて、ご指摘いただければ幸いです。

    どうか、宜しくお願いします。

    <見て頂きたいスライドショーURL>
    http://www.rakuten.ne.jp/gold/matinozakka/sd20150331-takesita.html

    • ハカセ より:

      takesita様
      コメントありがとうございます。
      どこの会社でもネットショップ担当は突然任命されるものです(笑)
      苦労はありますが、やりがいのある面白い仕事だと思います。
      是非「モノを売る(買ってもらう)」楽しさを覚え、スキルを身につけて会社の人たちを唖然とさせてやりましょう(笑)

      ページのソースを拝見しました。Google Chromeのデベロッパーツールでチェックすると、
      Failed to load resource: the server responded with a status of 404 (Not Found)
      というメッセージが出てきます。詳細を見ると「jquery-2.0.3.min.jsが見つかんねーよ」と怒られているようです。
      (デベロッパーツールの使い方は割愛します)

      そこで

      <!-- ↓のsrc=""の中をアップしたライブラリファイルのURLに変更 -->
      <script type="text/javascript" src="jquery-2.0.3.min.js"></script>
      

      のjqueryファイルのURLを変えてやると動きました。

      ただ、ソースの最後の方にある

      <script type="text/javascript" charset="EUC-JP" src="http://a.ichiba.jp.rakuten-static.com/com/js/d/pa/pa2.min.js"></script>
      

      この記載は多分不要と思われますので、削除した方が良いと思います。(楽天市場で使ってるJavaScriptファイルだと思います)

      削除しないと下記のような警告が表示される可能性があります。
      警告
      以上、お役に立てれば幸いです。
      今後共当サイトをよろしくお願い致します。

      • takesita より:

        博士 様

        返信、本当にありがとうございます!!
        教えていただいた通りに行いました。表示されました!!

        本当に感謝しきれません!助かりました。

        また、温かいコメントもありがとうございます。
        突然任命されるものなのですね(笑)
        低コストで成果を求められてまして、ほんと悩んでばかりでしたので、
        こちらのサイトは、ほんと有難いです。
        隅々まで読ませていただいて、勉強させていただきます!

        また、助けていただくかと思いますが、宜しくお願い致します。

        ありがとうございました。

  26. sabano より:

    博士様
    初めまして、いつも参考にさせていただいております
    sabanoと申します。

    こちらのアイフレームを楽天サイトで導入することになり
    現在テストページで改修を行っていますが
    アイフレーム下のサムネイルが表示されません。
    上のスライドショーは正確に表示されるのですが
    サムネイルのみ、仮画像を挿入しても反応せず…。

    当方素人なので、ソースをコピペして行っているのですが
    サムネイルが表示されない点で考えられる要因は何かありますでしょうか?

    素人丸出しの質問で大変申し訳ございません。

    • sabano より:

      ちなみにアイフレームのHTMLのみをプレビューモードで閲覧すると
      下部にサムネイルが表示されますが
      GOLDページに挿入したものを確認するとメインビジュアルのみが
      表示され、サムネイルが表示されない、といった状態です…

      画像の大きさ等が関係しているのでしょうか?

      • ハカセ より:

        sabano様
        コメントありがとうございます。
        ご返信が遅くなりました。

        ご質問の内容なのですが、恐らくですがifrmeの設定で高さが足りてないのでは?と思われます。

        <iframe src="hoge.html" frameborder="0" width="700" height="500"></iframe>
        

        こんな感じのコードの
        「height=”500″」
        の部分を調整してみるとうまくいくかも。

        よろしくお願い致します。

  27. tonecchi より:

    博士様
    初めまして、スライドバナーを検索していてコチラにたどり着きました。
    tonecchiと申します。
    こちらのスライドバナーを参考にさせていただき、うまく表示したのですが、どうしても、スライドバナーの下に余白ができてしまい、消すことができません。
    フレームタグの調整などしてみましたが、どうしたら消えるのか分からずご連絡させていただきました。

    サイトURL
    http://www.rakuten.co.jp/huusuikazan/

    スライドバナーURL
    http://www.rakuten.ne.jp/gold/huusuikazan/sankou.html

    です。

    アドバイスいただければ幸いでございます。
    よろしくおねがいいたします。

    • ハカセ より:

      tonecchi様
      ページのソースを拝見したところ、iframeの読み込み時に、
      heghtが400ピクセルで指定されています。
      バナーはメインが250ピクセル、サムネイルが63ピクセルとなっている様ですので、
      313ピクセルで大丈夫なはずです。

      <iframe src="http://www.rakuten.ne.jp/gold/huusuikazan/sankou.html" width="640" height="400" align="left" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" style="border:none;"></iframe>
      

      これの「height=”400″」を調整して見てください。
      よろしくお願い致します。

      • tonecchi より:

        博士様
        さっそくのご返信ありがとうございます。
        「height=”313″」に変更すると余白がなくなりました。
        ありがとうございました。
        今後も参考にさせていただきます。

  28. yuka より:

    博士様

    初めまして、パソコン超初心者のyukaです。
    楽天トップページの作成を頼まれ、1からHTMLを勉強し始めたばかりなのですが、気まぐれ社長から「スライドショーを作って」との要望を受け、このサイトにめぐりあいました。

    スライドショーは出来たので、マイコンピュータに保存した.htmlを開くと見れるんですが、FTPから楽天GOLDにアップしたら、スライドはするのに全ての画像が×印になって表示されません(涙)

    FTPにjqueryもいれたし、画像も楽天GOLDの.htmlと同じフォルダ内にいれてあります。

    HTMLを始めたばかりでどこをどうすればいいのかもわかりません。

    どうかアドバイスいただけませんか(涙)

    • ハカセ より:

      yuka様
      コメントありがとうございます。
      画像がバツ印になるという事は画像のURLが間違っている(または画像が見つからない)ということです。

      今回の場合、ローカル(自分のPC)では見られるという事なので、考えられるのは、

      ・画像をアップしていない
      ・画像のリンクがローカルの絶対リンクになっている。

      のどちらかでは無いでしょうか。

      ローカルの絶対リンクってのは
      「file:///C:/Users/hoge/hoge.jpg」みたいな記述になっている奴の事です。

      画像を呼び出すimgタグのURLの部分をご確認下さい。

      <img src="hoge.jpg">

      ↑のhoge.jpgの部分が画像のURLです。

      よろしくお願い致します。

  29. yuka より:

    ハカセ様
    ご回答ありがとうございます。

    画像のリンクを楽天のR-cabinetにアップした画像のURLにしたところ、パソコンのフォルダ内ではスライドショーが表示されました!
    しかし、FTPで楽天GOLDに入れて、楽天GOLDにアップしたスライドショーを開くと画面が真っ白で何も表示されなくなりました。

    コールセンターに電話してもサポート対象外とのことだったので、いろいろと検索してみたのですが、同じような状況の対処法を見つけられず、また質問してしまい申し訳ありません。

    FTPではバイナリ転送モードで楽天GOLDにいれています。
    保存時のファイル名はslideshow.htmlとしています。
    保存時のファイルの種類はすべてのファイルにしています。
    ファイル作成時の文字コードの指定はEUCにしています。
    文字コードをUTF-8に変えてみたのですが、まったく同じ状況になります。

    お忙しい中、大変ご迷惑をおかけ致しますが、対処法がありましたらお教え下さい。

    • ハカセ より:

      yuka様
      頂いた情報の中では原因の判断が付かないです・・・
      真っ白っていう状況から一番考えられるのは
      jQueryのファイルへのリンクが通っていない(URLが間違っている)
      または、アップし忘れかな?と思われます。

      その辺を再確認してもまだ解決しなければ、
      もう少し詳しい状況をお知らせの上、再度ご相談下さい。
      実際のページのURLなどを貰えれば一番早いです。

      もし、公開したくなければ、お問合せフォームなどからメールでご相談下さい。
      すぐに返答できるかはお約束出来ませんが、出来る限りの対応は致します
      よろしくお願い致します。

  30. SUさん より:

    初めまして、いつも勉強させていただいております。
    スムースに上部までスクロールを作ったのですが、
    iframeだとその指定部分しか表示されず、
    どうやってrmsにリンクを貼っていいやらわからず、途方に暮れております。
    お力添えいただけますと助かります。

    • ハカセ より:

      SU様
      コメントありがとうございます。
      スムーススクロールをRMSのページ(商品ページやカテゴリページ)に反映したいと言う事でしょうか?
      残念ながらJavaScript(jQueryを含む)はGOLDの中でしか使えませんので現状では、
      RMSのページでの実装は不可能だと思われます。

      楽天側が用意している「買い物かごへ」のボタンで使用しているJavaScriptを利用して
      スムーススクロールを実装する事も出来るのかなあ?と思った事がありますが、
      実験してみないと何とも・・・
      もし「どこかの店舗でやっていた」など情報をお持ちでしたらお知らせ下さい。
      お役に立てずにスミマセン。
      よろしくお願い致します。

      • SUさん より:

        博士様
        早速のお返事ありがとうございます。

        スムーススクロールをRMSのページ(商品ページやカテゴリページ)に反映したいと言う事でしょうか?
        ↑はい。そうです。

        下記HPを参考にさせて頂きました。
        カテゴリページでしょうか?
        http://www.rakuten.ne.jp/gold/sesto/2015style.html
        お忙しい中申し訳ありません。
        気長にお待ちしておりますので、よろしくお願い申し上げます。

        • ハカセ より:

          SU様
          ご紹介頂いたSESTOさんのページはGOLDですね。
          GOLDのページならスムーススクロールも動作します。
          よろしくお願い致します。

          • SUさん より:

            博士様
            納得しました。
            お忙しい中、ありがとうございました。

  31. kA より:

    初めてのご質問させて頂きます。
    以前からこちらのサイトを参考にスライドバナーを作成し始めて、
    現在ではやっと表示されるようになりました。
    本当にありがとうございます。

    1点、どうしても分からないことがありまして・・・
    PCからでは画像が表示され通常に動いているのですが、
    スマホからでは6枚中1枚目しか表示されません。

    スマホは一度サーバーに上げ、表示させているのですが・・
    原因として何かご存知ではありませんでしょうか?
    初歩的な質問で申し訳ございません。

    • ハカセ より:

      kA様
      コメントありがとうございます。

      うーん。頂いた情報からでは何とも判断がつきかねます・・・。
      ソースコードかそのページのURLでもお知らせ頂ければ原因が特定出来る可能性はあるのですが・・・
      (公開したくなければお問い合わせフォームからでもOKです)

      よろしくお願い致します。

  32. 西 より:

    楽天のショップページに画像のスライドを取り入れたいと思い、
    ハカセ様のパージにたどり着きました。

    知識はないのですが、説明通りに進めると無事設置することができたのですが、
    画像をクリックして指定したリンクに飛ぶと、おかしな状態になります,,,

    何か方法はありますでしょうか??

    URLを貼っておきますので、ご回答いただけますと幸いです。
    http://www.rakuten.co.jp/pachakagu/

    • ハカセ より:

      西様

      ご質問ありがとうございます。
      ページを拝見しましたが、特におかしな感じは無かったのですが、
      もしかして解決済みでしょうかね。

      不具合の内容をお知らせ下されば再度検証してみます。
      よろしくお願い致します。

      • 西 より:

        質問させていただいてから、あれこれしていたらなんとかなりました!
        ご確認いただきありがとうございました!

  33. kuro より:

    初めて質問させていただきます。
    当方初心者で全くわからない状態から作成しております。
    おおもとは制作会社が作成し、それを色々なサイトを参考に編集しております。

    さて今回スライドショーを配置したくこのサイトにたどりつきました。
    上記を参考に作成させたいただきましたが、うまくできません。
    お知恵をいただければ幸いです。

    楽天GOLDへFFFTPを使用しslideshowフォルダをアップ予定です。
    「slideshow/js/jquery-3.1.1.min.js」←jquery-2.0.2.min.jsがなかった為
    「slideshow/images/”画像.jpeg”」←取り合えてPCの画像をサイズ無視して適当に数枚
    「slideshow/css/slideshow.txt」←へ変更
    「slideshow/slideshow.html」

    .htmlを開くと真っ白でタイトル部分は文字化けしております。

    • ハカセ より:

      kuro様

      コメントありがとうございます。
      まず問題を切り分けて考えましょう。

      ■タイトルが文字化けしている
      →考えられる原因
      ・文字コードがおかしい
      ・HTMLの宣言文がおかしい

      このあたりが参考になるかも
      https://hakase-labo.com/2013/07/03/jquery_banner/#comment-938

      バナーを設置する前のHTMLを用意して
      プレビューしてみてそれでも文字化けしてたらそもそもの設定がおかしいです。

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
      <title>テスト</title>
      </head>
      
      <body>
      <p>テストです。</p>
      </body>
      </html>
      

      ■画面が真っ白
      →考えられる原因
      ・画像のパス(URL)が間違っている
      ・jqueryのパスが間違っている

      別のHTMLのファイルを用意して画像だけを呼び出してみましょう。
      ↓のhoge.jpgの部分を画像のURLに変更してプレビューして見てください。

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
      <title>テスト</title>
      </head>
      <body>
      	<img src="hoge.jpg">
      </body>
      </html>
      

      それでも解決しない場合は問題があるファイルの中身を見せて下さい。
      メールでもここに書いても構いません。
      よろしくお願い致します。

      • kuro より:

        ハカセ様
        ありがとうございます。
        色々試していたら、何故か動かすことができました。
        正直どこを直して動いたのかわかりません。
        大元は残しておけばよかった…
        ご迷惑おかけしました。

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る