*

ネットショップの営業日カレンダーを自動更新にして手間を省く

公開日: : 最終更新日:2014/11/27 ネットショップ

カレンダー

ネットショップと言えば必ずと言っていいほどありますよね。休業日と営業日をお客様に知らせる為の営業日カレンダー。お店によって実装方法は様々です。カレンダーは画像であったり、table タグでカレンダーを html で直打ちしたり…。これを毎月更新となると結構面倒で手間もかかります。複数ショップを運営していたら尚更です。

この営業日カレンダーが自動で更新出来たら、どんなに楽なものか。今回はカレンダーを自動で更新してくれるツールを紹介します。

営業日カレンダーを自動更新

シンクグラフィカさんで公開されているフリーのスクリプト素材です。下記ページからダウンロードしましょう。

calendar2

デフォルトだと上図のような状態になっています。お休みの日は背景が赤くなり、マウスカーソルを合わせると何のお休みか(定休日)などをポップアップで表示してくれます。カレンダーのサイズなどは付属の CSS で編集が可能です。

このまま使ってもいいのですが、真ん中の大きい予定表がいらなかったので消しました。

まず付属の html ファイルを開きます。以下の部分をサクッと消します。

<div class="schedule_wrapper">
  <h3>予定表</h3>
  <!-- 0番目の予定リストを表示する場合は以下のタグを配置 -->
  <div id="schedule0" class="schedule_list">
    <ol>
      <li value="210">テスト</li>
    </ol>
  </div>
</div>

定休日などの設定方法

各自店舗のお休みを入力しないことにはそのまま使えません。定休日を設定するには付属の「cal.js」を開きます。

なかなか難しいソースコードですが、上の方は設定になっています。「// (○月) 第× △曜日の場合」というコメントがあるのでその下を編集します。

calObj[0].month["0-1"] = 'Holyday;定休日';

上記は定休日設定の例です。肝となるのは["0-1"]という部分です。まず最初の数字は0が日曜日、次の数字は第何週目という意味になっています。つまり、第一日曜日を定休日とする設定です。0は日曜、1は月曜というように数字が増えていきます。これに習って、毎週土日を定休日とするには以下のように設定します。

calObj[0].month["0-1"] = 'Holyday;定休日';
calObj[0].month["0-2"] = 'Holyday;定休日';
calObj[0].month["0-3"] = 'Holyday;定休日';
calObj[0].month["0-4"] = 'Holyday;定休日';
calObj[0].month["0-5"] = 'Holyday;定休日';
calObj[0].month["6-1"] = 'Holyday;定休日';
calObj[0].month["6-2"] = 'Holyday;定休日';
calObj[0].month["6-3"] = 'Holyday;定休日';
calObj[0].month["6-4"] = 'Holyday;定休日';
calObj[0].month["6-5"] = 'Holyday;定休日';

holyday というのは、日付の背景を赤くする為に必要なもので変えられません。後ろの「定休日」はポップアップに表示する文字列なので自由に変えても問題ありません。

夏季休業日などの設定方法

夏季休業日などは、毎月第○曜日という設定ではできません。その場合は、以下のようにします。

calObj[0].month["8-3-2"] = 'Holyday;夏季休暇';

3つの数字に着目してください。これは8月の第二水曜日を夏季休暇にする設定です。何日かある場合は、その分行数を追加して設定します。

休日以外の設定をしたい場合

休日設定だと日付の背景が赤くなりますが、赤以外で休日以外の設定をしたい場合もあると思います。その場合は、付属の CSS を開いて設定します。

div.cal_wrapper table.cal tr td div.任意の文字列 {
	font-weight: bolder;
	color: #F00;
	background-color: #FEE;
}

「…div.Holyday」という箇所が休日設定の CSS となているので、これを丸々コピーします。.Holyday の箇所を任意の文字列に変更し、「background-color」の箇所で任意のカラーコードを入力します。

前述の定休日設定で「Holyday」の部分を今回決めた任意の文字列に変えると、背景が違う色で設定が可能です。

運用中のメンテナンス

年が変わると、夏季休業日や冬季休業日の日が変わるのでその部分は設定変更する必要があります。

おわりに

これで毎月のカレンダー更新作業が無くなってかなり時短に繋がりました。是非店舗運営にお役立てください。

  • Pocket

おすすめトピックス

関連記事

陳列された商品
【ネットショップ】商品が売れなくなってきた?それは当たり前です。

ネットショップで商品を出品していて、売上がだんだん伸び悩み落ちていく事に悩まれている方もいらっしゃると思います。もし何も施策を打っていないのであれば、それは当たり前です。 何もしなければ大概商品の売上は伸び悩んでいくもの […]

CSV
重くて開けないCSVをExcelで開くには分割するべし

CSV ファイルと言えば IT系の業務に携わっている人なら一度は使った事があるファイル形式だと思います。 目次1 CSVファイルとは2 重いCSVをExcelで開くには2.1 重いCSVを分割する方法3 おわりに CSV […]

商品ページの回遊率アップで売上向上を狙う為の施策について

どこのネットショップ、ショッピングモールでもそうですがマニュアル通りにただ商品を載せただけでは売上向上に繋がりません。ちょっとしたカスタマイズで商品ページの回遊率を高め、商品が売れる機会を増やすことができます。 カスタマ […]

カートボタン
2015年末版、楽天の商品ページのカートボタンを画像にしてクリックしやすくしよう

楽天と言えば有名なショッピングモールの一つです。楽天で買い物をした事がある方もいらっしゃるでしょう。 ネットショップで買い物をする場合、商品ページを見て内容に納得してほしいと思ったら「カートに入れる」ボタンを押すのが普通 […]

楽天のカテゴリ表示順序(優先度)変更でエラー「CSVファイルのフォーマットが違います。」

今回は楽天のカテゴリページの話をします。カテゴリページとはそのカテゴリに属する商品が一覧として表示されるページの事です。何も考えずにどんどん商品登録をしていくと、カテゴリページに表示される商品の順番はバラバラになってしま […]

ボタン
Photoshop不要!ボタン素材を自動生成してくれるButton Makerの使い方

Web 上にはボタンというものが至る所に存在しています。検索ボタン、閉じるボタン、送信ボタン、クリアボタン、これらは Web 上でよく見られるボタンです。 このボタン画像は一見簡単に見えて地味に手間がかかるんですよね。C […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
ESRランニングポーチ
ランニング中でもスマホが邪魔にならないESRランニングポーチのレビュー

日々のランニングやマラソン大会に出た時、ある悩みの種がありまし

はじめ整体院外観
滋賀県彦根市の「はじめ整体院」で体の歪みや重心のズレを相談してきた

近頃長い間歩くと足の痛みや足の不調が顕著に現れるようになってき

青森大間土産のマグロ一本釣り「やいっやー!山本さんラングドシャ」

お隣さんが本州最北端の青森県大間町へ旅行に行ったという事でお土

増田うどん
札幌の「増田うどん」甘いお出汁の肉うどんが魅力のうどん専門店

札幌市中央区役所の近くにある「増田うどん」は福岡肉うどんがメイ

鮭の旨味が濃厚な柳月のお煎餅「北海道鮭ぶし丸」が安いし超うまい

北海道で近年「鮭節(さけぶし)」と呼ばれる新食材が注目されてい

→もっと見る