ネットショップ運営担当者のブログ

楽天GOLDテンプレート取扱説明書(1.初期設定index.html作成)

  • 2021年1月26日
  • 2021年6月12日
  • 楽天GOLD
  • 392view
  • 0件

このページは当サイトが販売している
楽天GOLD用レスポンシブテンプレートの説明書になります

楽天GOLD用トップページのテンプレートが安い!レスポンシブでスマホ対応

この記事では、楽天GOLD用レスポンシブテンプレートの初期設定の方法を解説します

取扱説明書-目次
1.初期設定index.html作成(このページ)
2.楽天GOLDへアップロード

head部分の設定

head部分(6行目辺り)の設定をします

  <meta charset="utf-8">
  <meta name="description" content="メタディスクリプションを入力してください">
  <meta name="keywords" content="***,***,***,***,***,***">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>タイトルを入力してください</title>
  1. メタディスクリプション
    content=”メタディスクリプションを入力してください”の箇所にショップの説明を入れてください
  2. メタキーワード
    content=”***,***,***,***,***,***”>の箇所にショップのキーワードを入れてください
  3. タイトル
    <title>タイトルを入力してください</title>の箇所にショップ名を入れてください

ヘッダー部分の設定

ヘッダー部分の設定をします

店舗ロゴ部分

店舗ロゴ部分(43行目辺り)

<div class="logo">
<a href="https://www.rakuten.co.jp/******/" class="" title=""><img src="images/logo_240_120.png" alt="logo" height="100px"></a>
</div>
  1. ショップのロゴマークを用意します。背景がホワイトは透明が望ましいです
    画像をFTPを使いimagesのフォルダ内にアップします(上記画像URLの場合)
  2. 上記箇所に店舗トップページと画像URL(画像ファイル名)を入れます

最上部テキストエリアの設定

最上部テキストエリア(31行目辺り)

<p class="text-tax">3,980円以上お買物で送料無料</p>

<p class=”text-right”>3980円以上で送料無料</p>
最上部にテキストを入れることができます

トップメニュー

トップメニュー(33行目辺り)

<ul id="nav">
        <li><a href="https://www.rakuten.co.jp/******/news.html">メルマガ</a></li>
        <li><a href="https://www.rakuten.co.jp/******/info2.html">お買い物ガイド</a></li>
        <li><a href="https://www.rakuten.co.jp/******/info.html">会社概要</a></li>
        <li><a href="https://www.rakuten.co.jp/">楽天市場</a></li>
      </ul>

上記******の箇所に店舗IDを入れます

検索ボックス、買い物かごの設定

検索ボックス、買い物かごの設定をします

検索ボックスの設定

検索ボックスの設定箇所は3か所あります

  1. 41行目辺り
  2. 99行目辺り
  3. 319行目辺り

3か所とも同じ様に設定してください

<form id="search-form-upper" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc" method="get" accept-charset="EUC-JP">
<input value="6" type="hidden" name="sv">
<input value="****" type="hidden" name="sid"><!--店舗専用コード(数字)-->
<input value="****" type="hidden" name="su"><!--店舗ID(英数字)-->
<input value="****" type="hidden" name="sn"><!--店舗名(日本語)-->
<input value="A" type="hidden" name="f">
<input type="text" name="sitem" class="searchbox_input" placeholder="商品を検索する">
<input type="image" alt="ストア内検索" src="images/search.png" class="searchbox_btn" width="30" height="30">
</form>

①<input value=”****” type=”hidden” name=”sid”><!–店舗専用コード(数字)–>
****に店舗専用コード(数字)を入れます
全商品表示(空白でショップ内検索)のURL
https://search.rakuten.co.jp/search/mall/?sid=***** ←この部分を入れてください

②<input value=”****” type=”hidden” name=”su”><!–店舗ID英数字–>
****に店舗ID(英数字)を入れます
店舗のトップページ
https://www.rakuten.ne.jp/gold/****/
の店舗IDを入れます

③<input value=”****” type=”hidden” name=”sn”><!–店舗名(日本語)–>
****に店舗名(日本語)を入れます

買い物かごの設定

検索ボックス(51行目辺り)

<div class="basket">
<a href="https://basket.step.rakuten.co.jp/rms/mall/bs/cart/?shop_bid=****" class="" title=""><img src="images/cart.png" alt="cart" width="30" height="30"></a>
</div>
</div>
<div class="basket-lower">
<a href="https://basket.step.rakuten.co.jp/rms/mall/bs/cart/?shop_bid=****" class="" title=""><img src="images/cart.png" alt="cart" width="30" height="30"></a>
</div>

shop_bid=****の部分に店舗専用コード(数字)を入れてください
上記2か所****があると思いますので両方とも同じように入れてください

ヘッダーのカテゴリー上テキスト部分

最上部テキストエリア(59行目辺り)

<div class="top-text">
<p>************のお店です</p>
</div>

<p>************のお店です</p>
にテキストを入れることができます
お店の紹介や企画やインフォメーションを書くことができます

ヘッダーのカテゴリー

ヘッダーのカテゴリー(65行目辺り)

<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">カテゴリ5</a>
</li>
</ul>
</div>

カテゴリーを5つ入れられます
カテゴリ名とhref=”#”にカテゴリのURLを入れます

カテゴリではなく、新作やタイムセールなど特集などをいれても結構です

メインエリアの設定

メインエリアの設定をします。

スライダー部分

スライダー部分(118行目辺り)

<div class="col-xs-12 col-sm-12 col-md-10 col-lg-8">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators" background-color="#333">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<a href="#"><img class="d-block w-100" src="images/slider_700_400.jpg" alt="First slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="images/slider_700_400.jpg" alt="Second slide"></a>
</div>
<div class="carousel-item">
<a href="#"><img class="d-block w-100" src="images/slider_700_400.jpg" alt="Third slide"></a>
</div>
</div>

デフォルトではバナーを3つ入れられます
*どんな縦横比でもはいりますが700×400pxを推奨します

バナーは増やしたり減らしたりすることができますが、その際
<li data-target=”#carouselExampleIndicators” data-slide-to=”2″></li>
この部分もバナーと同じ数にしてください

バナーの画像URL(アップロードする必要あり)、リンクURLをそれぞれ入れる必要があります

お店の説明部分

お店の説明部分(154行目辺り)を設定します

<div id="store-description">
<h1>*********について</h1>
<br>
<p>お店の説明お店の説明お店の説明<お店の説明お店の説明お店の説明</p>
<p>お店の説明お店の説明お店の説明お店の説明お店の説明お店の説明</p>
<p>お店の説明お店の説明お店の説明お店の説明お店の説明お店の説明</p>
</div>

どんなお店なのか、お店の説明を書くことができます

<h1>*********について</h1>
*********の部分にショップ名を入れます

お店の説明の部分にお店の説明(どんなお店なのか、どんな商品を売っているのか)を書きます

新商品

新商品エリア(169行目辺り)

<div class="col-6 col-sm-6 col-md-6 col-lg-3 ">
              <div class="new-item">
                <div class="item-image">
                  <a href="#"><img src="images/item_640_640.jpg" alt="new-item1"></a>
                </div>
                <p class="new-tag">NEW</p>
                <a href="#"><p class="item-name">商品名商品名商品名商品名</p></a>
                <p class="price">3,000円</p>
              </div>
            </div>

デフォルトでは新作商品を4商品入れられます
上記範囲が1商品となります。増やしたり減らしたりすることで入れられる商品数も変えられます

商品画像URL(アップロードする必要あり)、リンクURL、商品名、価格を1商品ごとに入れます

新作エリアの下部のもっと見るの部分も設定します
<a href=”https://search.rakuten.co.jp/search/mall/?s=4&sid=****”>もっと見る</a>
****の部分に店舗IDを入れて下さい

ランキング

ランキングエリア(215行目辺り)

<div id="ranking">
          <font size="5" color="black">ランキング</font>
          <div class="row">
            <div class="col-6 col-sm-6 col-md-6 col-lg-3 ">
              <div class="ranking-item">
                <div class="ranking-image">
                  <img src="images/rank1.png" alt="rank1">
                </div>
                <div class="item-image">
                  <a href="#"><img src="images/item_640_640.jpg" alt="new-item1"></a>
                </div>
                <a href="#"><p class="item-name">商品名商品名商品名商品名</p></a>
                <p class="price">3,000円</p>
              </div>
            </div>

デフォルトではランキング商品を4商品入れられます
上記範囲が1商品となります。ランキングの画像があるため、商品を減らすことはできますが、4商品以上増やすことはできません

<img src=”images/rank1.png” alt=”rank1″>
の部分にランキングを数字を入れます

後は新作エリアと同じように
商品画像URL(アップロードする必要あり)、リンクURL、商品名、価格を1商品ごとに入れます

コンテンツ

コンテンツエリア(272行目辺り)
コンテンツエリアでは特集やイベント、商品紹介などに使うことができます

<div class="card mb-3">
<div class="row g-0">
<div id="image" class="col-md-5">
<div class="img" >
<a href="#"><img src="images/item_640_640.jpg" alt="..." style="max-height: 200px;"></a>
</div>

</div>
<div class="col-md-7">
<div class="card-body">
<h5 class="card-title">****について</h5>
<p class="card-text">ああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<div class="see-more">
<a href="#">もっと見る</a>
</div>
</div>
</div>
</div>
</div>

デフォルトではコンテンツを2商品入れられます
上記範囲が1商品となります。増やしたり減らしたりすることで入れられるコンテンツ数も変えられます

****について
コンテンツ名を入れます

<p class=”card-text”>あああああああ…</p>
コンテンツの説明を入れられます

<a href=”#”>
コンテンツのURLを入れてください
URLいてる箇所は2か所あります

レフトナビの設定

レフトナビの設定をします

レフトナビのカテゴリー、インフォメーション

レフトナビのカテゴリー、インフォメーション(332行目辺り)

<div class="menu">
            <font size="4" color="black">カテゴリー</font>
            <br>
            <a href="#">カテゴリ1</a>
            <a href="#">カテゴリ2</a>
            <a href="#">カテゴリ3</a>
            <a href="#">カテゴリ4</a>
            <a href="#">カテゴリ5</a>
            <br>
            <br>
            <font size="4" color="black">インフォメーション</font>
             <a href="https://www.rakuten.co.jp/****/info2.html">お買い物ガイド</a>
            <a href="https://www.rakuten.co.jp/****/info.html">会社概要</a>
            <a href="http://review.rakuten.co.jp/shop/4/******_******/">レビュー</a>
            <a href="https://www.rakuten.co.jp/****/news.html">メルマガ登録</a>
            <a href="https://basket.step.rakuten.co.jp/rms/mall/bs/cart/?shop_bid=****">お買い物かご</a>
          </div>

カテゴリーやインフォメーションの設定をします
カテゴリー数や項目数は増減可能です

・カテゴリー
カテゴリ名とhref=”#”にリンクURLを入れます

・インフォメーション
<a href=”https://www.rakuten.co.jp/****/info2.html”>お買い物ガイド</a>
****に店舗ID(英数字)を入れます

<a href=”https://www.rakuten.co.jp/****/info.html”>会社概要</a>
****に店舗ID(英数字)を入れます

<a href=”http://review.rakuten.co.jp/shop/4/******_******/”>レビュー</a>
******にそれぞれ 店舗専用コード(6桁の数字)を入れます

<a href=”https://www.rakuten.co.jp/****/news.html”>メルマガ登録</a>
****に店舗ID(英数字)を入れます

<a href=”https://basket.step.rakuten.co.jp/rms/mall/bs/cart/?shop_bid=****”>お買い物かご</a>
******にそれぞれ 店舗専用コード(6桁の数字)を入れます

フッターの設定

フッターの設定をします(355行目辺り)

お買物ガイド

  1. 送料について
  2. 支払い方法について
  3. 返品交換について
  4. プライバシーポリシー
  5. お問い合わせ

などを設定することができます
こちらに関しては
店舗の概要やルールと照らし合わせながら、自由に記述ください

フッター内下記の箇所
<a href=”https://www.rakuten.co.jp/****/info2.html”>お買い物概要</a>(384行目辺り)
<a href=”https://www.rakuten.co.jp/****/info.html”>会社概要</a>(417行目辺り)
****に店舗ID(英数字)を入れます

コピーライト

コピーライト(426行目辺り)

©︎************Co.,Ltd.の箇所に
コピーライトを入れることができます

入力がすべて完了し、ページが完成しましたら
2.楽天GOLDへアップロードを行います

テンプレートの注意事項

本商品ご購入に関する利用規約になります。ご購入の前に必ずお読みください。
お客様がご購入された場合、本規約にご同意頂いたものとみなします。

  • データをダウンロードしている為、商品の性質上、購入後返金はできません。
  • ご自身、またはご自身の所属する法人または団体の運営するサイトで利用してください
  • テンプレートの内容を自由に編集してから利用できますが、その際、自己責任でお願いいたします。必ずバックアップをしてからご利用ください。当サイトは編集後の商品に一切の保証を持ちません。
  • 当テンプレートの利用または改変に関連して利用者または第三者に生じた損害について、当社はいかなる場合においても責任を負わないものとします。
  • 当テンプレートは購入時の売り切りとさせていただきます。商品をバージョンアップをする可能性がございますが、既に購入後のお客様は、バージョンアップのサポートを受けられません
  • 制作代行に利用することは可能ですが、改編してもテンプレートとしての販売はできません。
  • 当テンプレートに含まれる画像、HTML、CSS、Javascript等にかかる著作権を含む知的財産権は、加工の有無を問わず、すべて当サイトまたは当サイトに使用許諾を与える第三者に帰属します。

本規約に違反すると当社が判断する場合、当テンプレートの使用の差し止めを請求することができるものとし、利用者はすみやかに当該請求に従うものとします。

 

テンプレート自体に不具合等がございましたら
こちらまでお問い合わせください

お問い合わせ