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をコーディングすることになりますので、特殊な状況下になりますが、アイデア次第でいろんな表現ができるようになります。ライバル店と差をつけるためにも効果的な方法かと思いますので、ぜひ試してみてください。