縦帯バナーの作成

Question

いつもお世話になっております。

こちらのページ用に商品が流れていく縦帯バナーは作れるのでしょうか？
http://www.rakuten.co.jp/auc-pianonkids/?s-id=review_PC_sl_shop_01

以前このようなバナーを作れますという会社があり月額15000円でした。

Answer

ECマスターズの田中です。

はい、作ることができます。

最初に、GOLD内に
http://it-pocket.com/slide-auto
こちらのページで紹介されているjQueryプラグインを利用するなどの方法で
縦にスクロールするスライドショーが表示されるページを
作成していただき、

それを、ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）の中に
下記のタグで埋め込んでいただく形になります。

===== この下の行から ================

===== この上の行まで ================
※縦スライドショー用ページのURLは、実際のURLにご変更ください。
※rightをleftに変更すると、右端から左端に移動します。
※rightの右にある 0 の数字を増減させると、端からの距離を調整できます。

Answer

ありがとうございます。

ページを拝見してやってみます。

ですが、
GOLD内にどうやって作成するのかがわからないのです。

GOLDに作成とは、どこに作成するのですか？

このGOLDというのがいまいち理解出来ていません。
初歩的ですが、教えて頂けませんでしょうか。

宜しくお願い致します。

Answer

ECマスターズの田中です。

GOLDは、HTMLや画像などのファイルを保存して公開できる仕組みです。
使い方などの詳しい説明は、下記記事の、3つ目の返信をご参照ください。
https://ec-masters.club/forum/post_view.php?id=314

Answer

ありがとうございます。

まずご案内頂いた　

http://it-pocket.com/slide-auto

こちらのページで「autoslide.js」←ダウンロードしてください。
となっていたのですが、ダウンロードするのでしょうか？

ダウンロードしようとしましたが、エラーになってしまいダウンロードできませんでした。

正直意味がよくわからないのですが、こちらのタグみたいなものを
GOLDに保存するということでしょか。

知識がないため、すごく難しくて、私には出来ないよな気がします。

Answer

ECマスターズの田中です。

いちから作成しようとすると、
HTMLに加えてJavaScript、CSSも使う必要がありますので、
馴染みがないと難しくなります。

今回のような縦帯でのスクロールバナーは、
ECステーションでも期日は未定ですが、優先度高めで開発しております。
mk3864さんは既に、クラブ向けのシークレットプラン「セレクトプレミアム１０」
http://www.intecrece.co.jp/ec/cp/master.html　をご利用中ですので、
このような縦帯スクロールバナーがリリースされれば、HTMLの知識なくとも、
簡単に設置ができると思います。

念のため、手動で作成する手順を詳しくまとめましたので、
作成される場合は下記内容をご参考ください。


１．Ribraryをお申し込みいただき、パソコンにインストールしてください。
https://www.rakuten.co.jp/shops/manual/service/ribrary/01.html
https://www.rakuten.co.jp/shops/manual/service/ribrary/02.html

２．Ribraryを起動し、画面左の「楽天GOLD」をクリックしてください。
https://www.rakuten.co.jp/shops/manual/service/ribrary/03.html

３．画面右側を右クリックして「フォルダ作成」を選択し、「tatebanner」フォルダを作成してください。

４．作成した「tatebanner」フォルダをWクリックしてください。

５．メモ帳を起動して、下記内容を貼り付け、「tatebanner.html」という名前で保存してください。
（メモ帳は、開いたままにしてください）

===== この下の行から ================






*{list-style:none; margin:0; padding:0;}

#slide {
    width:100px;
    height:100vh;
    overflow:hidden;
    position:relative;
    margin:0 auto;
}
#slideIn {
    position:absolute;
    left:0;
    top:0;
}
#slide li {
    float:left;
    width:90px;
    height:90px;
    margin-right:10px;
}




    
        
        
        
    



===== この上の行まで ================

６．表示させたい商品の、商品ページURLと、画像のURLをご用意ください。

７．メモ帳の下から５行目を、表示させる商品の数だけコピーしてください。
（上記の場合、３商品をスクロールさせる設定になります）

８．メモ帳の下から７行目より下にある「商品URL」「商品画像のURL」を実際のURLに置き換えてください。

９．新しくメモ帳を開き、下記内容を貼り付けて「autoslide.js」というファイル名で保存してください。

===== この下の行から ================
(function($){
	//autoSlide 始め
	function AutoSlide(parameter){
		var param = $.extend({
			target:'', //スライドするIDを設定
			course:'left',//left or right or top or bottom を設定 デフォルトはleft
			speed:10000 //1回のアニメーションにかける時間
			},parameter);
		
		if (!(this instanceof AutoSlide)){//newから生成していなければnewで生成
			return new AutoSlide(param);
		}
		
		var $target = $(param.target),//target jQuery化
			childWidth = $(param.target).children().eq(0).outerWidth(true),//子の横（アキ付）取得
			childHeight = $(param.target).children().eq(0).outerHeight(true),//子の縦（アキ付）取得
			childLength = $(param.target).children().length;//子の数取得
			
		$target.children().clone().appendTo($target);//targetの子複製
	
		var autoSlideInit = function(){//動きなど表示している本体のセット
			var courseData = function(course,type){//courseを見て【大きさ(横or縦)/位置/移動距離】の値を取得
				var size = {},
					position = {},
					direction = {};
				switch (course){
				case 'left'://左へ移動
					position = {left:0};//初期位置(0からスタート)
					size = {width:childWidth * childLength * 2};//横幅を長くする(スクロール用に複製したので幅*2)
					direction = {left:childWidth * childLength * -1};//移動位置(子の横幅*子の数*マイナス移動(left方向))
				break;
				case 'right'://右へ移動
					position = {left:childWidth * childLength * -1};//初期位置(子の横幅*子の数*マイナス)
					size = {width:childWidth * childLength * 2};//横幅を長くする(スクロール用に複製したので幅*2)
					direction = {left:0};//移動位置(0になるまで移動)
				break;
				case 'top'://上へ移動
					position = {top:0};//初期位置(0からスタート)
					size = {height:childHeight * childLength * 2};//縦幅を長くする(スクロール用に複製したので幅*2)
					direction = {top:childHeight * childLength * -1};//移動位置(子の縦幅*子の数*マイナス移動(top方向))
				break;
				case 'bottom'://下へ移動
					position = {top:childHeight * childLength * -1};//初期位置
					size = {height:childHeight * childLength * 2};//縦幅を長くする(スクロール用に複製したので幅*2)
					direction = {top:0};//移動位置(0になるまで移動)
				break;
				};
				if (type == 'size'){//typeがsizeだったらsizeを返す
					return size;
				}
				if (type == 'position'){//typeがpositionだったらpositionを返す
					return position;
				}
				if (type == 'direction'){//typeがdirectionだったらdirectionを返す
					return direction;
				}
			};
			var animeTimer = function(){//アニメーションする
				$target.animate(courseData(param.course,'direction'),param.speed,'linear',function(){
					$target.css(courseData(param.course,'position'));//初期位置に戻す
					animeTimer();//終了したらもう一度再生
				});
			};
			$target
			.css(courseData(param.course,'size'))//幅を設定する
			.css(courseData(param.course,'position'));//初期位置を設定する
			animeTimer();
		};
		autoSlideInit();
	}
	//autoSlide 終わり
	
	//autoSlide 実行
	$(document).ready(function(){
		var _autoSlide = AutoSlide({
			target:'#slideIn',//スライドするIDを設定
			course:'top',//left or right or top or bottom を設定 デフォルトはleft
			speed:40000//1回のアニメーションにかける時間
		});
	});
})(jQuery);
===== この上の行まで ================

１０．「tatebanner.html」「autoslide.js」をマウスで持ち上げ（ドラッグして）、Ribraryの画面右側に落として（ドロップして）ください。

１１．下記HTMLタグの「ショップURL」を、実際の文字列に書き換えてください。
（mk3864さんのショップのURLの、http://www.rakuten.co.jp/◯◯◯/ ←の◯◯◯部分です。)

===== この下の行から ================

===== この上の行まで ================

１２．書き換えたHTMLタグを、ヘッダーに貼り付けてください。

Answer

お忙しい中、詳しい説明本当にありがとうございました。

じっくり拝読して、勉強させて頂きます。

設置できるよう頑張ります。

一度解決致しますが、何かございましたら質問させて頂きますので
宜しくお願い致します。