UP 楽天 テンプレート 設置方法

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.htmlshopping-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!

楽天ゴールド 有料テンプレートのお申し込み

下記ボタンを押すと「お申込みフォーム」に移動します。
お申込み完了後、「購入お手続きご案内メール」をお送りいたします。