「楽天スマホ商品ページ」PC表示に切り替えた時、スマホ表示に戻すボタンを設置するテンプレートをご紹介

全く囲碁のルールが分からないですが「ヒカルの碁」にハマッているogaRia佐藤です。ちなみに私は将棋派です。

現在楽天市場のスマホ商品ページではPC表示に切り替える機能がついています。
しかしこのPC表示切替をすると元のスマホ表示に戻れなくなってしまいます。

今回このPC表示に切り替えた時にスマホ表示へ戻れるボタンを
設置するHTMLテンプレートをご紹介します。

デモ

PC表示へ切り替えたページの上部に大きくボタンが現れました。
このボタンで元のスマホページに戻す事になります。

専用タグをコピー

<style type="text/css">
<!--
.sp-change-link{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
}
.sp-change-link a{
	display:block;
	color:#333;
	width:98%;
	margin:30px auto 0;
	text-align:center;
	font-size: 48px;
	border-radius: 10px;
	border: 3px solid #afafaf;
	font-weight: bold;
	line-height: 94px;
	text-decoration: none;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ebebeb), color-stop(0.49, #ffffff));
	background: -webkit-linear-gradient(top, #ffffff 49%, #ebebeb 100%);
	background: -moz-linear-gradient(top, #ffffff 49%, #ebebeb 100%);
	background: -o-linear-gradient(top, #ffffff 49%, #ebebeb 100%);
	background: -ms-linear-gradient(top, #ffffff 49%, #ebebeb 100%);
	background: linear-gradient(top, #ffffff 49%, #ebebeb 100%);
	position:relative;
}
.sp-change-link a:after{
	content:">";
	position:absolute;
	right:30px;
}

@media screen and (max-device-width: 420px) {
	#rakutenLimitedId_header{
		margin-top:170px;
	}
	.sp-change-link{
		display:block;
	}
}
-->
</style>

<div class="sp-change-link">
	<a href="商品ページURL">スマートフォン用ページはこちら</a>
</div>

設置するページの通常の商品URLを指定します。
420pxと書かれている部分は
このボタンを表示する端末の幅指定になります。
420pxでiphone6plusの縦で表示した時の幅まで表示されます。
これ以上大きな端末で表示させたい場合は数値を大きくしてみてください。

RMS商品ページに貼り付ける

この専用タグはURLを個別に指定しなければなりませんので、
HTML部分は共通部分などでの一括指定ができません。

該当の商品編集ページを開き、
「PC用商品説明文」もしくは「PC用販売説明文」に
貼り付けましょう。

貼り付けの場所はどこでも大丈夫です。
最上部に表示されるように指定が施されています。

まとめ

いかがでしたでしょうか。
ヤフーショッピングの方ではすでに標準でこのボタンが表示されるようになっています。
楽天市場でも近日標準で設置されるかもしれませんが、
それまで少しでもお客様を取りこぼさないように対策していきましょう！