左右にある動くバナーの作り方を教えてください。

Question

いつもお世話になっております。先日頂いたメールの内容は
大変参考になりました。重宝しております。ありがとうございました。

質問なのですが、下記の有名ショップの左右の動くバナーを
参考に、何か作ってみたいと思うのですがタグが分かりません。
教えて頂けると幸いです。よろしくお願い申し上げます。

http://www.rakuten.ne.jp/gold/luire/top/

Answer

ECマスターズの田中です。

例えば、画面右端に固定されており、
マウスを当てると100px分左に伸びるバナーは
下記のようなタグを、ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に
挿入することで、設置することができます。

===== この下の行から ================
（バナーの内容）

#sidefixedbanner {
top: 100px; /* ←数字を増やして、上からの位置を調整できます */
right: -100px; /* 
↑画像の隠したい部分の長さを指定してください。
左端に固定する場合は、rightをleftに変更してください。 */
z-index: 10;
display: block;
width: auto;
position: fixed;
transition: 0.5s; /* ←数字を減らすと、動きが速くなります。 */
}

#sidefixedbanner:hover{
right: 0px;
}

===== この上の行まで ================

ちなみに、上記タグのID（sidefixedbannerの部分、計３箇所）を変えた上で、
topやrightの値を変えたり、rightをleftやbottomに変えたり、topをbottomに変えたりすることで、
位置調整や、伸縮する方向の変更を加えつつ複数設置することができます。

Answer

ご返答ありがとうございます。早速作ってみたのですが、どうもうまくいきません。
ただの固定バナーが貼っただけになってしまいます。
お手数ですがどの辺がおかしいかご指摘お願い致します。









#sidefixedbanner {
top: 100px; /* 
right: -100px; 
z-index: 10;
display: block;
width: auto;
position: fixed;
transition: 0.5s; 
}

#sidefixedbanner:hover{
right: 0px;
}

Answer

ECマスターズの田中です。

いただいたHTMLソースの８行目、
top: 100px; /* 
の末尾に「/*」が残っております。

「/*」は、「この位置から*/までをコメント（開発者のメモ書き）とみなす」という意味で、
次に*/が出てくるまでのスタイルシートの規則を無効化します。

そのため、８行目以降のスタイルシートが無効化されてしまっておりますので、
８行目の末尾の「/*」を削除していただき、
再度動作のご確認をお願いします。

Answer

即答ありがとうございます。とりあえず無事完成しました。ありがとうございます。

ですが、１０％くらいしか格納できません。手本のショップみたいに
９０％ほど格納させたいのですが、どこを操作すればいいですか？

あと、バナーサイズももう少し小さくしたいのですが・・。

何度もすみません。

Answer

即答ありがとうございます。とりあえず無事完成しました。ありがとうございます。

格納は解決いたしましたが、left の設定にすると何故か動かなくなります。
どの辺が悪いのでしょうか？

バナーサイズの縮小も引き続きお願い致します。

重ね重ねすみません。








#sidefixedbanner {
top: 10px;
left: -400px; 
z-index: 10;
display: block;
width: auto;
position: fixed;
transition: 0.5s; 
}

#sidefixedbanner:hover{
right: 0px;
}

Answer

ECマスターズの田中です。


＞あと、バナーサイズももう少し小さくしたいのですが・・。

HTMLタグにて、表示させたい画像サイズを指定してください。

例）

↓


または、下記URLで紹介されている楽天の機能で、縮小画像を作成してください。
https://www.s-oj.com/ec-business/photoshop-rakuten/

例）
http://image.rakuten.co.jp/auroraweb/cabinet/2014design/get001.jpg
↓
http://thumbnail.image.rakuten.co.jp/@0_mall/auroraweb/cabinet/2014design/get001.jpg?_ex=230x230

通信量が少なくなるので、後者をオススメします。
併用していただいても結構です。


＞ですが、１０％くらいしか格納できません。手本のショップみたいに
＞９０％ほど格納させたいのですが、どこを操作すればいいですか？

まずは画像を縮小していただいた後に、
格納させる量を決めていただいて、
いただいたソースの９行目、元のソースで「画像の隠したい部分の長さ」としている
left: -400px; 
の値を調整してください。


＞格納は解決いたしましたが、left の設定にすると何故か動かなくなります。
＞どの辺が悪いのでしょうか？

格納した状態の位置は、先述の通りソースの９行目で、
表示された状態の位置は、ソースの１８行目である
right: 0px;
で示しております。
そのため、９行目と１８行目を合わせる、つまり１８行目を
left: 0px;
とする必要がありますので、
ご変更をお願いします。

Answer

即答ありがとうございます。　やっと理想のバナーが完成しました！
的確なご説明ありがとうございます。また宜しくお願い申し上げます。