【Yahoo!ショッピング5のつく日用】毎月同じ日付 or 期間で表示する内容を変えるJavaScript
特定の日付や期間で表示させるHTMLを変えられます。
特定の日付だけ、もしくは特定の期間中と期間とで自動的に表示を変えるスクリプトです。
業務時間内にはなかなかできない0時の日付変更のタイミングでの内容更新が可能。
ページを読み込んだ日付を条件にした自動切り替えなので、放置しておくことも可能です。
毎月特定の日付のみ版
特定の日付だけの場合のコードです。下記を好きな場所へコピペしてお使いください。
毎月7日はポイント7倍キャンペーンバナーを出したい！なんて時にオススメです。
コピペ用コード
[html]
<script type="text/javascript">
<!–
var today = new Date();
var day = today.getDate();
if( day == 【変わる日付】 ){
document.write('【特定の日付で変わるHTMLコード】’);
}else{
document.write('【普段表示させておくHTMLコード】’);
}
–>
</script>
[/html]
コピペしたら【変わる日付】、【特定の日付で変わるHTMLコード】、【普段表示させておくHTMLコード】の3か所を書き替えてください。
【変わる日付】には半角数字で表示を変えたい日付を入れてください。
【特定の日付で変わるHTMLコード】には毎月【変わる日付】の日に表示させたい内容を。
【普段表示させておくHTMLコード】には毎月【変わる日付】以外の日に表示させたい内容をそれぞれ記述してください。
HTMLコード部分には画像でもテキストでも好きなように記述してください。
HTMLコードはかなり長く入れても問題なく表示されます。が、改行やtabキーによるインデントは入れないでください。
改行のせいできちんと動かなくなる可能性大です。
ちなみに複数の日付を指定しておくことも可能です。以下その場合の記述例です。
複数の日付を指定する場合の記述例
[html]
<script type="text/javascript">
<!–
var today = new Date();
var day = today.getDate();
if( day == 5 || day == 15 || day == 25 || day == 11 || day == 22 ){
document.write('<img src="/sele.jpg">’);
}else{
document.write('<img src="/basicDay.jpg">’);
}
–>
</script>
[/html]
毎月決まった日にセールが走るYahoo!ショッピングを想定した例です。
5のつく日と
【変わる日付】には5のつく日である5日、15日、25日と、ゾロ目の日である11日と22日を指定。
5のつく日とゾロ目の日にはセールバナーの画像が、それ以外の日にはbasicDay.jpgというバナー画像が表示されるようHTMLタグを入れています。
指定する日付を増やす場合、day == 【日付】で日付を指定。|| で仕切ることで複数の日付を指定することができます。
上記の例はゾロ目の日も入っているので、反対に減らしたい場合は|| day == 11 || day == 22を消してお使いください。
特定の日付ではなく期間で指定する
[html]
<script type="text/javascript">
<!–
var today = new Date();
var day = today.getDate();
var startDay1 = 2;
var endDay1 = 5;
var startDay2 = 12;
var endDay2 = 15;
if( day >= startDay1 && day <= endDay1 || day >= startDay2 && day <= endDay2 ){
document.write('<img src="/sele.jpg">’);
}else{
document.write('<img src="/basicDay.jpg">’);
}
–>
</script>
[/html]
こちらは決まった日付ではなく3日～7日といった具合で期間を指定するバージョンです。
この例の場合、2日～5日と12日～15日を期間として指定しており、この期間中にアクセスするとsele.jpgが表示されます。
それ以外の期間ではbasicDay.jpgが表示されます。
指定日の設定はvar startDay1 = に指定期間の開始日、var endDay1 = に指定期間の終了日を入れます。
startDay2 と endDay2 には2つ目の指定期間の開始日を入れました。
もし期間が二つもいらないな場合は、var startDay2 や var endDay2 の列とifのある列の|| day >= startDay2 && day <= endDay2を削除しましょう。
決まった日付以外は何も表示させない
上記まではをセール版の他に通常版がある前提で書いています。
が、else{} をなくせば【特定の日付】で決めた日以外には何も表示させないことも可能です。
[html]
<script type="text/javascript">
<!–
var today = new Date();
var day = today.getDate();
if( day == 【特定の日付】 ){
document.write('<img src="/sele.jpg">’);
}
–>
</script>
[/html]
<script>タグが禁止されている場合
HTML領域である楽天GOLDやYahoo!ショッピングのトリプルはともかく、楽天RMSやYahoo!ストアクリエイターProの
- デザインページ
- カテゴリーページ
- 商品ページ
などではスクリプトタグが禁止され上記スクリプトを入れられないことがあります。
その場合は別途HTMLファイルにしておいてiframeタグで呼び出すとよいでしょう。
楽天は禁止タグ突破裏技でなんとかなったりもしますが、使えるならiframeの方が更新もしやすいし無難。
iframeもダメな場合は裏技でやるしか……
禁止タグ突破裏技については下記リンクよりどうぞ。
時間も含め、毎月固定ではない任意の期間をしたい
今回の記事でご紹介したコードは、楽天市場の「 5のつく日、0のつく日 」やYahoo!ショッピングの「 5のつく日 」「 ゾロ目の日 」などを想定して作ったものです。
が、楽天市場のスーパーセールやお買い物マラソンのように毎月きまった日程ではなかったり、夕方8時スタートや深夜1時59分終了といった時間の指定もある場合もあります。
そうした時間も含んだセール向けに「 期間限定でバナーやHTML要素を表示させるScript 」も組んであります。
詳しくは下記リンクよりどうぞ。
毎月同じ日付 or 期間で表示する内容を変えるJavaScript まとめ
実のところ今回のスクリプトはYahoo!ショッピングの5のつく日とかゾロ目の日限定のバナーを自動で出したり引っ込ませたりする用途で作りました。
毎回更新メンドクサイし。
HTMLタグならなんでもを入れることができるので、バナー（画像）だけでなくテキストなどなどいろいろな要素でお使いいただけるので、うまく応用してお使いください。