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

楽天RMSのPCヘッダー・フッター・レフトナビのテンプレート!設定手順(前編)

  • 2021年4月10日
  • 2021年4月10日
  • 楽天GOLD
  • 161view
  • 0件

このページは当サイトが販売している
「楽天GOLDで作成するトップページのテンプレート」におまけ(無料)で付属する
「【おまけ】楽天RMSのPCヘッダー・フッター・レフトナビのテンプレート」の取扱説明書(初期設定)です

基本的にテンプレで作成する購入者用のページとなります

テンプレートに関して知りたい方はこちらをお読みください

楽天GOLDトップページのテンプレートが安い!レスポンシブでスマホ対応【初心者おすすめ】

店舗トップページのデザインと
PC商品ページ、カテゴリページのデザインが似ている方がいいとの
要望があり、おまけ(無料)としてお付けしました

*こちらで説明したPCヘッダー・フッター・レフトナビのテンプレートに関しては、トップページテンプレートのおまけ特典になりますので、こちらのテンプレートに関する理由での返品に関してはお断りさせていただきます。あらかじめご注意ください。

手順1.テンプレートの中身と準備

【おまけ】楽天RMSのPCヘッダー・フッター・レフトナビのテンプレートの中身ですが

HTMLファイル2つ
header_common.html
footer_common.html

テキストファイル3つ
楽天ヘッダー.txt
楽天フッター.txt
楽天サイドナビ.txt

になります。ご確認ください

あと前提として
楽天GOLDをトップページを利用しているものとして説明させていただきます

PCヘッダー・フッター・レフトナビはRMS内から設定するのですが
トップページで使うcssファイルを使う理由から楽天GOLDも合わせて使います

手順2.ヘッダー(header_common.html)の設定

では設定していきましょう

まずはHTMLファイル2つ(header_common.html、footer_common.html)
を店舗用に記入していきます
バックアップする(DLした時のファイルを残しておく)ことをおすすめします

まずはheader_common.htmlから
エディタなどを使ってファイルを開いてください

楽天GOLDトップページと設定がほとんど同じなので
index.htmlファイルを開いてそちらを参考にしていただくのもおすすめです

head部分の設定

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

  <meta charset="utf-8">
  <title>ヘッダー/*********</title>

タイトル <title>ヘッダー/*********</title>
*********の箇所にショップ名を入れてください

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

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

<nav class="navbar navbar-light red">
<p class="navbar-brand">************のお店です</p>
<!--<form class="form-inline">-->
<p class="text-right">3980円以上で送料無料</p>
</nav>
  1. <p class=”navbar-brand”>************のお店です</p>
    の箇所にショップの説明などを入れることができます
  2. <p class=”text-right”>3980円以上で送料無料</p>
    最上部にテキストを入れることができます

トップメニュー

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

<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を入れます

店舗ロゴ部分

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

<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>

楽天GOLDトップページと同じロゴを使うとよいでしょう
imagesのフォルダ内にアップしていれば画像ファイル名を記載すればokです
******にトップページのURL(店舗ID)を記入します

検索ボックスの設定

検索ボックスを設定します(45行目辺り)

<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”><!–店舗名(日本語)–>
****に店舗名(日本語)を入れます

買い物かごの設定

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

<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>

shop_bid=****の部分に店舗専用コード(数字)を入れてください

ヘッダーのカテゴリー

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

<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を入れます

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

ここまでheader_common.htmlの設定が終わりです。上書き保存します

手順3.フッター(footer_common.html)の設定

次は同じようにfooter_common.htmlを設定していきます

お買物ガイド

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

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

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

コピーライト

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

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

入力がすべて完了し、ページが完成しましたら
楽天GOLD、RMSへを行います