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

TOP2. サービスから探すにぎわいランキングR3出力されるHTMLソースについて

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

出力ソース例

注意

タグは出力されたまま利用いただけますようお願い致します。
HTMLに詳しい方は属性等の変更を行っても利用は可能ですが、弊社サポート外となります。
ブラウザやスマートフォン機種によってはiframeをサポートしていない場合、表示が崩れたり表示されないことがあります。その場合は<div>で囲って調整していただくか、上記ページURL(赤い部分)へリンクで誘導してください。

ヒント

タグの設置には多少の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>

margin-top　ピクセル数を変えると上部ブロック要素とのマージン幅が変わります。
「margin-bottom、 margin-left、 margin-right」を使えばそれぞれ「下、左、右」の　マージンを設定できます。
text-alignのcenterは中央寄せ、leftにすると左寄せ、rightにすると右寄せになります。

ヒント

スマートフォンページ用

<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ログイン　＞　ストアデザイン　＞
以下貼り付けたい場所を選択します：
ヘッダー
フッター
サイドナビ

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

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

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

初期設定について

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

2
にぎわいランキングR3
初期設定

マニュアル