動くバナーを複数設置する方法

Question

前回教えて頂いて作った左側の動くバナーの、

左下か右に設置しようと四苦八苦しているのですが、なかなかうまくできません。

左下に付けようとすると重なって貼られたり、仕方なしに右側に試みても、

なぜか左側にしか設置できません。　アドバイスをお願い致します。

下記のタグは右に設置しようと試みても左にしか貼ってくれません。
どこが悪いのでしょうか。お願い致します。









#sidefixedbanner {
top: 250px; /* 
right: -170px; 
z-index: 10;
display: block;
width: auto;
position: fixed;
transition: 1.9s; 
}

#sidefixedbanner:hover{
right: 0px;
}

Answer

ECマスターズの田中です。

いただいたHTMLソースの８行目、
top: 250px; /* 
の末尾に「/*」が残っております。

「/*」は、「この位置から*/までをコメント（開発者のメモ書き）とみなす」という意味で、
次に*/が出てくるまでのスタイルシートの規則を無効化します。

そのため、８行目以降のスタイルシートが無効化されてしまっておりますので、
まずは８行目の末尾の「/*」を削除してください。

また、このソースの中で3回記載されている
「sidefixedbanner」は、いわゆる「ID」と呼ばれるもので、
１つのページの中で１つしか存在してはいけないものとなっております。

既存の「sidefixedbanner」とは別に設置される場合は、
この3箇所のIDを「sidefixedbanner2」など、別の半角英数字による文字列に変更して
ご記載いただきますようお願いします。

Answer

ありがとうございました。無事設置できました。

Answer

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