楽天市場出店者向け ショップ運営が捗るカスタマイズ、ハックまとめ

執筆: UZUREA編集部 アイコン UZUREA編集部

この記事をSNSでシェア

国産のネットショッピングモールとして、依然として膨大な店舗・利用者を誇る楽天市場。

運用システムの歴史が長い分、管理システム=『楽天RMS』関連の使い難さ、難解さ、そしてその制約について否定的な声を聴く事も多くあります。

とは言え、利用者=購入ユーザーにとっては、そんな事は無関係。現に様々な店舗が工夫し、他のモールや自由度の高いEC系CMS並のカスタマイズを行って運用し、成果を上げています。

そこで当記事では、楽天RMS+楽天GOLDの範囲で行えるティップス、ハックなどをまとめて行きたいと思います。

なお、当記事では、ある程度楽天市場の運営を行っており、基本システムについて知識のある方を対象としており、細かい解説は割愛いたします。

どうしても分からない箇所や、解決できない事があればコメント欄でご相談ください。
(ご返事をや効果の程を保証するものではありません)

当記事が言及する内容は、サービスの仕様や規約変更によって利用できなくなる場合も有るかもしれません。は当記事による直接的、間接的問わず、一切の責任を負いかねますので、ご理解ご了承いただける方のみお読みください。

比較的簡単なティップス、ハック

PC表示で独自の外部CSSを読み込ませる(楽天GOLD利用)

これは簡単ですが、以下に紹介するティップスにも活用しなければならないのでご紹介。

楽天GOLDを利用の任意のディレクトリにアップロードしたcssファイルを、RMSのヘッダーやフッターといったhtmlを記述できる箇所から読み込ませるだけです。

goldに作成した/cssディレクトリにmain.cssというファイル名で保存した場合

<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/【ショップID】/css/main.css" type="text/css" media="all" />

とすればOKです。

スマートフォン版でもなんとかCSSを読み込ませたいという時はもう少し工夫が必用です。(当ページ下部にて別途解説)

手間をかけず商品画像のサムネイルを利用する

R-cabinetから登録し、商品情報として登録する画像は、楽天のシステムで自動的に縮小された画像が生成されます。

商品リストや関連商品、解説中の画像などが必用になった際に、これらを手元のPCで態々作成する必要が無くなります。大規模なショップ運営になればなるほど、作業効率が上がる機能ですし、データの転送量も軽減できるので積極的に使っていきましょう。

例:縦100×横100pxと、縦200×横200pxの画像を出力させたい場合……

https://thumbnail.image.rakuten.co.jp/@0_mall/【ショップID】/cabinet/【R-cabinetユーザーフォルダ名】/【ファイル名.jpg】?_ex=100x100
https://thumbnail.image.rakuten.co.jp/@0_mall/【ショップID】/cabinet/【R-cabinetユーザーフォルダ名】/【ファイル名.jpg】?_ex=300x300

とする事で取得できます。

お店のIDがuzureaで、R-cabinetフォルダ名がuzureafile、ファイル名がuzurea.jpgであれば……

https://thumbnail.image.rakuten.co.jp/@0_mall/uzurea/cabinet/uzureafile/uzurea.jpg?_ex=100x100
https://thumbnail.image.rakuten.co.jp/@0_mall/uzurea/cabinet/uzureafile/uzurea.jpg?_ex=200x200

となります。

※掲載する場合はhtmlの記述に従って

<img src="https://thumbnail.image.rakuten.co.jp/@0_mall/uzurea/cabinet/uzureafile/uzurea.jpg?_ex=200x200" alt="">

といった様に記述すればOKです。

1×1 ピクセル~元画像より+100px大きいサイズまでの画像として呼び出す事が可能ですが、元画像の縦横非を変えてトリミング……という事はできません。

PC表示の店舗ヘッダーやフッターを左右最大(100%)にしたい

PC版のデザインで、ヘッダーやフッターに当たる部分をページの左右最大横幅にしたいという場合。未だにソースコードがtableデザインで構成されている楽天市場では、cssだけではこれを実現する事はできません。

RMSのヘッダー、もしくはフッター入力欄に下記のように記述する事で、実現が可能です。

</td></tr></table>
</td></tr></table>
</td></tr></table>
	<!--オリジナルヘッダー(またはフッター)ソースコード-->
	<!--オリジナルヘッダー(またはフッター)ソースコード end-->
<table width="100%" cellspacing="20" cellpadding="0">
<tr><td align="center">
<table width="800" cellspacing="0" cellpadding="5">
<tr><td></td></tr>
<tr><td></td></tr>
</table>
<table width="800" cellspacing="0" cellpadding="0">
<tr><td>
<table width="100%" cellspacing="0" cellpadding="0">
<tr><td colspan="4">

入れ子になったレイアウト用のtableを無理やり閉じてしまう、という記述ですね。

PC表示の『商品をかごに追加』『ご購入手続きへ』ボタンを大きくする

デフォルトのデザインではこんな感じのボタンですが……

楽天デフォルトでの購入ボタン

ちょっと小さいような気がする、という時はスタイルシートで無理やり書き換えてしまいましょう。

例えばこんな感じにしたい場合……

これくらいのサイズの方が良いのではないでしょうか

下記の様なスタイルを記述して適用すればOKです。

div#rakutenLimitedId_aroundCart .floatingCartPurchaseButtonsContainer .floatingCartSplitButtons {
display: block !important;
}
div#rakutenLimitedId_aroundCart .floatingCartPurchaseButtonsContainer .floatingCartSplitButtons .cart-button-container {
	display: block !important;
	vertical-align: bottom;
	margin: 0 !important;
	width: auto;
	background: transparent !important;
	position: relative !important;
}
div#rakutenLimitedId_aroundCart .floatingCartPurchaseButtonsContainer .floatingCartSplitButtons .new-cart-button {
	display: block !important;
	/*width: 212px !important;*/
	width: 100% !important;
	height: 68px !important;
	background-image: none !important;
	background-color: #bf0000 !important;
	border-radius: 3px !important;
	color: white !important;
	text-indent: 0 !important;
	border: 0;
	position: relative;
	background-position: 0 0 !important;
	border-style: none !important;
	color: rgba(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	padding: 0 !important;
	margin: 10px 5px 0 0 !important;
	box-shadow: none !important;
	float: initial !important;
	-webkit-filter: none !important;
	filter: none !important;
	background-size: 100% !important;
	line-height: 1 !important;
	-webkit-transition: initial !important;
	transition: initial !important;
	vertical-align: initial !important;
	font-size: 14px !important;
	font-weight: normal !important;
}

外部cssなどに記載して読み込ませましょう。

cssの記述で『お気に入り商品』『お気に入りショップ』のボタンも同様にcssで大きくさせたり、目立たせたる事が可能です。

PC用画面 『商品をかごに追加』等のフローティング領域制御

PC表示時に商品ページでつねにwebブラウザの右下辺りに固定表示される箇所、邪魔じゃないですか?

スクロールしても画面の右側にあるコレ

.floating-cart-wrapper というclassが振られているこの箇所。

商品の説明を見せるのに邪魔ですし、『商品をカゴに追加』あたりにくると、隠れてくれますが、その挙動もちょっとイライラする、という意見をいただいた事があります。

そんな訳で、デザインにあわせて、説明文を邪魔しない様にこんなcssを書いた事があります。900pxよりwebブラウザの表示幅が狭い場合は非表示にしちゃう。という対策です。

外部cssなどに記載して読み込ませましょう。

/*____________________ min 900px width hack______________________\*/
.floating-cart.sidebar .floating-cart-wrapper {
	display: block !important;
	width: 160px !important;
	position: fixed;
	z-index: 99999;
	bottom: 83px;
	right: 0;
	display: none;
	border: 1px solid #CCCCCC;
	box-shadow: 0 0 9px #CCC;
	background: white;
}
@media screen and (max-width: 900px) {
.floating-cart.sidebar .floating-cart-wrapper {
	display: none !important;
	width: 0;
	position: fixed;
	z-index: 99999;
	bottom: 83px;
	right: 0;
	display: none;
	border: 1px solid #CCCCCC;
	box-shadow: 0 0 9px #CCC;
	background: white;
}
} /* max-width 900 px end*/

デザインが900pxの横幅でつくっていた店舗様ですので、店舗のデザインにあわせて、各種値は調整してください。

PC用画面で、利用可能クーポン告知を目立たせる

クーポンが発行されていて、クーポンが使える商品の場合下記の様に表示されます。

商品ページで、使えるクーポンが有るときに表示される画面右下に固定される箇所

この部分ですね。

PC版だけですが、CSSに下記のような記述をする事で、クーポンが利用できるよ!という通知をプルプル振るわせて目立たせる事ができます。

body #offerNotification.floatingcart-coupon {
	right: 168px !important;
	bottom: 5px !important;
	animation: rumble 3s linear infinite;
}
@keyframes rumble {
	0%	{bottom:10px; right: 172px;}
	1%	{bottom:0px; right: 164px;}
	2%	{bottom:9px; right: 171px;}
	3%	{bottom:0px; right: 165px;}
	4%	{bottom:8px; right: 170px;}
	5%	{bottom:1px; right: 166px;}
	6%	{bottom:7px; right: 169px;}
	7%	{bottom:2px; right: 167px;}
	8%	{bottom:6px; right: 168px;}
	9%	{bottom:3px;}
	10%	{bottom:5px;}
	11%	{bottom:4px;}
	12%	{bottom:5px;}
	13%	{bottom:10px; right: 164px;}
	14%	{bottom:0px; right: 172px;}
	15%	{bottom:9px; right: 165px;}
	16%	{bottom:0px; right: 171px;}
	17%	{bottom:8px; right: 166px;}
	18%	{bottom:1px; right: 170px;}
	19%	{bottom:7px; right: 168px;}
	20%	{bottom:2px; right: 169px;}
	21%	{bottom:6px; right: 168px;}
	100%	{bottom:5px;}
}

上記の例では、3秒毎に『プルン!プルン!……』と動きますが、CSSの記述を変えればパカパカ点滅させたり、色々とできます。

クーポンを最適化する

クーポン関連でもう一つ。

店舗発行のクーポンを作成した場合など、ユーザーがクーポンを取得した後の自動ジャンプ先を設定する事が(UI上では)できません。

そこで、

http://coupon.rakuten.co.jp/getCoupon?getkey=発行クーポンのURL&rd=ジャンプさせたいURL

とする事で、クーポン取得後に任意のアドレスへ飛ばす事ができます。

http://coupon.rakuten.co.jp/getCoupon?getkey=xxxxxx–&rt=&rd=http://www.rakuten.ne.jp/gold/xxxxx/index.html

やや高度なティップスとハック

スマホートフォン画面でもCSSやJavaScript、iFrameを使う(楽天GOLD利用)

PC表示であれば、外部スタイルシートやiframeなどを読み込ませるのは比較的簡単です。

ところがスマートフォン表示の場合はhtmlタグの制限が厳しく、基本的にはレイアウトやデザインをカスタマイズする事ができません。

……が、かなり強引なハックですが、楽天RMSのhtmlチェック機能を無理やりすり抜けるハックがあるので、これを使って読み込ませるという事が可能です。

いくつかご紹介しますのが、何れも、不思議な””や全角スペース、閉じタグなどがありますが、この通りに記載してお試しください。

スマホートフォン画面 外部cssを読み込ませる(楽天GOLD利用)

変な所に =”” を記述します。

<link rel="stylesheet" ="" href="https://www.rakuten.ne.jp/gold/【ショップID】/【格納ディレクトリ】/main.html">

スマホートフォン画面 iframeを読込、class属性も付与(楽天GOLD利用)

<iframe class="【クラス名】" src="https://www.rakuten.ne.jp/gold/ 【ショップID】/【格納ディレクトリ】/file.html" scrolling="No"=""></iframe ="">

スマホートフォン画面 外部jsファイルを読み込ませる(楽天GOLD利用)

<script src="https://www.rakuten.ne.jp/gold/【ショップID】/【格納ディレクトリ】/main.js" type="text/javascript" =""></script                   >

末尾に全角スペースを18文字分入れます…。

この方法を応用すれば、外部JSファイル化したgoogleアナリティクスなどの解析タグを読み込ませる事も可能です。

スマホートフォン画面 htmlタグにclass属性を付与する

p要素の例(謎の =””=”” 記述)

<p =""="" class="【クラス名】">

img要素の例(末尾に全角スペースを18文字分入れます……)

<img src="【画像URL】" class="【クラス名】"                  >

楽天市場としては何れも公けに公表していない処理ですので、ペナルティや仕様変更などの対象になる可能性もあるかもしれませんので、くれぐれもご利用は自己判断・自己責任でおこなってください。くれぐれもので当記事、当サイトは責任を負いませんのでご了承を。

動画を商品説明文の任意の位置に(楽天GOLD利用)

Yahoo!ショッピングなどであれば、Youtube動画を直接掲載するハックがありますが、外部サイトへのリンクに厳しい楽天ではそもそもNGです。また、R-Cabinetに掲載した動画も、通常の方法だと小さくしか表示できませんがこの方法でhtmlタグが許可されているPC用商品説明文 欄などに埋め込む事が可能です。

  1. まずは動画をR-Cabinetに動画をアップロード
  2. アップロードが完了したら、R-Cabinetoの同ファイル『貼り付け用HTMLソース』をコピー
  3. 下記のようなhtmlファイルを作成しGOLDにアップロード
    <html>
    <head> 
    <title>埋込動画用html(例)uzurea.net</title>
    </head>
    <body style="margin:0;">
    <script src="//stream.cms.rakuten.co.jp/gate/play/?w=320&h=240&mid=【コピーした内容をペースト】" type="text/javascript"></script>
    </body>
    </html>
  4. アップロードしたhtmlファイルを任意の箇所からiframeで読み込ませる
    例)

    <iframe src="https://www.rakuten.n.ne.jp/gold/【ショップID】/【格納ディレクトリ】/【ファイル名】.html" frameborder="0" scrolling="no" width="320" height="240"></iframe>

まとめ

以上となりますが。楽天市場の運営では他にも色々なハック、ティップスがあります。

様々な先人の工夫や試行錯誤の結果編み出されて行ったこれらの情報は、当記事の執筆時点では利用が可能ですが、今後変わってしまう可能性もある事を前提でお読みください。

ネットショップを構築し運営が開始後は常に細かい作業の積み重ねを行っていく事が肝要です。

本題とは少しそれますが、ここに紹介したそれぞれの作業は細やかなものですが、これら含めて様々なノウハウを活用し、少しづつ自店舗を改良・改善し運営していってみてください。

スポンサーリンク
記載内容につきまして

掲載記事に関しまして

当サイトの掲載記事は、UZUERA.NETスタッフやパートナーライターの主観によって執筆しています。内容については、実際の事象やスペック、用途と異なる場合がございます。
また記載する製品やサービスの内容が正式スペックや保証範囲の適用外となる場合もありますので、あらかじめご了承ください。

この記事をSNSでシェア