縦バナーにリンクをつける方法

Question

いつもお世話になっております。

今度のスーパーセールでクーポンを出そうと思っていますが
右の縦バナーをリンクにするソースを教えていただけますでしょうか。
宜しくお願い致します。

Answer

ECマスターズの田中です。

リンク付きの縦バナーを出す場合、
下記のHTMLタグをご利用ください。

===== この下の行から ================



.link {
position: absolute;
width: 縦バナーの横サイズpx;
top: 0px;
min-height: 100%;
z-index: 0;/*重なり順の設定。ページ内他のパーツより上に出したい時は数字を増やす*/
height: 3000px;/*ページの長さによって調整する*/
visibility: visible;/*縦バナーの表示・非表示（hidden＝消す、visible＝見せる）*/
}
#tbl {
left: 20px; /* 画面左端とバナーの間隔 */
background: url(縦バナー左の画像URL) repeat-y scroll;
}
#tbr {
right: 20px; /* 画面右端とバナーの間隔 */
background: url(縦バナー右の画像URL) repeat-y scroll;
}
div.link a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*小さいモニタの場合非表示にする（一行下の1220を変更して調整可能）*/
@media screen and (max-width: 1220px) {
.link {
visibility: hidden;
}
}

===== この上の行まで ================
※上記タグ中の、縦バナーの横サイズは実際の数値に、
　縦バナー左（右）のリンク先（画像）URL、計4箇所は実際のURLに
　変更してご利用ください。
※上記タグ中「height」の値を大きく設定しすぎると、
　ページの高さが長くなりますのでご注意ください。
※左右どちらかのバナーのみご利用される場合は、
　1行目または2行目を削除してください。
※HTMLタグを設置してもバナーが表示されない場合は、
　「小さいモニタの場合非表示にする」部分の数字を小さくしてご確認ください。

Answer

こんにちは。タグ教えてくださり、ありがとうございました。
右だけリンクバナーを出したいので、以下のように書き換えましたがあっていますでしょうか？





.link {
position: absolute;
width: 縦バナーの横サイズpx;
top: 0px;
min-height: 100%;
z-index: 0;/*重なり順の設定。ページ内他のパーツより上に出したい時は数字を増やす*/
height: 3000px;/*ページの長さによって調整する*/
visibility: visible;/*縦バナーの表示・非表示（hidden＝消す、visible＝見せる）*/
}
#tbl {
left: 20px; /* 画面左端とバナーの間隔 */
background: url(縦バナー左の画像URL) repeat-y scroll;
}
#tbr {
right: 20px; /* 画面右端とバナーの間隔 */
background: url(クーポン画像) repeat-y scroll;
}
div.link a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*小さいモニタの場合非表示にする（一行下の1220を変更して調整可能）*/
@media screen and (max-width: 1220px) {
.link {
visibility: hidden;
}
}




それと、このタグは、どの部分にはりつければよいのでしょうか？
いつもリンクなしで縦バナーを貼るときには、共通説明文（大）に張っているので、そこにタグを入れましたが
プレビューを押しても、真っ白で反映されていない状態でした。（「小さいモニタの場合非表示にする」部分の数字を500くらいまで小さくしても出ませんでした）

宜しくお願い致します。

Answer

ECマスターズの田中です。

＞右だけリンクバナーを出したいので、以下のように書き換えましたがあっていますでしょうか？
「width: 縦バナーの横サイズpx;」についても、実際の数値にご変更いただいていれば、
正しい記述になっております。

＞このタグは、どの部分にはりつければよいのでしょうか？
共通説明文（大）の中で結構です。
ヘッダー・フッター・レフトナビの中にも貼り付けできます。

＞プレビューを押しても、真っ白で反映されていない状態でした。
プレビューと実際のページでは、HTMLの構造が違いますので、
まずは実際に適用させてご確認いただけますでしょうか。
それでも表示されない場合も、実際のソースを確認する必要がありますので
特に表示崩れなどがなければ、適用させたままの状態で
再度ご返信いただきますようお願いいたします。

Answer

実際に表示するとなると、SS開催のときに始めて確認するしかありませんが、
開催は土曜の19時で、表示されなかった場合、連絡をしても、月曜まで返事をいただけないと思うのですが
どうなのでしょうか。お得なクーポンですので、月曜日まで表示できないのは売り上げに大きくかかわってしまいます。

Answer

ECマスターズの田中です。

バナーをお客様に見せたくない場合は、
バナーを貼った状態の共通説明文（大）を
別途作成していただき、
サーチ非表示に設定したテスト用商品ページを作成していただき、
同商品ページに、作成した共通説明文（大）を
適用していただくことで、
お客様に見えないまま、実際の環境でバナーの動作を
ご確認いただけますので、お試しいただけますでしょうか。

なお、今回のリンク付き縦バナーは、
スーパーSALE用バナー以外にも、
あらゆるイベントやクーポン用にご活用いただけますので、
スーパーSALE開始前に別のバナーを出しておいて
ご活用いただくこともご検討ください。

Answer

方法をおしえてくださりありがとうございます。

実は、リンクをつけない方式の画像のみの縦バナーなら、もうはりつけています。
http://item.rakuten.co.jp/shinfulife/c/0000000378/

この方式だと、プレビューで確認ができるのですが、もしかして、このタグ自体を操作すればプレビューでも確認できたりするのでしょうか。
こちらで使っているタグは以下になります。




body {
background-image: url("縦バナー画像URL");
background-repeat: repeat-y;
background-attachment: scroll;
background-position:right;
}


何度もすみません。
宜しくお願い致します。

Answer

ECマスターズの田中です。

リンクを付けない方式の縦バナーとは仕組みが異なりますので、
こちらのタグを操作されても、プレビューで確認できるかどうかは変わりません。

お手数をおかけしますが、
先にご案内した方法でご確認いただけますでしょうか。

Answer

そうなのですね。
いろいろ教えてくださりありがとうございました。
教えていただいた方法で渡来してみます。