UP楽天テンプレートの設置方法のご紹介（有料版）

UP楽天テンプレート（有料版）の設置方法をご紹介します。

UP楽天テンプレートには、有料版と無料版とで設置方法が異なる点があり、その違いによってRMSへの設置が簡単にできるなどのメリットも出てきます。

UP楽天テンプレート（有料版）のメリット

有料版では、ヘッダーやレフトナビ、フッターは全て『ブロック要素』で構成されています。
Goldページを複数ページ追加した場合に、一つの『ヘッダー』や『レフトナビ』や『フッター』を変更するだけで、その部分（ヘッダー・レフトナビ・フッター等）が全てのページ上で「変わる」と言う利点があります。
（作業コストが減りますね）

大量にGoldページを作りたくても、ヘッダーの一つを変えたら「他のページのヘッダー全てを変えなければならない…」となると、修正・変更する事自体が億劫になってしまって作業は進みません。

有料テンプレートの良さは、修正・変更がとても楽なのです。

また、RMS内の【ヘッダー・レフトナビ・フッター】エリアに対しても、有料版は『ブロック要素』で構成されている為、例えば『 header.html 』の中の『htmlデータ全て』をコピーして【RMSヘッダー】の中に貼り付ければ完了します。

Goldのデータ → RMSへの貼り付け（+CSSリンク） で完了です。

UP楽天テンプレートの設置

では実際に設置して行きましょう。

今回「UP楽天テンプレート」を設置させて頂く、楽天市場 山口果物 様です。
（ご協力誠にありがとうございます!!）

まずは、購入されたUP楽天テンプレート（有料版）を解凍して、
そのデータをFTPを使って全てのデータをサーバーエリアにアップします。

データを解凍すると、「楽天Goldデータ」と「説明資料」等がセットになっています。
（説明資料内で設定方法等は記載しております）
「楽天Goldデータ」のみをデスクトップに移動させます。

「UP楽天Goldデータ」のフォルダを開きますと、上図の中の赤枠部分のデータが入っています。
※全てのデータが必要となりますが、トップページだけ必要であれば、「index.html」＋「他のフォルダ」で設置可能です。
event.htmlやshopping-guide.html等は任意で設置して頂いて大丈夫です。

FTPを使い、自店舗の楽天Goldサーバーに、全てのデータをアップします。

アップ後、自店舗の楽天Gold店舗のURLを開いてみましょう。

楽天Gold：https://www.rakuten.ne.jp/gold/店舗名/index.html

全てが設置されていれば、上図の様なページが出てきます。
ここでは、まだ「店舗自体のURL」が設定されていない為、CSSが利いていません。

データ内の「URL」を修正しましょう。

テキストエディタを使い、「楽天Goldデータ」の中の「index.html」を開きます。
上図はドリームウィーバーで開いた状態のものです。

左側、赤枠で囲われている部分が「変更箇所」です。

記載では、https://www.rakuten.ne.jp/gold/店舗名/…..となっています。

この「https://www.rakuten.ne.jp/gold/店舗名/」の部分を全て、自店舗の楽天GoldのURLに置き換えます。

例）https://www.rakuten.ne.jp/gold/test/

html内のURLの書き換えが完了しましたら、保存し、
FTPを使って楽天Goldサーバーに「index.html」をアップします。
アップすると、上図の様に、CSSが利いた状態になります。

ただし、ヘッダーやレフトナビ、フッター等の「バナー画像」や「リンク先」は修正されていません。
全てのURL（バナー画像のURL・リンク先のURL）を修正します。

「楽天Goldデータ」内の「inc」フォルダ開くと、
ヘッダーhtml　レフトナビ（サイド）html　フッターhtml　スライダーhtml　が格納されています。

その中の「side.html」を変えてみましょう。
（※ヘッダーhtml もフッターhtmlも全て同じ手順でURLを変更します）

上図は「side.html」のソースです。

赤枠で囲われている「https://www.rakuten.ne.jp/gold/店舗名/」を、先ほどの「index.html」で行ったように、自店舗の楽天GoldのURLに全て変換します。

完了しましたら、変換したデータをFTPを使って自店舗の楽天Goldの「inc」内の「side.html」に置き換えます。

すると、下図の様に、バナー画像が表示される様になります。
（リンク先＜アンカーテキスト等も全て＞も含め、URLを全て変更してください）

後は、「inc」内のヘッダーhtmlやフッターhtml、スライダーhtmlも同じ様にURLを変更すれば、設置は完了です。

RMS自店舗で使っている画像をGoldにセットする

RMSの自店舗で使われている「バナー画像（リンク先）」を楽天Gold用に置きなおす方法をご紹介します。
今回は「スライダーhtml」のバナー画像の部分を置きなおします。

RMSのトップページにあるバナー画像のURLを取得します。
（ウィンドウズであれば、マウス右クリックで「画像のアドレスをコピー」ができます）

画像はR-キャビネットに入っているので、そのURLを取得し、「inc」内の「slider.html」の部分を書き換えましょう。

「slider.html」を開きます。

赤枠で囲われている部分がスライダーの設定場所になります。

<img src=””> この　src=”???” 　？の部分に取得した画像のURLを記載します。

記載が出来れば保存して、FTPでアップします。すると、下記の様にバナー画像が設置された状態になります。

全ての「画像」「リンク先」を修正すれば完了です。
（※不必要なスライダーのタグは削除していただいて大丈夫です。増やしたい場合はタグをコピーして増やしましょう）

また、バナー画像にリンク先を設定する場合は下記です。（アンカータグを追加します）

例）　<li><a href=”リンク先のURL”><img src=”画像のURL” alt=””></a></li>

UP楽天テンプレートのまとめ

共通する部分（ブロック）を複数作る事も可能です。

今回だと、「ヘッダー」「レフトナビ」「フッター」「スライダー」でしたが、「メインエリアにブロック」を追加する事も可能です。レフトナビの中に設置する事も、ヘッダーの種類を増やす事も可能です。

「ブロック」さえ作れば、その「ブロックのhtml」一つを変更する事で、他の部分に設置した「ブロック」が変更されます。
今までhtmlを全て手で打ちかえていた方には、とても便利に感じられたのではないでしょうか。

ブロックの仕組みは有料版の添付資料に記載されております。

RMSの「ヘッダー・レフトナビ・フッター」にも設置可能ですので、是非この機会に「作業効率」を追求してみて下さい。

▼▼ご購入はこちら▼▼

Follow me!