楽天の店舗運営 ショップ デザイン＆機能 のカスタマイズまとめ UZUREA編集部 公開:2018年8月30日（7年前） / 更新:2020年8月11日 コメント 4件 Web技術cssEChtmlweb豆知識 SNS X Facebook Ｂ! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 国産のネットショッピングモールとして、依然として膨大な店舗・利用者を誇る楽天市場。 運用システムの歴史が長い分、管理システム＝『楽天RMS』関連の使い難さ、難解さ、そしてその制約について否定的な声を聴く事も多くあります。 とは言え、利用者＝購入ユーザーにとっては、そんな事は無関係。現にさまざまな店舗が工夫し、他のモールや自由度の高いEC系CMS並のカスタマイズを行って運用し、成果を上げています。 そこで当記事では、楽天RMS+楽天GOLDの範囲で行えるティップス、ハックなどをまとめて行きたいと思います。 なお、当記事では、ある程度楽天市場の運営を行っており、基本システムについて知識のある方を対象としており、細かい解説は割愛いたします。 どうしても分からない箇所や、解決できない事があればコメント欄でご相談ください。（ご返事をや効果の程を保証するものではありません） 当記事が言及する内容は、サービスの仕様や規約変更によって利用できなくなる場合も有るかもしれません。当記事による直接的、間接的問わず、一切の責任を負いかねますので、ご理解ご了承いただける方のみお読みください。 記事の索引1 比較的簡単なカスタマイズ＆ハック1.1 PC表示で独自の外部CSSを読み込ませる（楽天GOLD利用）1.2 自作する手間をかけず商品の各画像サムネイルを利用する1.3 店内カテゴリで『在庫切れ』商品を非表示の状態に1.4 PC表示の店舗ヘッダーやフッターを左右最大（100％）でデザイン1.5 PC表示の『商品をかごに追加』『ご購入手続きへ』ボタンを大きくする1.6 PC用画面 『商品をかごに追加』領域のフローティングを制御1.7 PC用画面で、取得が可能なクーポンの告知を目立たせる1.8 クーポン取得後にユーザーを任意のURLへリダイレクトさせる2 やや高度なカスタマイズ2.1 スマートフォン画面でもCSSやJavaScript、iFrameを使う（楽天GOLD利用）2.2 動画を商品説明文の任意の位置に（楽天GOLD利用）3 その他 楽天RMSの謎仕様3.1 コメントタグの最初に＃があるとエラーが出る4 まとめ 比較的簡単なカスタマイズ＆ハック 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 となります。 もちろん、上記で取得した画像を実際に表示させる場合は、 <img src="https://thumbnail.image.rakuten.co.jp/@0_mall/uzurea/cabinet/uzureafile/uzurea.jpg?_ex=200x200" alt=""> といった様にhtmlとして記述していってください。 なお、このサムネイルの自動生成機能では1×1px ～ 元画像より+100px 大きいサイズまでを呼び出す事が可能です。反面、元画像の縦横非を変えてトリミング……という事はできません。 店内カテゴリで『在庫切れ』商品を非表示の状態に ショップ内でカテゴリへのリンクを設定する際、『在庫切れ』商品を非表示にしてユーザーに閲覧してもらいたい時には、URL末尾を下記の様に指定する事で実現できます。 https://item.rakuten.co.jp【ショップID】/c/【カテゴリID】/ の末尾に『 ?s=1&i=1#risFil 』追加して下記の様にリンク指定をするだけでOKです。 https://item.rakuten.co.jp【ショップID】/c/【カテゴリID】/?s=1&i=1#risFil 元々、ユーザーが検索結果に対して指定できる絞り込み条件の応用ですので、シンプル＆簡単です。 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 , .popupContent { 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:10px; right: 168px;} 100% {bottom:10px;} } 上記の例では、3秒毎に『プルン！プルン！……』と動きますが、CSSの記述を変えればパカパカ点滅させたり、色々と工夫ができますね。 クーポン取得後にユーザーを任意のURLへリダイレクトさせる クーポン関連でもう一つ。 店舗発行のクーポンを作成した場合など、ユーザーがクーポンを取得した後の自動ジャンプ先を設定する事が（UI上では）できません。 そこで、クーポンの表示アドレスが https://coupon.rakuten.co.jp/getCoupon?getkey=xxxxxxxxxxxxxxxxx--&rt= だった場合、末尾に『&rd=ジャンプ先URL』を付与して表示させる(リンクする）事で、ユーザーがクーポンを取得した後に、任意のURLへリダイレクトさせる事ができます。 http://coupon.rakuten.co.jp/getCoupon?getkey=xxxxxxxxxxxxxxxxx--&rt=&rd=リダイレクト先URL 例えばGoldのトップページにジャンプさせたい場合は下記のようなアドレスで表示させてあげればOKです。 http://coupon.rakuten.co.jp/getCoupon?getkey=xxxxxxxxxxxxxxxxx--&rt=&rd=http://www.rakuten.ne.jp/gold/xxxxx/index.html 機能は有るのに、なんでこんな裏技みたいなってるんでしょう。RMSから設定できるようになるのはいつなのでしょうか……。 やや高度なカスタマイズ スマートフォン画面でもCSSやJavaScript、iFrameを使う（楽天GOLD利用） PC表示であれば、外部スタイルシートやiframeなどを読み込ませるのは比較的簡単です。 ところがスマートフォン表示の場合はhtmlタグの制限が厳しく、基本的にはレイアウトやデザインをカスタマイズする事ができません。 とはいえ、かなり強引なハックを用いる事で、楽天RMSのhtmlチェック機能を無理やりすり抜ける事ができます。不思議な””や全角スペース、属性名も値もない属性表記などを用いて実装する例をご紹介いたします。 スマートフォン画面 外部cssを読み込ませる（楽天GOLD利用） 変な所に =”” を記述したり。 <link rel="stylesheet" ="" href="https://www.rakuten.ne.jp/gold/【ショップID】/【格納ディレクトリ】/main.css"> 要素内に13個全角のスペースを記述したり。何れかでOK。 <link rel="stylesheet" href="http://www.rakuten.ne.jp/gold/【ショップID】/【格納ディレクトリ】/main.css" >【格納ディレクトリ】 スマートフォン画面 iframeを読込、class属性も付与（楽天GOLD利用） iframe要素内に =”” を記述します。 <iframe class="【クラス名】" src="https://www.rakuten.ne.jp/gold/【ショップID】/【格納ディレクトリ】/file.html" scrolling="No"=""></iframe =""> スマートフォン画面 外部jsファイルを読み込ませる（楽天GOLD利用） こちらも開始タグに =”” を記述し、閉じタグには全角スペースをまたは18文字分入れます…。 <script src="https://www.rakuten.ne.jp/gold/【ショップID】/【格納ディレクトリ】/main.js" type="text/javascript" =""></script > これら方法を応用すれば、外部JSファイル化したgoogleアナリティクスなどの解析タグを読み込ませる事も可能です。 スマートフォン画面 htmlタグにclass属性を付与する p要素の例（謎の =””=”” を記述） <p =""="" class="【クラス名】"> img要素の例（末尾に全角スペースを18文字分入れます……） <img src="【画像URL】" class="【クラス名】" > これらは工夫次第でさまざまなカスタマイズが可能になりますが、楽天の共通ヘッダーなどを意図的に隠す事は禁止されていますので、楽天仕様を熟知した上で利用する必要があります。 楽天市場のシステムの制限を無理やりくぐり抜ける様な処理ですので、ペナルティや仕様変更などの対象になる可能性もあるかもしれません。くれぐれもご利用は自己判断・自己責任でおこなってください。 楽天RMSの入力欄バリデーションが真っ当なエンジニアさんの手でアップデートされたら全滅しそうな予感もしますが、そんな時が来たらまたご報告しようと思います。 動画を商品説明文の任意の位置に（楽天GOLD利用） Yahoo!ショッピングであれば、YouTube動画を直接掲載するハック（裏技？）がありますが、外部サイトへのリンクに厳しい楽天ではそもそもNGです。また、R-Cabinetに掲載した動画も、通常の方法だと小さくしか表示できませんがこの方法でhtmlタグが許可されているPC用商品説明文 欄などに埋め込む事が可能です。 まずは動画をR-Cabinetに動画をアップロードアップロードが完了したら、R-Cabinetoの同ファイル『貼り付け用HTMLソース』をコピー下記のような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> アップロードしたhtmlファイルを任意の箇所からiframeで読み込ませる 例） <iframe src="https://www.rakuten.n.ne.jp/gold/【ショップID】/【格納ディレクトリ】/【ファイル名】.html" frameborder="0" scrolling="no" width="320" height="240"></iframe> その他 楽天RMSの謎仕様 コメントタグの最初に＃があるとエラーが出る RMS上でhtmlを記述出来る一部の領域（ヘッダーなど）にコメントタグ ”<!– –>”を記述する際、その頭に半角記号”#”があると [an error occurred while processing this directive] というエラーが表示され、場合によってはページ表示も崩れます。 コード例 <!--#header ここまで--></div> id属性の閉じ箇所を示すコメントを残したい、というケースで上記のような記述をする場合があるようです。 原因としては、現在でも楽天では（おそらく）SSI(Server Side Includes)で、各パーツを読み込ませている為で、上記の様な記述をすると、SSIの読み込み構文となってしまうからです。 参考）とほほのSSI入門 いまだにSSIなんて……（もごもご まとめ 楽天市場の運営ではここに紹介した他にも色々なカスタマイズ、ハック、ティップスがあります。 それぞれの作業は細やかなものですが、これら含めてさまざまなノウハウを活用し、少しづつ自店舗を改良・改善し、小さな効果を積み重ねて、皆さんの店舗売上を向上させていく参考になれば幸いです。 ただし、昨今の楽天は『違反点数制度』という、楽天の取り決めや判断基準で出展者に減点＝罰金を課す制度もあります。これらは1回のうっかりミスでも10万円～100万円以上の罰金となる場合もあるので、各種作業について慎重に判断する必要があります。 当ページに記載の内容については、楽天市場の規約をよく確認し熟知した上で、皆様自身で判断の上、実施を検討ください。
