*

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

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

おすすめトピックス

関連記事

ガラケーとスマホ
楽天スマホ商品ページで制限なく画像説明を載せる方法

楽天に限らずネットショッピング界隈ではスマートフォンでのアクセスが PC を上回るなど年々スマートフォン比率が上昇してきています。今まではスマートフォンは後回し~にしてきた所もあるかと思いますが、パソコン版もスマートフォ […]

楽天商品ページに複数の買い物かごボタンを設置する方法

今日は楽天ショップの商品ページについてのお話です。 これからAという商品を商品ページに載せるとします。そのAという商品には多数のオプション品があり、合わせてオプション品もたくさん売りたいという場合結構頭を悩ます問題だった […]

eメール
楽天メルマガうざいと思う人朗報!メルマガ有料化で配信が減るかも

楽天ショップのメールマガジンがいつも大量に来て鬱陶しいと思う人も多いかと思います。 それもその筈、何も意識せず楽天ショップで買い物をしたら標準でメールマガジンが送信される設定になっています。楽天で買い物をする度にメールマ […]

Amazonの商品説明文に画像を載せられるようになりました「商品紹介コンテンツ」

Amazon の商品ページを想像してみてください。商品画像に商品説明がリストで列挙されている程度で実にシンプルですよね。楽天など他ショッピングモールと比べて商品アピール具合が大人しいと思いませんか? その理由は Amaz […]

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

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

楽天のスマホ商品ページにPC版で見るボタンを追加するカスタマイズ

Freepikによるデザイン スマートフォンでウェブサイトを見ていたり、ネットショッピングをしている時に PC 版のサイトを見たいと思った事はありませんか? 大抵のウェブサイトやネットショッピングサイトでもスマートフォン […]

著者について

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

フォローはこちら

       

       
microUSBケーブルでもUSB Type-Cに対応させるには変換アダプタを使おう

USB ケーブルといえば様々な家電や端末に使います。スマートフ

作業用BGMをすぐに探して作業したい人向けサイト「#作業してくる」の使い方と活用法【無料】

創作活動にしろ、書類作成、レポート作成、現代を生きる人々には作

ボンボンショコラ
珠玉のチョコレート専門店!滋賀県長浜市の黒壁近く「ボンボンショコラ」

滋賀県長浜市に本格チョコレート専門店があります。その名前は「L

縦の三点リーダー
縦の三点リーダーをウェブサイト上で表示する方法

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々

漬けトロチャーシュー麺
ボリューム満点の漬けトロとんこつラーメン!滋賀県長浜市の「麺屋風火」

滋賀県長浜市に出来たラーメン屋「麺屋風火」へ行ってきました。元

→もっと見る