楽天RMSでPC・スマホ共通の固定グローバルメニューを設置して回遊性アップ！

全国の楽天店長と担当者の皆様、こんにちわ。

どうも！ヤマダカイト（@slash_kaito）です。

クリスマスや大晦日、新年の１日から「楽天RMSで禁止されたHTMLコードを使う裏技」へのアクセスがあることに驚きをかくせないヤマダです。

皆さまちゃんとお休みしてますか・・・？！（心配）

忙しくて帰れないというデザイナーや楽天店長・担当者のために役に立つTIPSを今日もお届けします！

今回はグローバルメニューのお話。

固定のグローバルメニューとは

DEMOはこちら

グローバルメニューは、ブラウザ上部に常に表示されたナビゲーションメニューのこと。

これがあれば、ずら～っと下まで長い商品ページでも上に戻らずとも他のページに飛べるので、スマホ最適化には必須ともいえます。

詳しくは後述しますが、楽天共通のグローバルメニューもあり、これが隠れてしまうと減点対象となり、注意(または販売停止)となってしまうのでお気をつけください。

まあ一発で販売停止になることは、ほぼないと思いますが・・・

他の減点(自演レビュー投稿とか)と重なってない限りは。担当のECCに確認してみるといいかもしれませんね！

ちなみに自演レビュー投稿は、結構厳しく減点されるらしいのでお気をつけを….。

グローバルメニューに入れる内容

さて、メニューにどんな内容を入れるか。

店舗さんが、どういう商品へ誘導したいかなどにもよると思いますが、一般的には

「店舗トップ」

「商品一覧」

「カート（買い物かご）」

「レビュー」

「FAQ」

「楽天トップ」

「検索窓」

とかでしょうか。

あとお店によっては、キャンペーンバナーとかもあってもいいかも。目立ちますし。

店舗トップと商品一覧は当然入れるとして、意外と見られるのがレビューです。買い物する時って「このお店大丈夫かな？信頼できるかな？」って必ず思いますよね。レビューがすぐに見られれば、安心感にもつながります。

でも星が2とか3とかだと、ちょっと不安になってしまうので(笑)そういう店舗さんは上がってから出しましょう！

楽天トップへのボタンは、必ず入れないといけなかったはずです。グローバルメニューじゃなくても良かったかもしれませんが。確認しておきます。

グローバルメニュー本体のHTML・CSS

DEMOはこちら

グローバルメニューのHTML・CSSはmororecoさんの「グローバルナビをスクロール時に固定する方法」からお借りしたものを使います。

リセットCSSが読み込まれている前提です。もしリセットCSSがわからない方はferretのhttps://ferret-plus.com/4860をご覧ください。

●HTML

<div id="globalNavi">
    <ul>
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
        <li><a href="#">Menu4</a></li>
        <li><a href="#">Menu5</a></li>
    </ul>
</div>

●解説

Menu1〜５にはそれぞれのメニュー名を、#にはそれぞれのページへのリンクを貼ってください。ちなみにそれぞれのURLはこちら。

■お買い物ガイドURL

https://www.rakuten.co.jp/店舗URL/info2.html

■会社概要URL

https://www.rakuten.co.jp/店舗URL/info.html

■店舗レビューURL

https://review.rakuten.co.jp/shop/4/店舗ID_店舗ID/1.1/

■カート（買い物かご）URL

https://www.rakuten.co.jp/cgi-bin/RRS?MIval=basket&shop_bid=店舗ID

■店舗IDの確認方法

商品ページのカートのすこし下にある「レビューを書く」をクリック。そのURLの

https://review.rakuten.co.jp/wd/1_●●●●●●_○○○○○○○_0/?l2-id=item_review_write

この●●●●●●部分がショップIDで ○○○○○○○部分が商品IDになります。

●CSS

#globalNavi{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background:#333;
}
#globalNavi ul li a{
    background:#0094a3;
    width: 20%;
    float: left;
    padding:20px 0;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #777;
    box-sizing: border-box;
}
#globalNavi ul li a:hover{
    background:#333;
}
@media only screen and (max-width: 480px){
#globalNavi{
    height: 200px;
}
#globalNavi ul li a {
    height: 200px;
    padding: 70px 0;
}
}

●解説

管理は楽な方がいいので、@media only screen and (max-width: 480px){}で、PC・SP共通のレスポンシブになっています。background:を変えれば色の変更も可能です。文字の天地が変になった時は、最下部の#globalNavi ul li a {のpaddingを調整してみてください。

#globalNavi ul li aが通常の色で、#globalNavi ul li a:hoverがマウスを乗せた時の色。お好みでどうぞ。

かなりこだわっている店舗さんとかはメディアクエリで4パターン作って、大きいPCサイズ用・通常PCサイズ用・タブレット用・スマホ用とかにしています。ご興味あれば、そちらもこだわってみてはいかがでしょうか。

2018/3/1追記

@media only screen and (max-width: 480px){～以降はいらなかったです！大変失礼いたしました。

ご指摘いただいたS様ありがとうございます。

また、「ロゴを入れたい！」「アイコンを入れたい！」「ホバーでサブメニューが出るようにしたい！」など、さらなるカスタマイズが必要な場合はコメント欄かこちらまでお問い合わせください。

設置方法のイメージ

iframe(インラインフレーム)を使えば全ページ共通にできます。修正しても自動で全ページに反映されるので、iframeで設置しましょう。

<iframe>タグは、インラインフレームを作る際に使用します。 インラインフレームとは、文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。

引用:HTMLタグリファレンスより

つまり、ページ内で別のHTMLファイルから読み込んだ要素を、パコッと入れ込むイメージです。こんな感じ。

小難しい話が続くので息抜き。くまちゃん。

Gold上で作成したページへの設置

goldで作成したページへの設置は簡単です。それぞれのページのheader内にインラインフレームを入れるだけ。

その際、frameborderにnoを入れるのを忘れずに。線が入ってしまうと格好悪いので。

●HTML

<link rel="stylesheet" type="text/css" href="下記のCSS.css">
<div class="float_header">
<iframe src="https://www.rakuten.ne.jp/gold/店舗URL/グローバルメニューのURL.html" width="100%" height="60px" frameborder="0"  scrolling="no">この部分はインラインフレームで作成</iframe>
</div>

●CSS

.float_header{
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

●解説
height:は適宜調整してください。z-index:は隠れないように大きめの数字で。逆に他のコンテンツの下に隠したい時は-1;以下を指定してあげればOK。

RMS上で作成したページ（商品ページやカテゴリページ）への設置

商品ページやカテゴリページなど、RMS上で管理されるページには少し工夫が必要です。

なぜか。

それは未だにレスポンシブじゃないから….！PCとスマホそれぞれに設定が必要です。

そして、ここ大事！楽天固有のグローバルメニューが見えなくなってしまうと、ペナルティになります・・・！

なので、GOLDと違ってやることが２つあります。

①PC表示用に設定

②スマホ表示用に設定

そしてどちらも楽天固有のグローバルメニューが隠れないように調整しなければなりません。

それぞれ見ていきましょう。

PC表示用に設定

DEMOはこちら

●設定する場所

RMSトップから、
1-2デザイン設定＞PCデザインの共通テンプレート内「ヘッダー・フッター・レフトナビ」＞変更したいテンプレート名の編集をクリック＞ヘッダーコンテンツ内に下記HTMLを記入

●HTML

<style>

/*フローティングヘッダーの固定*/
#float_header{
        width: 100%;
    height: 50px;
    position: fixed;
    top: 56px;
    left: 0;
    z-index: 99998;
    }

</style>
<div id="float_header">
<iframe src="https://www.rakuten.ne.jp/gold/店舗URL/グローバルメニューのURL.html" width="100%" height="60px" frameborder="0" scrolling="no">この部分はインラインフレームで作成</iframe>
</div>

●解説

なぜかCSSを読み込ませようとすると上手くいかないので、PC版のみインラインでCSSを指定します。Goldのページとの違いはtop: 56px;とz-index: 99998;を指定しているところ。

これが楽天独自のグローバルメニュー対策です。これ↓の高さが56pxだからtop: 56px;を指定しているのです。こちらはスクロールしても固定で、常に上部にあります。

この真下に置くような感じで設置しましょう。

そして、この楽天SPUバナー。

こちらはグローバルメニューと違い、スクロールしてもついてきません。そして、もともとz-index: 99999;と指定されているので、z-index: 99998;を指定してあげれば隠れて見えなくなることはありません。

スマホ表示用に設定

●設置場所

RMSトップから、
1-2デザイン設定＞スマートフォンデザイン設定内の「商品ページ 共通パーツ設定」or「カテゴリページ 共通パーツ設定」＞「商品ページ共通説明文」or「カテゴリページ共通説明文」

●HTML

<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/店舗URL/cssファイル名.css"="">
<iframe src="https://www.rakuten.ne.jp/gold/店舗URL/グローバルメニューのURL.html" width="100%" height="250px"scrolling="no" frameborder="0" class="float_header" ="" =""></iframe ="" ="">

●解説

おなじみ楽天RMSで禁止されたHTMLコードを使う裏技でもありました、「 =””」を入れてCSSやiframeを入れ込みましょう。

●CSS

/*最上部ヘッダー*/
#ipnsh-header{
    position: relative;
    z-index: 2 !important;
    background: white;
}

/* 検索窓部分*/
#rstTopSearch{
    margin-bottom: -8px !important;
}
#searchArea{
    z-index: 3;
}
#rstTopSearch .searchInputWrap{
    width: 103% !important;
}

/*楽天固有のメニュー*/
#topFuncShopPopup{
    z-index: 2 !important;
}
.itemtitle{
    position: relative;z-index: 2 !important;
}

/*コンテンツ部分*/
main{
    z-index: -99999 !important;
}
/*グローバルメニュー部分*/
.float_header{
    width: 100%;
    height: 201px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1 !important;
}

●解説

元々ある楽天のナビゲーションを隠さないように、z-index:などを調整してグローバルメニューを背面にまわしている、という感じです。

きちんとheightを指定してあげないと表示されないので、気をつけてください。autoだとiPhoneでは表示されますが、その他のスマートフォンだと表示されない可能性があります。

早くスマホに対応してほしいですね。というか商品ページは早くレスポンシブにしてほしい。

本日のまとめ

今回は楽天ページへのグローバルメニューの入れ方をご紹介しました。設置する時、かなり色々調べて苦労した覚えがあったので、そんな方の役にたてばと思い記事にしました。

上手にできましたでしょうか？もしできなかったり、わからなかったりした際は、コメント欄でご質問ください。

本当にスマホの回遊性って大事なので、必ず入れた方がいいと思います。

さらにスマホの回遊性を上げるならこちらから。

楽天RMSのPC版で、スクロールで追従するサイドバナーを貼る方法

いよいよ冬商戦。仕込みでお忙しい楽天店長さんへ。 どうも！ヤマダカイト（@slash_kaito）です。 本日はキャンペーン中などによく使用される、PCサイドバナーについて。 この方法は、正規の楽天RMSの使用方法と異なります。 楽天のシス...

rinkai-design.com

2021.11.24

社内にデザイナーもコーダーもいないし全然わからん！できない！という店長さんは是非ご相談ください。

お問い合わせはコメント、またはこちらからどうぞ。

そろそろ楽天内での価格競争から一歩先へ行きませんか？

楽天市場での一番のメリットは集客力。

Amazon、Yahoo!と並ぶその集客力は、莫大な売り上げをもたらします。

ですが、型番商品を扱っている店舗さんは過当な価格競争に巻き込まれがち。

それは楽天だけでなく、Yahoo!やAmazonでも同じ。

そこから抜け出すためには、独自の店舗ブランディングを行うことが必要です。

「でも、今以上にリソースもコストもかけられないし・・・」

そんな店舗にオススメなのが、BASE。数多くあるデザインテンプレートから、オシャレなECショップが簡単に作れてしまいます。

しかも登録・月額費用がすべて無料。

楽天は月額使用料だけで数万円かかりますからね・・・そこから、さらに広告費もかかってしまいます。

もちろん独自ドメインで運営できるから、seo対策や広告出稿もバッチリ。

その代わりBASEでは決済手数料が3.6%＋40円かかります。※決済手数料は送料にもかかります。 ※別途サービス利用料3%がかかります。

1000万円売り上げたとしても66万円弱。

多店舗展開は、すればするほど新規の流入も増え、売上は上がります。

楽天だけに頼らない売上の柱を作っていきましょう！

BASEの詳細はこちらから。