PC固定バナー

Question

こちらのショップさんの左側にある固定バナーのように作りたいのですが、
以前こちらの質問内の「固定バナー」の作成方法とは異なったものですか？

http://www.rakuten.co.jp/ninjaga/index.html

固定バナーを作成する時は、バナーの大きさはどのぐらいで作成したほうが
宜しいのでしょうか？

バナーにマウスを置くと、バナーが大きくなるようにしたいです。
こちらのショップさんのバナーの大きさを調べることができますか？

固定バナーは初めての作成になります。
どうぞ宜しくお願い致します。

Answer

ECマスターズの田中です。

＞以前こちらの質問内の「固定バナー」の作成方法とは異なったものですか？
以前回答した作成方法に、追加の指定をつけくわえる形になります。

いただいたページにて実際適用されているスタイルシートでご案内いたします。

===== この下の行から ================
div#tab02_2 a{ /* マウスカーソルがバナーに乗っていない時は */
	outline:none;
	display: block;
	background:url(http://image.rakuten.co.jp/ninjaga/cabinet/banner/winter_ninja.jpg) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
	background-position: -290px 0px; /* 背景を左に290ピクセルずらす */
	width: 80px; /* ずらした残りの幅 */
	height: 200px;
	-webkit-transition: all 0.5s ease; /* アニメーション設定 */
	-moz-transition: all 0.5s ease; /* アニメーション設定 */
	-o-transition: all 0.5s ease; /* アニメーション設定 */
	}
	
div#tab02_2 a:hover{ /* マウスカーソルをバナーに乗せると */
	outline:none;
	display: block;
	background:url(http://image.rakuten.co.jp/ninjaga/cabinet/banner/winter_ninja.jpg) no-repeat scroll 0 0 transparent; 
	background-position: 0px 0px; /* ずらした背景を元に戻す */
	width: 370px; /* 画像本来の幅 */
	height: 200px;
	-webkit-transition: all 0.5s ease; /* アニメーション設定 */
	-moz-transition: all 0.5s ease; /* アニメーション設定 */
	-o-transition: all 0.5s ease; /* アニメーション設定 */
	}
===== この上の行まで ================

このように、画面端に固定したタグの背景にバナー用画像を設定し、
マウスカーソルを乗せない時は一部だけ、乗せると全部表示するように設定し、
さらに、変化の際アニメーションする設定を加える事で
動きを実現しております。

＞固定バナーを作成する時は、バナーの大きさはどのぐらいで作成したほうが
＞宜しいのでしょうか？
特に、最適なサイズというものはありませんが、
ライバル店舗がどれくらいのサイズで作成されているかご確認いただいた上で、
お客様の閲覧の邪魔にならないようご注意ください。

お客様がショップのページを見る環境は、
最新のワイド型ディスプレイですと横幅2000ピクセル近くになる場合もありますが、
逆に古いディスプレイですと1024ピクセルまでしか表示されない場合などもあります。
そこに横幅300ピクセルの固定バナーが掲載されてしまうと、
画面の1/3が常にバナーで隠れることになってしまいます。

＞こちらのショップさんのバナーの大きさを調べることができますか？
http://image.rakuten.co.jp/ninjaga/cabinet/banner/winter_ninja.jpg
たとえばこちらの固定バナーは、
縦200ピクセル、横370ピクセル（縮小時80ピクセル）となっております。

Answer

ありがとうございます。
早速作成します。
またわからないことがあれば質問させて頂きます。

Answer

バナーは出来ました。

教えて頂いたスタイルシートは、画像のURLを変更してヘッダーに貼り付けましたが、
何も表示されませんでした。
単純に貼り付けるだけでは、ダメなんですね。

＞以前回答した作成方法に、追加の指定をつけくわえる形になります。



  body{
 background-image:url("http://image.rakuten.co.jp/marukin-mk/cabinet/04256963/imgrc0069358510.gif");
 background-repeat:repeat-y;
 background-position:right;
 background-color:transparent;
 }
 

こちらのタグに追加するのですか？
もう少し詳しく教えて頂けませんでしょうか。

もう一点、こちらのバナーにリンクを貼ることは
できるのでしょうか？

宜しくお願い致します。

Answer

ECマスターズの田中です。

誤解を招く表現をして申し訳ありません。
以前回答した方法というのは、他の方に回答した、
下記URLに記載されている方法のことを指しております。
https://ec-masters.club/forum/post_view.php?id=1840

上記方法に、今回ご案内した方法を加える形になりますので、
実際にヘッダー・フッター・レフトナビに記述する内容は
下記のようになります。

===== この下の行から ================




div#sidefixedbanner {
top: 0px; /* ←数字を増やして、上からの位置を調整できます */
left: 0px; /* ←右端に固定する場合は、leftをrightに変更し、バナーのずらし幅を調整してください */
z-index: 10;
display: block;
width: auto;
position: fixed;
}
div#sidefixedbanner a{ /* マウスカーソルがバナーに乗っていない状態 */
outline:none;
display: block;
background:url(バナー用画像URL) no-repeat scroll 0 0 transparent; /* 背景としてバナー用画像を設定 */
background-position: -290px 0px; /* 背景を左に290ピクセルずらす */
width: 80px; /* ずらした残りの幅 */
height: 200px; /* 画像の縦幅 */
-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(バナー用画像URL) no-repeat scroll 0 0 transparent; 
background-position: 0px 0px; /* ずらした背景を元に戻す */
width: 370px; /* 画像本来の幅 */
height: 200px; /* 画像の縦幅 */
-webkit-transition: all 0.5s ease; /* アニメーション設定 */
-moz-transition: all 0.5s ease; /* アニメーション設定 */
-o-transition: all 0.5s ease; /* アニメーション設定 */
}

===== この上の行まで ================
※バナー用画像URLは、実際のURLにご変更ください。
※バナーのサイズを変更されている場合は、各数値の修正が必要となります。



＞もう一点、こちらのバナーにリンクを貼ることは
＞できるのでしょうか？

リンクを張ることはできません。
張るためには、縦バナーの設置方法を変える必要があります。
リンク付き縦バナーの設置方法は、下記URLの回答をご参照ください。
https://ec-masters.club/forum/post_view.php?id=1873

Answer

何度もご教授ありごとうございます。
設置することが出来ました！

もう一つ教えてください。

300円OFFクーポンの下に、もう一つ同じく500円OFFクーポンバナーを
設置したいのですが、単純に同じタグを、300円クーポンのタグの下に
入れただけでは設置されないのでしょうか？

試してみたのですが、500円クーポンしか設置できませんでした。
300円クーポンが設置されず・・・？

自店のトップページを確認して頂ければと思います。

Answer

ECマスターズの田中です。

単純に同じタグを入れただけでは、
同じid属性を持つ要素が２つ発生して、
どちらにも同じスタイルシートが適用され、
同じ位置に表示されてしまいます。

複数設置される際は、最初に、
どちらかのID属性をご変更ください。

先に案内したタグの場合、
id="sidefixedbanner" が1箇所、
#sidefixedbanner が3箇所含まれますので、
例えば、 id="sidefixedbanner2"　#sidefixedbanner2　というように、
共通の文字列に変更します。

次に、変更したタグの表示位置を移動させてください。

先に案内したタグの場合、
元の位置が top: 0px; （上端ぴったり）なので、
top: 200px; （上端から200ピクセル）に変更することで、
最初のバナーより下に移動させることができます。

Answer

完成致しました。
思い通りのものが出来上がり満足しております。
いつも迅速なご対応に感謝致します。
ありがとうございました。