楽天ECサイト(RMS)で商品詳細ページをカスタマイズする
最終更新日: Update!!
ECショッピングモールとして大きなシェアを持つ楽天市場ですが、RMSと呼ばれるシステムからユーザー側で情報を更新したり管理することができます。そこでは商品ページのカスタマイズもできるのですが、直接HTMLファイルでページを作成するわけではないので、通常の方法ですとどうしても限界があります。
そこで、商品詳細情報などにHTMLを書くことでカスタマイズできるのですが、より高度な方法でリッチな商品ページを作成する方法をまとめていきたいと思います。
RMSでは商品ページを編集する箇所があり、実際にはこのようなテキストエリアが設けられており、こちらに入力した内容がそのまま商品ページに反映される形になります。ここではHTMLが使えるので、テーブルを組んだり、文字を装飾したり、画像を入れ込んだりすることができます。
ただし、テキストエリアに入力することになるので、使えるタグなど条件が限定的になりますので、どうしても表現できる範囲には限界があります。例えば、scriptタグが使えないので遅延読み込みといった、javascriptを使った実装ができません。もちろんPHPなども使えません。
そんな時に使えるのが、外部ファイルのHTMLを用意して、商品詳細ページ側でiframeを使ってHTMLを呼び出して表示させます。ただし、外部HTMLファイルを保存するためのサーバーが必要になります。楽天ECサイトのサービスでは楽天GOLDと呼ばれるサービスでHTMLや画像ファイルを格納できるウェブサーバーを利用できます。

<p>商品詳細ページコンテンツテキスト………… </p> <!-- 外部HTMLを使ってカスタマイズに柔軟性を --> <iframe src="https://www.rakuten.co.jp/gold/**********/sample.html" style="width: 100%; height: 1300px; border: none;"> </iframe> <p>商品詳細ページコンテンツテキスト………… </p>このようにすることで、外部HTML側でjavascriptやCSS、またはPHPが使えるようになり、その内容を商品詳細ページへ表示させることができます。iframeには読み込み先のHTML全体のコンテンツ高さを設定するようにします。また幅もコンテンツエリア全域になるように調整します。 iframeを使わなくともCSSだけ適用させたいということもあります。もちろん、タグに直接style属性として記述するのも良いのですが、可読性が下がりメンテナンス性が悪くなってしまいます。そんな時にはstyleタグにscoped属性をつけることで、インラインでCSSを記述でき、後に続くHTMLの範囲のみにスタイルを適用できるようになります。
<style scoped> .txt-style-01 { color: #f00; margin-botttom: 10px; } .txt-style-02 { color: #00f; font-weight: bold; } img { display: block; margin: 15px 0; } </style> <p class="txt-style-01">商品詳細ページコンテンツテキスト………… </p> <img src="../img/sample-01.jpg" alt="商品画像"> <p class="txt-style-02">商品詳細ページコンテンツテキスト………… </p>いかがでしょうか、このようにテキストエリア内でHTMLをコーディングすることになりますので、特殊な状況下になりますが、アイデア次第でいろんな表現ができるようになります。ライバル店と差をつけるためにも効果的な方法かと思いますので、ぜひ試してみてください。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories