楽天イベントバナーをスライド表示・掲載期間を設定する方法

公開日:  最終更新日:2022/08/18

楽天のイベントバナーをスライド表示・掲載表示する期間を設定する方法/js/jquery
楽天などのイベントバナーのショップページへの貼り替えの作業は積極的にイベントに行っている場合は、イベント開始時にバナーを掲載してイベントが終了した時にはバナーを削除するといった面倒な作業が発生します。また、夜中に開始、終了することがあるイベントもたくさんあります。終了したバナーを削除するのを忘れたたなんてこともよく聞く話ですね。そんな、面倒な作業を削減したいという方におすすめの方法を紹介します。

楽天イベントバナーをslick.jsを使って表示する方法を紹介、掲載期間の設定も出来るようにしてみた

楽天などで積極的にイベント実施している場合は、ショップページに掲載するイベントバナーの貼り替えの作業は面倒な作業の1つではないでしょうか。有料のツールなどで自動的にバナーを表示、更新してくれるようなものもありますが、自動更新されるのは全体のイベントくらいでしょう。イベントも数日間で終わってしまうものから、1ヶ月、数ヶ月イベントが継続するものもあります。

ショップに掲載するしないの判断も必要になりますし、RMSにログインしてイベント情報ページでイベント内容、イベント開催期間を確認、バナー画像、リンク先情報などを取得する必要があります。これをすべて自動でというのは難しいのではないでしょうか。

1回の更新作業でまとめて設定して更新回数を減らそう

イベントが開始したタイミングでバナーを掲載する。2,3日後にイベントが終了したのでバナー掲載を削除する。といった感じで都度バナー更新作業をするのは非常に面倒な作業です。そこで、更新回数を減らす方法を考えてみます。

上記のように開始時、終了時とイベントの都度バナー更新を実施しているのであれば、掲載期間の設定が出来れば更新頻度は減らすことが出来ますよね。

過去に紹介したjavascriptを使った方法を使えば掲載する期間を設定することが可能です。

また、楽天のショップでよく見かけるイベントバナーがスライドして自動的に切り替わっているやつにしたいと思います。

画像をスライドさせる方法は色々とありますが、今回は上記のjqueryプラグインを使ってみます。

掲載期間の設定、画像を動かすスライダーの詳細については過去記事を参照してみてください。

今回は、この2つを組み合わせて、掲載期間も設定出来てスライドして動くイベントバナーの実装方法を紹介したいと思います。

サンプルソース

<link rel="stylesheet" href="slick.css" type="text/css"></link>
<link rel="stylesheet" href="slick-theme.css" type="text/css"></link>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="slick.min.js"></script>
<style>
.main{
  width:468px;
  margin-left:30px;
}
.bannerlist div{
  text-align:center;
}
.bannerlist div img{
  margin-bottom:5px;
}
</style>

<div class="main">
	<div class="bannerlist">
		<div id="img1">
			<a href="#">
				<img src="画像URL">
				イベントバナーのサンプル1です
			</a>
		</div>
		<div id="img2">
			<a href="#">
				<img src="画像URL">
				掲載期間を設定することが可能です
			</a>
		</div>
		<div id="img3">
			<a href="#">
				<img src="画像URL">
				slick.jsで自動的にスライドします
			</a>
		</div>
		<div id="img4">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル4です
			</a>
		</div>
		<div id="img5">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル5です
			</a>
		</div>
		<div id="img6">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル6です
			</a>
		</div>
		<div id="img7">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル7です
			</a>
		</div>
		<div id="img8">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル8です
			</a>
		</div>
		<div id="img9">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル9です
			</a>
		</div>
		<div id="img10">
			<a href="#">
				<img src="画像URL">
				楽天イベントバナーのサンプル10です
			</a>
		</div>
	</div>
</div>

<script type="text/javascript">
var startday =[];
var endday = [];

startday[1] = new Date('2015/07/22 00:00');
endday[1] = new Date('2015/07/25 23:00');

startday[2] = new Date('');
endday[2] = new Date('');

startday[3] = new Date('');
endday[3] = new Date('');

startday[4] = new Date('');
endday[4] = new Date('');

startday[5] = new Date('2015/07/01 00:00');
endday[5] = new Date('2013/07/31 23:59');

startday[6] = new Date('2015/08/01 00:00');
endday[6] = new Date('2015/08/31 23:59');

startday[7] = new Date('2015/09/07 00:00');
endday[7] = new Date('2015/09/31 23:59');

startday[8] = new Date('2015/10/01 00:00');
endday[8] = new Date('2015/11/31 23:59');

startday[9] = new Date('2015/01/01 00:00');
endday[9] = new Date('2015/12/31 23:59');

startday[10] = new Date('');
endday[10] = new Date('');

var today = new Date();

for(i=1;i<=10;i++){
	if(startday[i] > today || today > endday[i] ){
		$('#img'+i).remove();
	}
}
</script>

<script type="text/javascript">
	$("document").ready(function(){
	   $('.bannerlist').slick({
		  infinite: true,
		  slidesToShow: 1,
		  slidesToScroll: 1,
		  autoplay: true,
 		  autoplaySpeed: 4000,
		});
	});	
</script>

1行目から4行目
必要なjsファイル、cssファイルを読み込んでいます。ここでは同一フォルダでの記述になっているのでパスは環境に合わせてください。

5行目から16行目
CSSを記述している部分です。

18行目から75行目
バナー画像、リンク先情報といったタグを記述している部分です。div class=”bannerlist”の内側にdiv id=”img1″~div id=”img10″と10個の要素で構成されています。

77行目から118行目
掲載期間を設定している記述です。startday、enddayに掲載開始日時、終了日時を設定します。

startday[1] とendday[1] はdiv id=”img1″の掲載期間
startday[6] とendday[6] はdiv id=”img6″の掲載期間
といった感じで[]内の数字とid=”img数字”を関連付けています。

掲載期間の入力をする際の注意点としては
例)2015/07/25 07:00
月、日、時、分が1桁の場合は2桁になるように0詰めする。
日付と時間の間には半角スペースを入れる。
といった点に注意してください。

掲載期間の指定がない場合は、new Date(”);とします。開始日時だけ、終了日時だけのどちらか片方のみを指定することも可能です。

上記で設定した掲載期間の情報を使って、スクリプト上では現在の日時と開始日時、終了日時を比較して掲載期間なのかチェックをしてます。そして、掲載期間でない場合は、$(‘#img’+i).remove();で要素を削除しています。

設定出来る画像を増やす場合
このサンプルでは10個までしか設定できませんが、20個、30個と設定出来るバナー数を増やすのも簡単です。3箇所修正が必要です。

1つ目:div id=”img1″~div id=”img10″の部分をdiv id=”img11″、div id=”img12″と必要な数だけ増やします。

2つ目:startday[10]、 endday[10] をstartday[11]、 endday[11] と追加します。

3つ目:119行目のfor(i=1;i<=10;i++){の10を変更する必要があります。20個設定出来るようにタグ、掲載期間を追加したなら、20とします。 以上の3箇所を修正するだけで、設定できる画像数を増やすことが可能です。 120行目から130行目 さきほどの掲載期間の処理で掲載する内容のみが残った状態になっているので、それに対してslick.jsが実行される形になります。slick.jsの実行している記述では表示、スライドする画像の数を1つにしているのと、自動実行のオプションを指定してます。

動作サンプル

さきほどのサンプルソースの実行サンプルです。掲載期間外のバナーは表示されていないのを確認してみてください。

※左右のボタンの色は変更しています。
slick-theme.cssの72行目付近でcolor: black;としています。左右ボタンはフォントを使って表示しているので、色を変更することが可能です。また、font-sizeを変えることでサイズを変更することも可能です。


掲載期間を設定することが出来るので、イベント開始時、終了時に都度バナーを更新する必要がありません。イベント終了したのでバナー消すの忘れてたというのも防げます。月に1回など定期的にバナーをまとめて貼り替えするようにすれば、更新作業の手間はかなり削減出来るのではないでしょうか。ぜひ、活用してみてください。

slick.jsについて別記事あります。

スライダーに関する別記事





Comment

  1. 吉原浩子 より:

    はじめまして。
    こちらのサイトと記事を参考にさせて頂いてます。ありがとうございます。
    今回、お教えいただければと思う事があって、コメントさせていただきます。

    イベントバナーをスライド表示・掲載期間を設定する方法の通り、サイトを作成しましたが、ローカルでテストするとスライドするのですが、実際にテストサイトや本番にftpでアップすると、スライドしなくなってしまいます。何が原因か分からず、もしご教授いただけたらと思います。
    お手数ですが、宜しくお願いします。

  2. 吉原浩子 より:

    たびたびすみません。
    解決いたしました。
    私が、slick.min.jsの後にjquery.min.jsを読み込んでいたことが原因でした。
    お手数掛けました。

    • peacepopo より:

      吉原 様

      コメントありがとうございます。
      自己解決されたようで何よりです。
      ぜひ活用してみてください。

  3. 吉原浩子 より:

    ありがとうございます。
    まだ、WEBを始めたばかりなので、いろいろ勉強中です。
    こちらのサイトは本当に助かっています。
    今後も参考にさせていただきます。

  4. おくの より:

    初めまして。
    楽天でのポイントUPバナーを効率よく掲載できないかと調べていましたところこちらの記事に出会いました。

    何とかPCでは表示が出来、問題なく稼働できたのですが、スマホから閲覧するとPC画面へ表示限り変わってしまいます。
    そもそもスマホでは運用出来ないのでしょうか?

    大変初歩的なご質問で恐縮ですが、ご教授頂けますと幸いです。

    • peacepopo より:

      おくの 様

      コメントありがとうございます。
      PCでは表示が出来ているとのことですが、スマホから閲覧した場合について、もう少し具体的にどのような症状でしょうか?

      >スマホから閲覧するとPC画面へ表示限り変わってしまいます。
      ・スマホでPC用のページを閲覧した場合のことでしょうか?
      ・もしくはスマホ用のページに設置している?
      ・PC用ページへ自動的に飛ばされる?
      すいません、どのような状況か私が理解出来ておりませんのでもう少し情報頂けたら助かります。

吉原浩子 へ返信する コメントをキャンセル

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

スポンサードリンク
PAGE TOP ↑