画面端に固定されるバナーについて

Question

お世話になります。バナー設置君にて画面端に固定されるバナーを設置しています。このバナーなのですが、ログインしている状態で商品ページのかご付近に来ると右下クーポン獲得画面が表示されるのと同時に挙動がおかしくなります。（ブヨブヨとスクロールに合わせて動く）解決策はありますでしょうか？

Answer

ECマスターズの伊藤です。バナー設置君にて設置頂いた、固定バナーの表示がおかしいとのことですが、お手数ですが、ご確認頂いている環境を教えて頂けますでしょうか。・デバイス（スマホ、PC　など）・OS（Windows/Mac　など)・ブラウザ（Internet Explorer、Chorome、Firefox　など）・URLお忙しいところお手数おかけいたしますが、よろしくお願いいたします。

Answer

情報不足すいません。デバイス：PCOS：Windows10ブラウザ：IE（Choromeでは問題ないようです）URL：https://item.rakuten.co.jp/店舗ID/20022/楽天にログインしているとそのような状態となります。よろしくお願い致します。

Answer

ECマスターズの田中です。情報をお知らせいただき、ありがとうございます。動作を確認の上、担当より改めてご案内いたします。

Answer

ECマスターズの伊藤です。詳細な環境のご連絡ありがとうございました。確認させていただいたところ、画面右に固定で表示されている「クーポン獲得」をクリック、もしくは、画面をスクロールして、買い物かご付近でクーポンが表示された際、がたつきが発生することが確認できました。＞（Choromeでは問題ないようです）おっしゃる通り、IE以外ではおこらず、IEのバグだと思われます。下記のCSSを追加していただくと、バグの原因となっているCSSを上書きし、がたつかずに表示することができます。＝＝＝.popupWrapper > .popupContent{overflow : hidden;}＝＝＝注意点としまして、楽天が自動的にページに挿入しているCSSを強制的に修正することにより、がたつきを防ぐため、他の箇所に影響が出てくる可能性がございます。こちらをご了承の上、修正くださいますようお願いいたします。

Answer

お返事ありがとうございます。早速、設置してみたところガタツキが解消致しました！ありがとうございます。> 注意点としまして、楽天が自動的にページに挿入しているCSSを> 強制的に修正することにより、がたつきを防ぐため、> 他の箇所に影響が出てくる可能性がございます。この部分が、気になるのですがどのような影響が考えられますでしょうか？overflow : hidden;を追加しているのでなんらかのコンテンツが切れてしまうなどの可能性があるということでしょうか？よろしくお願い致します。後、もう1点なのですが自社ホームページのかご付近でもガタツキがあるのですがこちらも修正可能でしょうか？デバイス：PCOS：Windows10ブラウザ：IE（Choromeでは問題ないようです）URL：https://www.楽天店舗IDと同一.co.jp/SHOP/20051.htmlよろしくお願い致します。

Answer

ECマスターズの伊藤です。>> 注意点としまして、楽天が自動的にページに挿入しているCSSを>> 強制的に修正することにより、がたつきを防ぐため、>> 他の箇所に影響が出てくる可能性がございます。>この部分が、気になるのですが>どのような影響が考えられますでしょうか？影響についてですが、楽天で作成しているクーポンのCSSの記述方法が変わった際や、同一のクラス名（.popupWrapper .popupContent）が使用された場合、意図しないデザインになる可能性などが考えられます。>自社ホームページのかご付近でも >ガタツキがあるのですが >こちらも修正可能でしょうか？こちらも、楽天と同様に、IEのバグにより、がたつきが発生しておりました。jquery.scrollaction1.js一番下2行を、下記の通り追加していただきますと、修正できるかと思いますので、ご対応くださいますよう、お願いいたします。【修正前】});});【修正後】});if( window.navigator.userAgent.match(/(msie|trident)/i) ) { $('body').append('');}});

Answer

お返事ありがとうございます。> 　影響についてですが、楽天で作成しているクーポンのCSSの記述方法が変わった際や、同一のクラス名（.popupWrapper .popupContent）が使用された場合、意図しないデザインになる可能性などが考えられます。なるほど、了解しました。また、おかしい時にはお伺い致します。>　一番下2行を、下記の通り追加していただきますと、修正できるかと思いますので、ご対応くださいますよう、お願いいたします。追加致しましたら補正されました。助かりました！もう1点質問なのですがヤフーショッピングでも同様のガタツキが発生しております。こちらは、常にガタついております…。デバイス：PCOS：Windows10ブラウザ：IE（Choromeでは問題ないようです）URL：https://store.shopping.yahoo.co.jp/楽天店舗IDと同一/20051.html対応可能でしょうか？よろしくお願い致します

Answer

すいません。うまく送信出来てなかったようなので再送いたします。-----　再送▼　-----お返事ありがとうございます。> 　影響についてですが、楽天で作成しているクーポンのCSSの記述方法が変わった際や、同一のクラス名（.popupWrapper .popupContent）が使用された場合、意図しないデザインになる可能性などが考えられます。なるほど、了解しました。また、おかしい時にはお伺い致します。>　一番下2行を、下記の通り追加していただきますと、修正できるかと思いますので、ご対応くださいますよう、お願いいたします。追加致しましたら補正されました。助かりました！もう1点質問なのですがヤフーショッピングでも同様のガタツキが発生しております。こちらは、常にガタついております…。デバイス：PCOS：Windows10ブラウザ：IE（Choromeでは問題ないようです）URL：https://store.shopping.yahoo.co.jp/楽天店舗IDと同一/20051.html対応可能でしょうか？よろしくお願い致します

Answer

ECマスターズの田中です。大変お待たせしており申し訳ありません。確認の上、担当より改めてご案内いたします。

Answer

ECマスターズの田中です。大変お待たせいたしました。> ヤフーショッピングでも同様のガタツキが発生しております。両サイドの「お試しはコチラ」「定期購入はコチラ」のリンクが掲載された固定バナーのことでよろしいでしょうか。確認したところ、

および

の、それぞれ1つ目のタグにstyle="z-index: -1;"が設定されていたことが原因であり、この「z-index: -1;」を削除することで改善されます。ですが、何らかの目的のためにこの「z-index: -1;」をご記載いただいていた場合、その目的が果たせなくなってしまいますので、削除の前に、「z-index: -1;」を入れた理由をご確認いただきますようお願いします。

Answer

ご返信が遅くなり申し訳ございません。「z-index: -1;」が原因なんですね。「z-index: -1;」はバナーがヤフーの共通ヘッダーと被ってしまうために入れておりました。「z-index: -1;」を入れたまま、ガタツキを無くす方法もしくは「z-index: -1;」を入れずに、ヤフーの共通ヘッダーを前に出す方法はありますでしょうか？よろしくお願い致します。

Answer

ECマスターズの田中です。Yahoo!ショッピングの共通ヘッダーを囲む

に対して、position:static; が設定されているため、position:fixed; が設定された固定バナーよりも下に表示されておりますので、

にposition: relative; を設定することで、z-index: -1; を指定することなく、共通ヘッダーを上に表示させることができます。トリプルから読み込んでいる外部CSSファイル、たとえば「style-yahoo.css」などに、html body #wrapper { position: relative; z-index: 10; }上記のように規則を加えていただきますようお願いします。

Answer

ありがとうございます。出来ました。ずっと気持ちが悪かったので修正できて嬉しいです！

画面端に固定されるバナーについて

カテゴリーから探す