ベント告知君(楽天)のスマホ商品ページでの表示位置

Question

イベント告知君(楽天)をスマホ商品ページの最上部に設置したところ、動画と被って表示されました。
動画を表示していない商品ページに設置してみたところ、商品説明の最上部でなく、少し下の、商品説明にかぶる位置に表示されてしまいました。
どのように書けば、かぶらないでしょうか。

Accepted Answer

ECマスターズの伊藤です。

　> この「イベント告知君」は、PC、スマホ、それぞれに、多くの店舗さんはどの場所に設置されておられますか。また、その理由をお教えいただけるとありがたいです。

イベント告知君の設置場所ですが、ファーストページビュー
（スクロールせずに表示される、一番最初の画面）もしくは
それに近いところに設置されてる方が多くなっております。

具体的な設置箇所ですが
PCは、ヘッダー下や、ヘッダー付近に表示させているおすすめ商品の下
スマホは、商品画像の上（現在設置頂いているところです）
アプリは仕様上、上記の箇所に設置することができないため、商品説明の一番上
となります。

理由としましては、訪問されたお客様が商品ページにアクセスした際
パット見（ファーストページビュー）で、
自分にとってベネフィットのあるページかどうかを、
判断されれる方が多いためです。

Answer

ECマスターズの伊藤です。

> 動画を表示していない商品ページに設置してみたところ、商品説明の最上部でなく、少し下の、商品説明にかぶる位置に表示されてしまいました。

こちら、実際のページを確認させていただきたいと思いますが、
ページのURLを頂戴することはできますでしょうか。

返信、もしくは一番最初のご質問投稿の右下にございます
「投稿内容について報告する」よりご連絡いただけますと幸いです。

お手数おかけいたしますが、よろしくお願いいたします。

Answer

動画あり
https://item.rakuten.co.jp/maternityshop/t2s/

動画なし
https://item.rakuten.co.jp/maternityshop/4jes2101/

よろしくお願いいたします

Answer

別スレッドで投稿した質問に、以下の回答をいただきました。
https://forum.ec-masters.net/post_view.php?id=11168

スマホ用共通説明文を使う方法↑　と
各商品ページのスマホ用商品説明欄に、CSVで入れる方法

という2つの方法がある、と考えてよいでしょうか

Answer

ECマスターズの田中です。

確認したところ、
https://www.rakuten.ne.jp/gold/maternityshop/smartphone/css/itempage.css
上記ファイルの10行目から始まる
商品画像上検索窓用のiframeに対する規則が、
イベント告知君にも反映されたことが原因でした。

検索窓にだけ反映されるように、10行目の
iframe {
を
.float_header {
にご変更いただきますようお願いします。


> スマホ用共通説明文を使う方法↑　と
> 各商品ページのスマホ用商品説明欄に、CSVで入れる方法
> という2つの方法がある、と考えてよいでしょうか

はい、そうお考えいただいて結構です。

なお、現在、きよさんのショップの商品画像上には
検索窓用にスタイルシートで空けられた余白があり、
同じ場所に挿入すると表示が乱れますので、
商品画像上以外の場所に設置されるよう調整をお願いします。
（商品画像の下、商品説明の先頭、など）

Answer

=====
検索窓にだけ反映されるように、10行目の
iframe {
を
.float_header {
にご変更いただきますようお願いします。
=====
変更しました
とくに何も表示は変わりません。
「検索窓用のiframeに対する規則がイベント告知君に反映された」というのは
どのように反映されたのでしょうか。

=====
検索窓用にスタイルシートで空けられた余白があり、
同じ場所に挿入すると表示が乱れますので、
商品画像上以外の場所に設置されるよう調整をお願いします。
（商品画像の下、商品説明の先頭、など）
=====
ということは、スライドバナーを先頭ではなく別の場所におくべしということですね。
.float_header {　への変更は、バナー一の調整には役に立たないということですね。

たとえば、商品画像下にスライドバナーを設置する場合は
どのようにすればよいでしようか。
おしえてください。

Answer

ECマスターズの伊藤です。

内容が長くなってしまいましたので、先に結論をご案内いたします。

商品画像の上にイベント告知と、検索窓を
重なって表示されないように修正していただくには
下記の通り修正してただきますよう、お願いいたします。

１）イベント告知君のIFRAMEから　class="iframeBefore"　を削除
２）イベント告知君のIFRAMEと、検索窓のIFRAMEをとで囲む
＝＝＝＝＝＝＝＝＝＝

【イベント告知君のIFRAME】
【検索窓のIFRAME】

＝＝＝＝＝＝＝＝＝＝
※イベント告知君と検索窓を逆にしたければ入れ替えてください。
３）itempage.cssより、以下を削除
＝＝＝＝＝＝＝＝＝＝
iframe {
	width: 100%;
	position: absolute;
	top: 190px;
	left: 0px;
}
＝＝＝＝＝＝＝＝＝＝

こちらの手順で修正していただきますと、
すでに設置頂いているsmp_slidebanner.jsにて
class="iframeBefore"のついた要素（DIV)を
商品画像の上に移動する、といった処理がされるため
ご対応いただくことができます。


> たとえば、商品画像下にスライドバナーを設置する場合は
> どのようにすればよいでしようか。

商品画像上に設置できれば問題ないでしょうか。
もし、商品画像下に設置をご希望でしたら
返信より、ご連絡くださいませ。


以下は、ご質問いただいた件に対する返答となりますので
上記をご対応いただければ、下記は対応の必要はございません。
ご参考までにご覧くださいませ。

> 「検索窓用のiframeに対する規則がイベント告知君に反映された」というのは
> どのように反映されたのでしょうか。

CSSにて

iframe {
	width: 100%;
	position: absolute;
	top: 190px;
	left: 0px;
}

と指定していただいていますが
こちらは
IFRAMEに
{この部分}
の指定をする

といった記述になっています。

position: absolute;
→要素の位置を指定基準を（今回の場合は）ページ全体を基準にする
top: 190px;
→（ページ全体の）上部から190pxの位置に要素を配置する

といった記述となっていますので

検索窓用のIFRAMEと、
イベント告知君のIFRAMEに
同様の位置が指定がされてしまい
重なって表示されている状態となっています。

そのため、
.float_header {
に変更していただくことで、検索窓用のIFRAMEにのみ
上記の指定をすることができます。


> とくに何も表示は変わりません。

smp_slidebanner.js
にて、イベント告知君を商品画像の上に表示させるように
設定していただいているため
こちらの設定が生きたままになってしまっているためです。

> =====
> 検索窓用にスタイルシートで空けられた余白があり、
> 同じ場所に挿入すると表示が乱れますので、
> 商品画像上以外の場所に設置されるよう調整をお願いします。
> （商品画像の下、商品説明の先頭、など）
> =====
> ということは、スライドバナーを先頭ではなく別の場所におくべしということですね。
> .float_header {　への変更は、バナー一の調整には役に立たないということですね。

こちらは、適切な記述にしていただければ、
ご対応いただくことが可能となっております。
混乱をさせてしまうご案内となってしまい
申し訳ありません。

Answer

伊藤様
丁寧に解説していただきありがとうございます。
あまりわかってないので(すみません)、まずは、冒頭に書いていただいたとおりにやってみました。

RMSのスマホ共通パーツ設定に以下を入力したところ、エラーが出ました
 「許可されないHTMLタグ "div" が入力されています。」
どうしたらいいでしょうか。

==================================

Answer

ECマスターズの伊藤です。

ご案内不足でご迷惑おかけしてしまい、申し訳ありません。

> RMSのスマホ共通パーツ設定に以下を入力したところ、エラーが出ました
> 「許可されないHTMLタグ "div" が入力されています。」

こちらは、スマートフォンでDIVタグの使用が許可されていないため
エラーが表示されてしまっています。

IFRAMEタグやSCRIPTタグと同様に、=""を追加していただくことで
バグを利用して登録できるようになりますので
下記の通り、修正をお願いいたします。


↓↓↓



↓↓↓



なお、楽天RSMのバグを利用した方法となるため
仕様変更となった際に、ご利用いただけなくなる可能性がございますので
ご了承の上、ご利用くださいますよう、お願いいたします。

Answer

お世話になります。













としてアップしようとしたところ、以下のエラーが出ました

 "script" の開始タグがありません。

あると思うんですがー
よろしくお願いします

Answer

ECマスターズの田中です。

いただいたソースには、確かにscriptの開始タグは含まれており、
弊社のテスト用店舗にて、
実際にいただいたソースをそのまま
スマートフォン用の商品ページ共通説明文に貼り付けたところ、
エラーが出ることなく先へ進むことができました。

いただいたソース以外に、
タグなどがどこかに含まれておりませんでしたでしょうか。

お手数ですが、再度入力をお試しいただき、
エラーが発生した場合は、
共通説明文の全体を、メモ帳などに貼り付けてご確認いただき、
何か誤りがないかどうか、ご確認いただきますようお願いいたします。

Answer

すみません、あらためてやってみたらできました。なにかの勘違いだったと思います。

そして、現状以下の記述になっていますが、検索窓とバナーの表示が重なってしまいます。
チェックお願いします。
基本がわかっていないため、どこかに勘違いと間違いがあると思われます。
よろしくお願いいたします

■RMS記述















■ゴールド

/*================================
　検索窓
=================================*/

/* 商品ページのサムネイル画像上下のマージンを、バナー分とる */
#itemImageSlider{
margin: 100px 0 32px 0 !important;
}

input.clearValueButton {
	padding: 5px 5px;
}

input#search_btn {
    padding: 5px 8px;
    border-radius:5px;
    font-size: 0.8em;
    background-color: #90816E;
    color: #fff;
    border-style: none;
}

div .searchkeyword {
	padding-top:5px;
	width:100%;
	margin:0px auto;
}
.searchkeyword li{
	float:left;
	list-style: none;
	color:#90816E;
	font-size: 0.8em;
}
.searchkeyword li a{
	color:#90816E;
	border-radius:5px;
	border: solid 1px #e2754c;
	text-decoration: none;
	padding:0px 5px;
	margin:2px 2px;
	line-height:2em;
}

.searchkeyword .chumoku {
	font-weight:bold;
	padding-top:2px;
}

Answer

ECマスターズの田中です。

私のiPhone8にて、
実際のきよさんのショップの商品ページを確認したところ、
添付ファイルのように、想定しない形での重なりは無いように見えます。

きよさんの環境では、異なる表示になっておりますでしょうか。
ご確認いただきますようお願いします。

また、今回  を利用する形に
ご変更いただいたことによって、
スタイルシートで商品画像上に余白を作る必要がなくなりました。

もし、表示上の問題が解決しましたら、
■ゴールド に含まれる下記４行を削除していただきますようお願いします。

/* 商品ページのサムネイル画像上下のマージンを、バナー分とる */
#itemImageSlider{
margin: 100px 0 32px 0 !important;
}###HR######IMG0533c0dfccfcdd883f52d367de5906e51.jpegIMG0######BR###

Answer

お世話になります。
御社のスマホビューで確認すると重なっています、キャッシュですね。
自分のスマホでアプリで見るとやはり重なっているので、ブラウザで確認したところ、重ならずに表示されていました。
ただ、余白を修正しても、最初に商品ページを開けた時に、商品画像が見えなくなるので、どのように配置するのがベターか考えてみたいと思います。
長々とおつきあいいただき、ありがとうございました！

Answer

ECマスターズの伊藤です。

無事、ご希望どおりの表示となったようで安心いたしました。

> ただ、余白を修正しても、最初に商品ページを開けた時に、商品画像が見えなくなるので、どのように配置するのがベターか考えてみたいと思います。

そうですね、一番最初に見えるもので、
お客様の購買意欲や離脱率が変わると思いますので、
いろいろと工夫されてみてください。

また、ご不明な点がございましたら、ご相談くださいませ。

Answer

ありがとうございます。
あと一点、教えてください。
この「イベント告知君」は、PC、スマホ、それぞれに、多くの店舗さんはどの場所に設置されておられますか。また、その理由をお教えいただけるとありがたいです。

Answer

アプリは仕様上、上記の箇所に設置することができないため、商品説明の一番上
となります。

====
というのは、お客さんが見る楽天アプリですか

設置しても、表示されないということでしょうか

Answer

ECマスターズの伊藤です。

> というのは、お客さんが見る楽天アプリですか

言葉が足りず、申し訳ございません。
お客様がご利用される楽天アプリでお間違いありません。


> 設置しても、表示されないということでしょうか

設置、表示いただくことはできますが、
スマホのブラウザ（Chromeなど）と
仕様が異なるため、商品画像の上に
移動させることができません。

そのため、商品説明の一番上が
ファーストページビューに一番近いところとなります。

Answer

わかりました。ありがとうございました。
参考にさせていただいて、検討します。

Answer

ECマスターズの伊藤です。

ご検討、どうぞよろしくお願いいたします。

ご希望の箇所にうまく設置できないなどございましたら、ご相談くださいませ。