縦バナーの変更について

Question

お世話になります。

（HTMLがよくわかっていないまま、いつも作業しております。）

楽天市場で、現在、イベント時に縦バナーを下記内容でレフトナビに入れて変更しています。

これを、ECステーションのイベントバナーを利用して、自動で変更できるようになりますでしょうか？

何か、簡単な方法がございましたら、ご教示ください。

よろしくお願いいたします。




/* 縦バナースタイルシート */
#r-tban {
position: absolute;
top: 400px;
right: 0px;
background: url("") repeat-y scroll right top;
}
#r-tban a {
display: block;
height:8800px;
width: 100px;
}
#r-tban:hover {
 opacity:0.8;
 filter:alpha(opacity=80);
 -ms-filter: "alpha( opacity=80 )";
}

Answer

ECマスターズの田中です。

リンク付き縦バナーの表示・非表示の切り替えでしたら、
画像ファイルを差し替えるだけではリンクが残ってしまいますので、
外部スタイルシートファイルの切り替えで調整する方法が良いと思います。

設定した時刻にファイルをGOLDへアップロードできる

GOLD自動アップ君
https://ec-masters.club/index.php?ecmtools#tool10

を利用して、
イベント開始時刻に、リンク付きバナーを表示させるスタイルシートを、
イベント終了時刻に、非表示にするスタイルシートを
それぞれアップロードすることで、表示・非表示の切り替えができます。

最初に、別々のフォルダで結構ですので、
メモ帳を２つ開いて、それぞれに下記内容を記載して、
同じ名前の外部スタイルシートファイルとして
保存してください。


■１つ目（バナー表示用、いただいたHTMLタグのタグの内容と同じ内容です）
===== この下の行から ================
#r-tban {
position: absolute;
top: 400px;
right: 0px;
background: url("画像URL") repeat-y scroll right top;
}
#r-tban a {
display: block;
height:8800px;
width: 100px;
}
#r-tban:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
===== この上の行まで ================

■２つ目（バナー非表示用）
===== この下の行から ================
#r-ban { display: none; }
===== この上の行まで ================


次に、保存した外部スタイルシートファイルのどちらかを、
GOLDにアップロードしてください。(※)

最後に、いただいたHTMLタグのタグを、タグに置き換えてください。

===== この下の行から ================
/* 縦バナースタイルシート */
#r-tban {
position: absolute;
top: 400px;
right: 0px;
background: url("") repeat-y scroll right top;
}
#r-tban a {
display: block;
height:8800px;
width: 100px;
}
#r-tban:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}

===== この上の行まで ================

　　↓上記タグを、下記タグに置換

===== この下の行から ================


===== この上の行まで ================
※(※)でアップロードしたファイルのURLは、実際のURLに変更してご利用ください。


あとは、GOLD自動アップ君を利用して、
イベント開始時刻に表示用、終了時刻に非表示用の
スタイルシートファイルをアップロードするようご設定いただければ、自動変更が可能となります。

外部スタイルシートを使うメリットなど、詳しい説明は下記URLを、
http://www.shoshinsha.com/hp/ref/css/css_outr.html
GOLD自動アップ君の使い方については、下記URLよりマニュアルをご参照ください。
https://ec-masters.club/index.php?ecmtools#tool10

Answer

ありがとうございます。画像の変更できました。

画像の切り替えに合わせて、リンク先も変えたいのですが、どうすればよろしいでしょうか？

Answer

ECマスターズの田中です。

誤った内容のご案内を避けるためにご確認させていただきたいのですが、

イベント開始・終了時に、
表示されている画像とリンク先を変更されたいということで
間違いないでしょうか。
イベント終了時に、バナー全体を非表示にする必要はないということでしょうか。

Answer

返信が遅くなってしまい、すみません。

イベント開始・終了時に、
表示されている画像とリンク先を変更したい でまちがいありません。

宜しくお願いいたします。

Answer

ECマスターズの田中です。

スタイルシートを利用してリンク先を変更することはできませんので、
リンク先の違うタグを２つご用意いただき、
表示を切り替えることでご対応ください。

具体的な方法をご案内いたします。

前回作成していただいた外部スタイルシートファイルを、
それぞれ下記の内容にご変更の上、
楽天GOLD内のファイルを上書きしてください。

■１つ目（バナーA表示用）
===== この下の行から ================
#r-tban {
position: absolute;
top: 400px;
right: 0px;
background: url("バナーAの画像URL") repeat-y scroll right top;
}
#r-tban a {
display: block;
height:8800px;
width: 100px;
}
#r-tban:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
#r-tban a#vbanner2 { display: none; }
===== この上の行まで ================


■２つ目（バナーB表示用）
===== この下の行から ================
#r-tban {
position: absolute;
top: 400px;
right: 0px;
background: url("バナーBの画像URL") repeat-y scroll right top;
}
#r-tban a {
display: block;
height:8800px;
width: 100px;
}
#r-tban:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}   
#r-tban a#vbanner1 { display: none; }
===== この上の行まで ================
※各バナーの画像URLは、実際のURLにご変更ください。


最後に、いただいたHTMLタグを、下記のようにご変更ください。


===== この下の行から ================

 

===== この上の行まで ================

↓

===== この下の行から ================

 
 

===== この上の行まで ================
※各バナーのリンク先URLは、実際のURLにご変更ください。


その後は前回同様、GOLD自動アップ君をご設定いただくことで、
自動変更が可能となります。

Answer

さっそくに、ありがとうございます。
画像の変更だけでも、今回のセールで、大変、助かりました。
こちらもまた。やってみます。
よろしくお願いいたします。