0%

Programmingプログラミングナレッジ

Posted:2018.09.01

楽天ECサイト(RMS)で商品詳細ページをカスタマイズする

ECショッピングモールとして大きなシェアを持つ楽天市場ですが、RMSと呼ばれるシステムからユーザー側で情報を更新したり管理することができます。そこでは商品ページのカスタマイズもできるのですが、直接HTMLファイルでページを作成するわけではないので、通常の方法ですとどうしても限界があります。

 

そこで、商品詳細情報などにHTMLを書くことでカスタマイズできるのですが、より高度な方法でリッチな商品ページを作成する方法をまとめていきたいと思います。

 

RMSでは商品ページを編集する箇所があり、実際にはこのようなテキストエリアが設けられており、こちらに入力した内容がそのまま商品ページに反映される形になります。ここではHTMLが使えるので、テーブルを組んだり、文字を装飾したり、画像を入れ込んだりすることができます。

 

楽天ECサイト(RMS)で商品詳細ページをカスタマイズする

 

ただし、テキストエリアに入力することになるので、使えるタグなど条件が限定的になりますので、どうしても表現できる範囲には限界があります。例えば、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をコーディングすることになりますので、特殊な状況下になりますが、アイデア次第でいろんな表現ができるようになります。ライバル店と差をつけるためにも効果的な方法かと思いますので、ぜひ試してみてください。

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】