[楽天RMS]スマホページにオリジナルメニューを設置する方法

楽天スマホページでよく見かける各店舗オリジナルのヘッダーメニュー。今回はそのヘッダーメニューをバグコードを使用して設置方法を説明したいと思います。

ただのヘッダーメニューではなく、スクロールしたら表示するやつです。

サンプルタグ、参考サイトと共に紹介します！
ぜひ参考にしてみてください。

どんなものかイメージがわかない人のためにを楽天サイトではないですが、完成イメージを作成したのでこちらをご確認ください。

 
完成イメージ
 

設置方法

設置する箇所はRMS内の以下の場所になります。

デザイン設定メニュー（スマートフォン） ＞ ■スマートフォン用商品ページ – 商品ページ設定 ＞ 商品ページ共通説明文

設置タグ

続いて設置するタグになります。

<iframe src="●●●" id="★★★" scrolling="no" frameborder="0" =""=""></iframe ="">

<script src="▲▲▲" type="text/javascript" charset="UTF-8" =""=""></script 　　　　　　　　　　　　　　　　　　>

「●」部分はiframeで読み込むURLを、「★」部分には任意のIDを、「▲」部分はjsのURLになります。

実際のURLはこんな感じになります。

●：https://www.rakuten.ne.jp/gold/店舗ID/●●●.html

▲：https://www.rakuten.ne.jp/gold/店舗ID/▲▲▲.js

完成イメージタグ

今回完成イメージとして使ったコードを独自でカスタマイズしてもらい、楽天GOLDにアップすれば使えますので、ぜひご参考にどうぞ。

HTML

<div id="wrapper">
<div id="header" class="clearfix">
<a href="" id="logo">LOGO</a>
<a href=""><img src="http://maerc.me/image/cart.png" class="header_icon_l" alt="買い物かご" title="買い物かご"></a>
<a href=""><img src="http://maerc.me/image/search.png" class="header_icon" alt="商品検索" title="商品検索"></a>
</div>
<ul id="navi" class="clearfix">
<li><a href="">テキスト</a></li>
<li><a href="">テキスト</a></li>
<li><a href="">テキスト</a></li>
<li><a href="">テキスト</a></li>
</ul>
</div>

CSS

* {
	box-sizing: border-box;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-table;
}

html, body {
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: transparent;
	font-family: YakuHanJP, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif;
}

#wrapper {
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	background-color: #000000;
	opacity: 0.8;
}

#header {
	display: block;
	width: 100%;
	height: auto;
	padding: 10px;
	margin: 0;
	background-color: transparent;
}

#logo {
	display: block;
	width: 50%;
	float: left;
	margin: 0;
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	font-size: 18px
}

.header_icon {
	display: block;
	width: 18px;
	float: right;
	margin: 5px 0 0 10px;
}

.header_icon_l {
	display: block;
	width: 22px;
	float: right;
	margin: 5px 0 0 8px;
}

#navi {
	display: block;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	list-style-type: none;
	background-color: transparent;
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

#navi li {
	display: block;
	width: 25%;
	height: auto;
	text-align: center;
	border-right: #ffffff 1px solid;
	border-bottom: #ffffff 1px solid;
	border-top: #ffffff 1px solid;
	float: left;
	background-color: transparent;
}

#navi li:last-child {
	border-right: none;
}

#navi li a {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 12px;
	color: #ffffff;
	text-decoration: none;
	padding: 7px 0 8px 0;
	background-color: transparent;
}


#navi li a:link {
	color: #ffffff;
	text-decoration: none;
}

#navi li a:visited {
	color: #ffffff;
	text-decoration: none;
}

#navi li a:hover {
	color: #ffffff;
	text-decoration: none;
}

#navi li a:active {
	color: #ffffff;
	text-decoration: none;
}

JS

(function(){
//backscrollMenu
function backscrollMenu(){
	var styleElement = document.createElement('style');
	var cssStyle = '#★★★ { position: fixed; z-index: 9999; top: -110px; left: 0; width: 100%; transform: translate3d(0, 0, 0); }';
	if((/crios/.test(window.navigator.userAgent.toLowerCase())) || (/Android/.test(window.navigator.userAgent))){
		var cssElement =
		cssStyle +
		'.transition { transition: all 0.04s; }';
	}else {
		var cssElement =
		cssStyle +
		'.transition { transition: all 0.2s; } #★★★ { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; visibility: visible; }';
	}
	styleElement.innerHTML = cssElement;
	var divElement = document.createElement('div');
	var miscElement = '<div id="misc" style="position: fixed; color: rgba(255, 255, 255, 0.01);">-</div>';
	divElement.innerHTML = miscElement;
	var bodyElement = document.getElementsByTagName('body')[0];
	bodyElement.appendChild(styleElement);
	bodyElement.appendChild(divElement);
	var menuWrap = document.getElementById("★★★");
	var menuHeight = menuWrap.clientHeight;
	var before = 0;
	window.addEventListener("scroll", function(){
			var after = window.pageYOffset;
			if(after >= menuHeight) {
					menuWrap.classList.add("transition");
			} else {
					menuWrap.classList.remove("transition");
			}
			if(after > 200) {
					if(after > before) {
							menuWrap.style.top = "-" + menuHeight + "px";
					}
					else {
							menuWrap.style.top = "0";
					}
			} else {
					menuWrap.style.top = "-" + menuHeight + "px";
			}
			before = after;
	});
	var menuPopup = document.getElementById('menuPopUp');
	menuPopup.setAttribute("style","transition: transform 0.35s ease-in-out; z-index: 9999999;");
}
if(document.getElementById('★★★')){
backscrollMenu();
}
})();

★★★部分にはiframeで設定した[id=”★★★”]と共有のidを設定します。

参考サイト

今回参考にさせてもらった店舗さんになります。