ネットショップ運営担当者のブログ

[楽天]商品ページに楽天GOLDを使うことはできるの?CSSを適用する

こんにちは!楽しいECです

楽天のライバル店の商品ページ(特にスマホ)を見ていたら
あれ?これってどうやって作るの?」
cssとか使ってそうだからRMSからの編集ではできそうじゃないな」
というような、デザインのページを見ることありませんか?

それって楽天GOLDを使えばできるかもしれませんよ!

この記事では
楽天の商品ページに楽天GOLDを使う方法について解説します!

筆者はというと
10年以上、ネット販売に携わる仕事をしています
楽天でも月1,000万以上の店舗の運営をしていました!
その経験を生かして記事を書いております

商品ページをリッチにするには楽天GOLDが必要

楽天市場もそうですがネットショップでは
商品ページはとても重要な役割を占めており、
商品自体の魅力はもちろんですが、
ページの構成・デザインも大事な要素になります

多くの店舗が商品ページを工夫して
少しでもユーザーに購入してもらえるように試行錯誤しています

実は「あれ?これってどうやってやるの?」
と思うようなデザインは
楽天GOLDを使って作成してるものが多いです!

RMSの中での編集だけでは制限が多くできることが少ないです

楽天GOLDを使えばいろんなことができます!

例えばどんなことができるの?
と気になる方もいると思います

楽天GOLDを使えば
特にスマホサイトだとでできることが劇的に変わります!

新作・再販、タイムセールなどがチェックできるヘッダーメニューが
下にスクロールしていっても上部に引っ付いたまま
ついてこさせたりできます

出典:https://www.rakuten.ne.jp/gold/mobacaba/

また、モーダルウィンドウという、
ページを開いた時にバナーが出て来るようにできます!
商品ページを見に来たユーザーに
確実に見てもらえるバナーを設置できます

出典:https://www.rakuten.ne.jp/gold/mobacaba/

iframeを使うと便利!

その他、
HTMLにインラインフレーム要素 (iframe) と呼ばれるというものがあり、
このタグは楽天の中では重宝されます

iframeは商品ページに共通で入れてる部分を
一気に編集できて、作業時間を短縮可能になるからです!

iframeに関しては
詳しくは別の記事で説明していますので気になった方は見てください

もちろん、ここに書いてあることはほんの一部で
これ以外にもできることはたくさんあります!

ただ、楽天GOLDは
それなりにHTMLやCSSの知識がないと難しいかもしれないのでご注意ください

商品ページに楽天GOLDを使う方法!

商品ページに楽天GOLDを使う方法ですが
先ほども書いた通り基本的にRMSの中の商品ページの編集画面からは
制限がかかっておりIFRAMEやCSSやjavascriptなどのタグを使うことができません
簡単なTABLEタグ等のみ使うことができます

しかし実はちょっとした裏技を使うと可能になります
*裏技なので自己責任でお願いします

商品ページの
スマートフォン用商品説明文 や 商品ページ共通説明文
にIFRAMEやCSSをいれたらエラーが出ますが
以下のどちらかの方法で入力すると適用されます!

  • タグ内に13個の全角スペースを入れる
  • 「=””」をタグの後にいれる

詳しくはこんな感じです
タグ内に13個の全角スペースを入れる

<link href=”http://www.rakuten.ne.jp/gold/店舗URL/フォルダ名/ファイル名.css” rel=”stylesheet” type=”text/css”                          >

「=””」をタグの後にいれる

<link =”” href=”http://www.rakuten.ne.jp/gold/店舗URL/フォルダ名/ファイル名.css” rel=”stylesheet” type=”text/css”>

これで適用されます
IFRAMEやjavascriptも同じようにタグを書いたら大丈夫です!

[初心者向け]楽天GOLDを使ってiframeを適用させる方法!スマホ商品ページ

この方法は現在2020年春時点では使えてますが
楽天の仕様が変更したら使えなくなるかもしれません、ご注意ください!

今回は商品ページに楽天GOLDを使うことはできるの?
というテーマで書かせていただきました!
何かの参考になれば、幸いです!