*

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

公開日: : 最終更新日: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

おすすめトピックス

関連記事

カートフォント
商用無料!様々なショッピングカートのデザインが揃っているフリーフォント

インターネットショッピングのサイトを作るなら必ず必要な「買い物カゴボタン」。お客様が商品を注文するために必要なボタンです。よく買い物かごに入れるという文字とともにショッピングカートのアイコンがあしらわれたボタンがよく使わ […]

5のつく日キャンペーン
Yahoo!ショッピング5のつく日だけ自動でバナーを切り替えてキャンペーンに誘導する

Yahoo!ショッピングでは5のつく日キャンペーンを継続的に実施しています。すなわち毎月5日、15日、25日にキャンペーンにエントリーして Yahoo!ショッピングで買い物をすると誰でもTポイントが5倍となるキャンペーン […]

Yahoo×CSS
Yahoo!ショッピングの商品ページで外部CSSを使用する方法

Yahoo!ショッピングで出店されているショップ運営者さんもたくさんいらっしゃると思います。 Yahoo!ショッピングといえば、商品ページで使えるタグが制限されていたり、文字数も制限され、外部スタイルシートも使えずデザイ […]

スマートフォン
楽天ショップの商品ページスマホ版が見やすく改善されリニューアルしてました

2015年9月下旬、楽天ショップの商品ページのスマートフォン版が見やすく、買いやすく改善されました。楽天本家の仕様改善です。告知はされていますが、ひっそりといつの間にか改善されていたので知らない方もいるかもしれません。そ […]

手間不要!楽天スマホページ自動で楽に作れる「Snapp」が凄い

ネットショップにおいてもスマートフォンからの利用者が PC 利用者を上回りつつある事は周知の事実となっています。PC のページは作りこんでいても、スマートフォンページまでは手が回らない!という方もいらっしゃると思います。 […]

楽天の選択し
楽天商品ページのカート上の選択肢を目立たせてスルーを防ぐ

楽天の商品ページにはカート上にお客様に選んでもらう選択肢を付ける事ができます。選択肢はプルダウンメニューで表示されます。例えば、商品をカートに入れる前にお客様に確認してほしい事とか、キャンペーンに参加するかしないか等を尋 […]

著者について

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

フォローはこちら

       

       
千歳市のイタリアンレストラン「アキオカ」でパスタランチ

「アキオカ」は北海道千歳市にある格調高いイタリアンレストランで

Fuwattoまるやまキッチン!札幌市円山のふわふわオムライスとパンケーキのお店でランチ

札幌市の円山公園近くにある「Fwatto まるやまキッチン」は

札幌駅前の野菜が美味しいベジタブルバー「野菜バルMAHALO」ハワイな雰囲気を楽しめます

札幌駅前に野菜が美味しいベジタブルバーがあります。その名前を「

外国人にも人気な中部国際空港のガチャガチャコーナーが豊富

日本でお馴染みのガチャガチャ、正式名称をカプセルトイという所謂

Illustratorでオブジェクトの背景を画像にする為にスウォッチに登録する方法

Illustrator でオブジェクトの背景を画像にしたいとい

→もっと見る