スマホ商品ページでの固定バナー

Question

いつもお世話になっております。下記ショップ様のようにhttps://item.rakuten.co.jp/platinuml-4/ax-951042/スマホ商品ページにスーパーセールの固定バナーを設定させたいのですか可能でしょうか？よろしくお願い申し上げます。

Answer

ECマスターズの伊藤です。スマホ商品ページでの固定バナーについてですが固定したいコンテンツを作成し、そのコンテンツにCSSを指定すると作成することができます。まず、固定したいコンテンツをご用意いただき、そちらを、divやiframeなどの要素で囲んでください。この要素に、cssを設定できるようclass名を指定してください。今回は例として、要素=div、class=sampleで説明させていただきます。＝＝＝＝＝

固定したいコンテンツ

＝＝＝＝＝こちらを商品ページ共通説明文に追加してください。次に、CSSに下記の記述の追加をお願いいたします。＝＝＝＝＝.sample{ position: fixed; top: 0; left: 0; width: 100%; background: orange; height: 50px;}＝＝＝＝＝詳細は下記の通りとなりますので、position以外は、内容に合わせて修正いただきますよう、お願いいたします。 position: fixed;　// cssを指定したdivを固定 top: 0;　// divの上の基準を、画面の上から0pxに指定 left: 0;　// divの左の基準を、画面の左から0pxに固定 width: 100%; // divの横幅を画面幅100%に指定 height: 50px; // divの高さを50pxに指定（3/5 14:54 ガイドラインに違反する部分を削除）上記のとおり、追加、更新いただきますと固定したコンテンツを表示していただけます。

Answer

ECマスターズの田中です。申し訳ありません、伊藤よりご案内差し上げた内容に、ガイドライン違反に繋がる内容がございましたので加えてご案内差し上げます。例としていただいたURLのように、「共通ヘッダ部分」を下にずらしたりなど、改変してしまいますと取扱禁止商材・禁止行為ガイドラインhttps://navi-manual.faq.rakuten.net/rule/000010037?Ⅱ-(9)-31　当社が全店舗に提供している共通コンテンツを隠す行為に該当してしまいます。「共通ヘッダ部分」の定義は、下記URLをご参照ください。[重要]禁止行為(共通コンテンツを隠す行為)に関する補足説明https://www.rakuten.co.jp/SHOP-URL/supportnews/info_b/20170518-03.html禁止行為に該当しないように固定バナーを表示するには、固定バナーが「共通ヘッダ部分」よりも下に表示されるようにご設定いただければ結構です。具体的な方法として、CSSに以下の規則を加えていただきますようお願いします。===== この下の行から ============.sample {z-index: 2;}#rstTopSearch, #ipnsh-header, #topFuncShopPopup {position: relative;z-index: 3;background-color: white;}===== この上の行まで ============CSSの適用方法がわからない、コンテンツの書き方がわからない、など、不明な点がございましたらご返信いただきますようお願いします。

Answer

内容確認させて頂きました。かなり複雑でむずかしそうですね。一度設定してみますので分からなかった場合はまた質問させて頂きます。有り難うございました。

スマホ商品ページでの固定バナー

カテゴリーから探す