昨日に引き続いて、商品ページを作る時の参考記事。
商品ページに特化した内容じゃないけど、言いたいことをちゃんと伝えることができるように
ライティングするコツが書かれています。
詳しい説明なんて、ほとんど読んでもらえないと思わないといけないですよね。。。
せっかくいい商品なのに伝わらない、、、という
残念なことにならないために、参考になりましたのでご紹介。
>> Webは紙より、リーダビリティが問われる 離脱を防ぐ、「流し読みでどうぞ」コピーの書き方とは？
大切なことは先に書く
簡潔に要約する
どちらも商品ページでも重要なことですね。
「伝えたいことをなるべく早めに」
「要約して最後にも繰り返す」
昨日紹介したランディングページの作り方の記事とも通じますね。
>> 昨日の記事「商品ページをどう作ればよいか参考になります」
ネットショップのバナーや商品ページを作成する場合に使用するフォント(書体)
みなさん、どんなものを使われてますか？
ネットショップですから商用利用ということになります。
「フォントってどれでも使っていいでしょ」とか
「このバナーに使っているフォントちょうだい！」なんて言われてしまうことが時々あります。。。
いえいえ、フォントにも著作権がありますから
何でも使っていいわけではないんです。
「商用利用可能」とうたわれているものを利用しましょう。
日本語はひらがな、カタカナ、漢字と文字数がとても多いので
フォントを作るのはとってもたいへん。
それで、フリー(無料)で提供してくださっているものはあまり多くはありませんが
フリーでもいろいろありますので
まずはそれを使ってみることをお勧めします。
いくつかご紹介
まだまだ、いろいろありますが
タイトルなどにど～んと使えるゴシックなどはなかなかフリーではないですね。
こちらはフリーではありませんが
とってもお得で、色々使えるのでぜひ！
日本語書体だけでも255書体
ノーマルなものからデザインフォントまで
結構使えるフォントが満載です！
とりあえずこれを用意しておけば、なんとかなります！
書体の一覧などはこちらでご確認ください
>>FONT×FAN HYBRID
楽天ショップの営業日カレンダー、毎月更新するのめんどうだ！！とのご意見から
自動更新カレンダーを設置しようということになりました。
自動更新ということは、JavaScriptを利用する方法が考えられますが、
楽天ショップの場合、通常のRMSで作成するトップページやレフトナビには
JavaScriptが使用できません。
そこで、JavaScriptカレンダーを設置するにはGOLDサーバーを利用しなくてはなりません。
「GOLDサーバーってHTMLがわからないと無理なんでしょ！うちはムリムリ！！」と
よくショップオーナー様に言われてしまいます。
でも、JavaScriptファイルだけGOLDサーバーに置いて
通常のRMSのレフトナビから呼び出せば結構簡単に設置できます。
では、やってみましょう！
まず、JavaScriptカレンダーを用意。
とってもステキなカレンダーをお借りしてしまいました。
営業日・定休日カレンダー
最初の設定がちょっと複雑ですが、デザインや使い勝手がとっても良いのです！！
「毎週水曜日がお休み」とか「毎月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ファイルでデザインも調整可能です。
これで、毎月のカレンダー更新がちょっと楽になります!!
楽天ショップなどでよく見かける縦型バナー、「送料無料」や「ポイント10倍」など目立たせたいものを右端や左端に表示させるものです。
これは背景画像の設定をスタイルシート(CSS)を使って行います。
まず、画像の準備。
画像は縦に繰り返して表示するために、上と下に切れ目のない画像が適しています。
幅や高さは、特に気にする必要はありませんが、
あまり幅が広すぎる画像は、表示したときに商品と重なってしまったりするのでおすすめではありません。
私はだいたい幅100pxくらいで作ることが多いです。
「送料無料」と「ポイント10倍」のバナーをいくつか載せておきますので
よろしければダウンロードしてお使いください。
「送料無料画像」5種類 >> soryo.zip
「ポイント10倍画像」5種類 >> point10.zip
設置方法です。
楽天ショップの場合
まず、R-Cabinetで、バナー用の画像を登録しておきます。
画像のURLをコピーしておきましょう。
RMS > デザイン設定 > ヘッダー・フッター・レフトナビ
使用しているヘッダー・フッター・レフトナビの編集に入ります。
ヘッダーコンテンツの一番上に以下のソースを書きます。
