新R-Storefrontページの構成
新R-Storefrontには、共通デザイン部分と、個別ページ部分があります。
その２つが合わさったものが、新R-Storefront上で閲覧できるページとなります。
個別デザイン部分は、「商品（ページ）」「カテゴリ（ページ）」です。
それぞれのhtml入力欄の説明文の内容や、買い物カゴ部分が、個別デザイン部分に含まれます。
※楽助・楽吉で移行すれば個別デザインの必要部分は入力されています。
そして、この個別デザイン部分だけでは、完全なページとはなりません。
店舗全体のナビゲーションも担う「共通デザイン部分」を作成しましょう。
共通デザイン部分を作るには
共通デザイン部分は大きく３つに分かれます。
- ヘッダ（Header 上部見出し）
- ページの上部に入る、お店の看板やナビゲーションなどを設置する部分です。
また、イベントバナー貼付にも活用することができます。
- レフトナビ（Left-Navigation 案内)
- ページ向かって左側に縦に長く置かれます。
各カテゴリへのリンクや、新着情報などによく使われます。
- フッタ(Footer 下部見出し）
- 主に、配送や運賃の案内にお使いの店舗様が多いようです。
データを取り出す
旧R-Storefront（上級）編集画面からトップページの説明文画面上を開きます。
これまで使用していたヘッダのhtmlが記載されていますので、
一旦、メモ帳やノートパッドなどのソフトにコピー＆ペーストして退避します。
同じく、説明文画面下を開きます。
これも、メモ帳やノートパッドなどのソフトにコピー＆ペーストして退避します。
また、説明文画面左をナビゲーションとして使用されていた場合は、こちらも退避します。
それぞれ、名前をつけて保存しておきます。
いずれも、何かあった時のために、すぐには消さないで下さい
看板画像を用意する
先ほど取り出したヘッダには、お店の看板となる画像が含まれていない場合が
あります。その場合は、改めて画像として保存と登録をやりなおす必要があります。
トップページで使用している画像を使う場合は、一旦、手元のパソコンに保存します。
ブラウザでトップページを表示し、画像の上で右クリックすると、
保存できるメニューが表示されますので、kanban.jpg等、わかりやすい名前(日本語不可)を
つけて保存し、これをR-cabinetにアップロードしましょう。
キャビネットへのアップロードは、商品画像を登録する をご覧下さい。
手動で個別に登録する場合は、R-Cabinetから登録して下さい。
登録の準備をする。
新R-Storefront、デザイン設定＞ヘッダーフッターレフトナビ設定画面では、
１０種類まで、登録を保存しておくことができます。
最初は１つのみ登録されていますが、これは初期設定なので、内容はほとんどありません。
これをコピーして、新しいナビ設定を１つ作り、そちらにデータを入れていきます。
「自動選択」にされていないテンプレートに編集を重ねても店舗内の表示に影響しません。
ある程度完成してから、作成した登録名のものを「自動選択」の対象に指定します。
※以降、内容を修正する際には、作業前にコピーを作って残しておくと、トラブル時にすぐ戻すことが出来ます。
ヘッダーコンテンツを作る
内容を作る
新R-Storefrontのデザイン設定から、ヘッダーフッターレフトナビの編集画面に入ります。
前のステップで商品画像をアップロードした場合は、その画像のアドレスを控えておきます。
R-Cabinetへ行き、該当画像の下に表示されているアドレスをコピーしておきます。
旧R-Storefrontから取り出した説明文画面上のhtmlと、保存した看板画像のアドレスを組み合わせます。
シンプルな中央寄せで表示する場合はこうなります。
<center><img src="●ここにアドレス●"></center>
--以下に説明文上から持ってきたhtml--
この部分をヘッダーコンテンツの入力欄に入れたら、一旦確認ボタンを押して、どのように表示されるか確認してみましょう。
プレビューで確認する
確認の時点で即座に店舗に反映されることはありませんので、安心して確認して下さい。
もし、プレビューで画像が表示されていない場合は、
その画像のアドレスが間違っているが、以前と移動してしまっている場合があります。
探して、正しいアドレスを入力しましょう。
また、編集途中でブラウザが終了してしまっても良いよう、こまめに「登録」処理を行いましょう。
「登録」しても、「自動選択」処理を行わない限り、店舗表示には影響しません。
フッターコンテンツを作る
内容を作る
新R-Storefrontのデザイン設定から、ヘッダーフッターレフトナビの編集画面に入ります。
旧R-Storefrontトップページ説明文・画面下から持ち出したhtml部分を
フッターコンテンツの入力欄に入れたら、一旦確認ボタンを押して、どのように表示されるか確認してみましょう。
プレビューで確認する
確認の時点で即座に店舗に反映されることはありませんので、安心して確認して下さい。
もし、プレビューで画像が表示されていない場合は、
その画像のアドレスが間違っているが、以前と移動してしまっている場合があります。
探して、正しいアドレスを入力しましょう。
また、編集途中でブラウザが終了してしまっても良いよう、こまめに「登録」処理を行いましょう。
「登録」しても、「自動選択」処理を行わない限り、店舗表示には影響しません。
レフトナビゲーションを作る
以前からレフトナビをお使いの店舗様の場合は、
旧トップページから取り出した説明文・画面左の内容に、
新しく作られたカテゴリのアドレスにリンクを張りなおすことで、
そのまま、新R-Storefrontにつながるレフトナビゲーションが作成できます。
これまで、レフトナビゲーションをご利用いただいていなかった場合、
まずは簡単な方法でリンクをつなげ、後々の店舗運営の中で、
ボタンをつけていただいたり等、改善していっていただければと思います。
カテゴリページへのリンクを張る
カテゴリのアドレスを調べるために、新R-Storefront「カテゴリページ設定」に入ります。
作成したカテゴリの一覧が「畳まれて」表示されていますので、「下位カテゴリを全て表示」をクリックして、全て表示させます。
そして、各カテゴリの編集ページに入ると、右上部に、
http://item.rakuten.co.jp/アカウント/c/0000000122/
このような、カテゴリのURLが表示されます。（末尾は１００からの作成順です）
最も重要なのは、末尾の数字/ですので、
カテゴリ名と数字/をペアにして記録してしまいましょう。
例として
- みかん 0000000122/
- いちご 0000000123/
- すいか 0000000124/
このようなデータが取れた場合、
これをリンク用のhtmlタグに埋め込むことによって、
新R-Storefrontのカテゴリにつながるリンクを作成することができます。
必要なタグのパーツはこちらです。
アカウントは、お店のアカウントに読み替えて下さい。
<a href="http://item.rakuten.co.jp/アカウント/c/●">▲</a><br>
●の部分には、数字/(例:0000000122/) が入ります。
▲には カテゴリ名(例:みかん) が入ります。
よって、完成形では、
<a href="http://item.rakuten.co.jp/アカウント/c/0000000122/">みかん</a><br>
となります。
これまで左ナビをお使いでなかった店舗さんでも、
ひとまずこれで、新しいカテゴリへの誘導を張ることができます。
また、<table>タグをお使いいただければ、任意の幅に設定することもできます。
もし、デザイン面等でグレードアップを図られる場合には、
ぜひ、ヒットＥＣサポートサービスをご利用下さい。
固定文言・フォントカスタマイズ
商品画像やナビゲーションが完成したら、
全体で使用する文字の色や大きさを決めます。
デザイン設定＞固定文言・フォントカスタマイズの画面で設定できます。
お店のカラーや性格に合わせて設定しましょう。
設定後は、商品ページで見え方を確認できます。
| 
