PCトップページクーポンバナー崩れ

Question

いつもお世話になっております。

PCトップページにクーポン縦バナーを貼り付けたのですが、
スーパーSALEバナーを貼り付けるとクーポンバナーが重なってしまいます。

スーパーSALEバナーを外せば重なることはないのですが、
この「スーパーSALEバナー」は何がダメなのでしょうか？

宜しくお願い致します。

Answer

ECマスターズの田中です。

実際のページを確認したところ、
今も重なっている状態になっているということだと思うのですが、

300円OFFクーポンのリンクを設置されている場所に、
カテゴリページへのリンクが残っており、
これを削除するとご希望通りの見た目になるのではないかと思いますので、
ご確認をお願いいたします。

Answer

田中 様

遅くまでありがとうございます。

＞300円OFFクーポンのリンクを設置されている場所に、
＞カテゴリページへのリンクが残っており、
＞これを削除するとご希望通りの見た目になるのではないかと思いますので、
＞ご確認をお願いいたします。

カテゴリページのリンク？
どこを削除したらいいのかわからないです。

下記の300円OFFクーポンのタグ内でしょうか？

----------------------------------------------------------------






div#sidefixedbanner {
top: 250px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←右端に固定する場合は、leftをrightに変更し、バナーのずらし幅を調整してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}
div#sidefixedbanner a{ /* マウスカーソルがバナーに乗っていない状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/1bn261.jpg) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
width: 88px; /* ずらした残りの幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}
div#sidefixedbanner a:hover{ /* マウスカーソルがバナーに乗っている状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/1bn261.jpg) no-repeat scroll 0 0 transparent; 
width: 250px; /* 画像本来の幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}








div#sidefixedbanner2 {
top: 445px; /* ←数字を増やして、上からの位置を調整できます */
right: 0px; /* ←右端に固定する場合は、leftをrightに変更し、バナーのずらし幅を調整してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}
div#sidefixedbanner2 a{ /* マウスカーソルがバナーに乗っていない状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/1bn262.jpg) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
width: 88px; /* ずらした残りの幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}
div#sidefixedbanner2 a:hover{ /* マウスカーソルがバナーに乗っている状態 */
outline:none;
display: block;
background:url(http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/1bn262.jpg) no-repeat scroll 0 0 transparent; 
width: 250px; /* 画像本来の幅 */
height: 180px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}


----------------------------------------------------------------------

申し訳ございません。
削除するタグを教えて頂けませんか。
宜しくお願い致します。

Answer

ECマスターズの田中です。

改めてソースを確認したところ、
いただいたソースの上にある





上記のタグに対応するタグがないことがわかりました。
その結果、下にあるクーポンバナーと混ざってこのような表示になっておりますので、
タグを追記してください。

を初め、のように
終了タグを持つHTMLタグは、
今回のようなページのレイアウト崩れを起こさないために、
必ず開始タグと終了タグをペアで記載していただきますよう
お願いします。

Answer

田中 様

いつもありがとうございます。
早急なご対応感謝致します。

とても勉強になります。

重なりがなくなりました。
ありがとうございます。

Answer

ECマスターズの田中です。

当質問にていただいたような、
画面に固定されるバナーを簡単に設置できる
「バナー設置君」を作成いたしましたので、
全体公開前に、当質問への返信として、
先行してお知らせさせていただきます。

HTMLやスタイルシートを書くことなく、
完成したHTMLをヘッダー・フッター・レフトナビに貼り付けるだけで
固定バナーを簡単に設置することができます。

オプションを詳しく設定することで、
マウスを乗せると動いたり、半透明になったり、
IDを変えることで複数設置することも可能です。

もし、新しいバナーに入れ替える機会などありましたら、
ぜひ、下記URLより「バナー設置君」をお試しいただき、
わかりづらい点やご希望などございましたら
お知らせいただければと思います。
https://ec-masters.club/fwd3/fixedbannerkun

Answer

ECマスターズ 田中様

いつもお世話になっております。

この度はご丁寧にありがとうございます。

とても便利な嬉しいツールですね。

とても助かります。ありがとうございました。