ネットショップを開店するときにもチェックしましょう！

「毎週水曜日がお休み」とか「毎月10日はお休み」などといった定休日の設定ができますし、
「1月1日から1月3日まではお休み」といった臨時休業の日の設定もできます。
あっ！自動更新といっても、これだけは前もって設定しておきます。
定休日は最初に設定してしまえば更新はいりませんし、
臨時休業日は数カ月先まで設定しておけばしばらくは更新不要ですね。

ではでは、設置方法です。

まず、ダウンロードしましょう。
営業日・定休日カレンダー

ダウンロードし、解凍すると
「single」と「multi」というフォルダがありますが
とりあえず今回は「single」だけ使います。

最終的には、この「single」フォルダを丸ごとGOLDサーバーにアップします。

アップの前に少し設定をしましょう。

「single」フォルダ内の「cal」フォルダを開きます。
cal.jsをメモ帳などテキストエディタで開きます。

このファイルに定休日の設定を行います。

１．毎週●曜日が定休日という設定
————————————
21行目から以下のような記述があります。

	//毎週○曜日の場合
	calObject[cal_Id].week = new Object();
	calObject[cal_Id].week["flag"] = 1;
	calObject[cal_Id].week["Sun"] = "Sun";
	calObject[cal_Id].week["Mon"];
	calObject[cal_Id].week["Tue"];
	calObject[cal_Id].week["Wed"];
	calObject[cal_Id].week["Thu"];
	calObject[cal_Id].week["Fri"];
	calObject[cal_Id].week["Sat"] = "Sat";

たとえば、毎週水曜日が定休日の場合にはこれを以下のように変更します。

	//毎週○曜日の場合
	calObject[cal_Id].week = new Object();
	calObject[cal_Id].week["flag"] = 1;
	calObject[cal_Id].week["Sun"];
	calObject[cal_Id].week["Mon"];
	calObject[cal_Id].week["Tue"];
	calObject[cal_Id].week["Wed"] = "holyday";
	calObject[cal_Id].week["Thu"];
	calObject[cal_Id].week["Fri"];
	calObject[cal_Id].week["Sat"];

いままで、土曜日が青、日曜日が赤だった表示が消え、水曜日が定休日の色になりました。

２．1月1日から1月3日までは臨時休業などという設定
——————————————-

こちらは11行目からの以下の部分を変更します。

	//定休日などはここで設定します。
	//calObject[cal_Id].day[ここに日にちを半角で] = クラス名;
	calObject[cal_Id].day = new Object();
	calObject[cal_Id].text = new Object();
	calObject[cal_Id].day["2009/6/9"] = "holyday";

これを以下のように変更しましょう。

	//定休日などはここで設定します。
	//calObject[cal_Id].day[ここに日にちを半角で] = クラス名;
	calObject[cal_Id].day = new Object();
	calObject[cal_Id].text = new Object();
	calObject[cal_Id].day["2012/1/1"] = "holyday";
	calObject[cal_Id].day["2012/1/2"] = "holyday";
	calObject[cal_Id].day["2012/1/3"] = "holyday";

お休みの日はどんどん増やせば大丈夫そうです。
もちろん、終了した日付は削除しておきましょう。

あとは、GOLDサーバーへ「single」フォルダごとアップしましょう。

では、いよいよレフトナビから呼び出してカレンダーを表示してみます。

呼出には
<ifram>タグを使用します。

RMSからレフトナビの編集を開き、カレンダーを表示したい部分に以下を挿入してみましょう。

<!--▽カレンダーここから▽-->
<div style="text-align:center">
<iframe width="175" height="200" frameborder="0" src="http://www.rakuten.ne.jp/gold/店舗ごとに異なります/single/cal.html"></iframe>
</div>
<!--△カレンダーここまで△-->

CSSファイルでデザインも調整可能です。
これで、毎月のカレンダー更新がちょっと楽になります!!

縦型バナーの表示

投稿日:2011/09/20 作成者: ahaha

楽天ショップなどでよく見かける縦型バナー、「送料無料」や「ポイント10倍」など目立たせたいものを右端や左端に表示させるものです。

これは背景画像の設定をスタイルシート(CSS)を使って行います。

まず、画像の準備。

画像は縦に繰り返して表示するために、上と下に切れ目のない画像が適しています。
幅や高さは、特に気にする必要はありませんが、
あまり幅が広すぎる画像は、表示したときに商品と重なってしまったりするのでおすすめではありません。
私はだいたい幅100pxくらいで作ることが多いです。

「送料無料」と「ポイント10倍」のバナーをいくつか載せておきますので
よろしければダウンロードしてお使いください。

「送料無料画像」5種類 >> soryo.zip

「ポイント10倍画像」5種類 >> point10.zip

設置方法です。

楽天ショップの場合

まず、R-Cabinetで、バナー用の画像を登録しておきます。
画像のURLをコピーしておきましょう。

RMS > デザイン設定 > ヘッダー・フッター・レフトナビ
使用しているヘッダー・フッター・レフトナビの編集に入ります。
ヘッダーコンテンツの一番上に以下のソースを書きます。

<style type="text/css"><!--
body {
 background:url('画像のURL') repeat-y right top;
}

画像のURLのところは、R-Cabinetで登録した画像のURLです。
repeat-y は縦方向にページがあるだけ繰り返すという設定です。
right はブラウザの右端に表示という設定ですので、左側に表示したい場合には left とします。

楽天ショップの営業日カレンダー

投稿日:2011/09/04 作成者: ahaha

返信

楽天ショップのほとんどのお店に営業日や定休日を示すカレンダーが表示されていますが
このカレンダーは自動更新ではありません。
(GOLDページならJavaScriptなどを使って自動更新カレンダーを設置できますが)
毎月、HTMLを作成してショップに貼り付けなくてはいけないので、
結構手間がかかります。

「カレンダーだけ毎月更新して～」なんて依頼も結構あるんですよ。

楽天のRMSマニュアルの中にもカレンダーの作成を支援するページがありますが
ここまでたどり着きにくい（笑）

私がよくお世話になっているサイトをご紹介しておきます。
自動作成カレンダー屋さん

枠の色や背景色などを選ぶと、自動的にカレンダーのHTMLを生成してくれます。
90日間は設定を記憶しておけるので、毎月一回作成して更新しておけば大丈夫です。

でも、祝日がお休みのショップや平日が定休日のショップはちょっと手直しが必要。
たとえば

こんなカレンダーを、自動作成カレンダー屋さんで作ってみます。
そうするとできあがったHTMLは以下の通り

<table border="0" cellspacing="1" cellpadding="1" bgcolor="#CCCCCC" style="font: 12px; color: #666666;">
<tr>
<td align="center" colspan="7" bgcolor="#FFFFFF" height="18" style="color: #666666;">2011年10月</td></tr>
<tr>
<td align="center" width="20" height="18" bgcolor="#FF6699" style="color: #FFFFFF;">日</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">月</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">火</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">水</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">木</td>
<td align="center" width="20" bgcolor="#FFFFCC" style="color: #666666;">金</td>
<td align="center" width="20" bgcolor="#FF6699" style="color: #FFFFFF;">土</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">1</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">2</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">3</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">4</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">5</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">6</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">7</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">8</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">9</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">10</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">11</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">12</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">13</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">14</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">15</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">16</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">17</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">18</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">19</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">20</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">21</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">22</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">23</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">24</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">25</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">26</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">27</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">28</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">29</td>
</tr>
<tr>
<td align="center" height="18" bgcolor="#FFCCCC" style="color: #666666;">30</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">31</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFFFFF" style="color: #666666;">　</td>
<td align="center" bgcolor="#FFCCCC" style="color: #666666;">　</td>
</tr>
</table>

33行目の10日は祝日です。
自動生成したカレンダーは祝日表示になっていないので、祝日表示にするには
<td align=”center” bgcolor=”#FFFFFF” style=”color: #666666;”>10</td>
を
<td align=”center” bgcolor=”#FFCCCC” style=”color: #666666;”>10</td>
と書き換えます。
土曜日や日曜日の設定と同じにすればOKです。
bgcolorが背景の色、style=”color:　” が文字の色です。

平日がお休みのショップも同じように書き換えればOKです。

Cocochi-Cafeにようこそ

投稿日:2011/04/05 作成者: ahaha

返信

2000年ごろからWebに携わってきましたが、最近はネットショップの支援が多くなりました。
楽天のショップをつくったり、メルマガを書くお手伝いをしてみたり。
いろんなお店のいろんな商品にかかわらせていただいて、とっても楽しいです。

私が、いろいろ試行錯誤していることや
ネットショップを作るのに必要なちょっとしたTipsなどをご紹介しようかなと思います。
こんなこと、いちいち頼まなくても自分でできたらいいのに、、、なんて思っておられる方に
見ていただけたら嬉しいです！