出力されるHTMLソースについて

下記のようなタグが出力されます。このタグをショップページの表示を行いたい場所に貼り付けします。ショップページ内での中央寄せ、左寄せ、右寄せ、上限間隔などは<div>タグ等で囲んで適宜調整をしてください。

出力ソース例

<iframe src=“https://www.xxx.co.jp/ecstation/rankingA.html” name=“ranking” width=”800″ height=”300″>この部分に注文状況が表示されます</iframe>

注意

 

ヒント

タグの設置には多少のHTMLの知識が必要です。
設置はページ作成担当者等にご確認をお願い致します。

中央寄せ<div>タグで囲む場合のHTML記述例(参考)

設置用HTMLソース以外はサポート外となります。
以下はページに設置する際に、表示位置を調整する基本的なHTMLソース記述の一例となります。

<div style=”margin-top:50px; text-align: center;”>
<iframe src=”https://www.rakuten.ne.jp/gold/xxxxxxx/ecstation/rankingA.html” name=”gtable” width=”800″ height=”300″>
この部分に注文状況が表示されます</iframe>
</div>

 

ヒント

スマートフォンページ用

<div>タグで囲む場合のHTML記述例(参考2)
スマートフォンなどのページに貼り付けた際にiframeが横にはみ出す場合、幅100%の </div>タグで囲ってoverflowスタイルではみ出さないように指定できます。Iframeは幅は「HTMLソース」の出力時に「幅を100%にする」を指定してください。

<div style=”width:100%; overflow:auto”>
<iframe src=“https://www.xxx.co.jp/ecstation/rankingA.html”
name=“ranking” width=“100%” height=”300″>
この部分に注文状況が表示されます</iframe>
</div>

 

楽天市場・Yahoo!ショッピング

商品ページなどではiframeが制限で貼り付けできないのでGOLDやトリプルのスマートフォンページに貼り付けてください。
 

●楽天市場の各商品ページへの表示方法

「共通説明文(大)(小) 」等に設置することで全ての商品ページに反映させることができます。

1) HTMLソースを共通説明分に登録

1お店を作る : R-Storefront > デザイン設定 > 共通説明文(大)(小) > 使用中のテンプレートの「編集」をクリック

HTMLタグの挿入に、にぎわいランキングR3のHTMLソースを貼り付けて反映させます。

2) 貼り付け後に下記にて表示位置を調整

1お店を作る : R-Storefront > デザイン設定 > 表示項目の並び順の設定 > 商品ページ > 使用中のテンプレートの「編集」クリック

表示させたい位置に調整を行います。
同じくトップページ、カテゴリページも調整を行います。

●Yahoo!の各商品ページへの表示方法

Yahoo!ショッピングでは「フリースペース(HTML可)」に設置ができます。

Yahoo!では商品ページ内共通項目がありませんので、すべてのページで見せたい場合はヘッダー、フッター、サイドナビなどに設置してください。

ストアクリエイターProログイン > ストアデザイン >
以下貼り付けたい場所を選択します:
ヘッダー
フッター
サイドナビ

「フリースペース」を選択 > フリースペース欄に貼り付けて保存
各カテゴリページのフリースペースにも設置できます。

●自社サイトでの表示方法

自社サイトではページのコードに沿って設置してください。

 

初期設定について

初期設定を確認したい場合は、以下のバナーをクリックして各ステップをご覧ください。

PAGE TOP