スタイルシート内にリンクを

Question

いつもおせわになっております。
以下のＣＳＳにリンクを貼りたいのですが





△△△にそのまま入れるとなにも表示されなくなります。

どうすれば上記のＣＳＳにリンク付けされた縦バナーを配置することが可能でしょうか？
宜しくお願いします。

Answer

ECマスターズの田中です。

CSSだけでリンクを追加することはできないので、
別の方法でバナーを挿入する必要があります。

下記のHTMLタグを、
ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）の
いずれかに挿入してください。

======== この下の行から ==================

/* リンク付き縦バナーを表示 */
#fixedsidebanner {
left: 20px; /* 画面端からの距離。右端に設置する場合は、left→rightに変更 */
background: url(バナー画像ＵＲＬ) repeat-y scroll; /* 「バナー画像ＵＲＬ」を、実際のURLに変更 */ 
position: absolute;
width: 縦バナーの横幅px; /* 「縦バナーの横幅」を、半角数字に変更 */
top: 0px;
min-height: 100%;
z-index: 0; /* 重なり順の設定。上に他の要素が表示されて邪魔な場合は、数字を増やす */
height: 3000px; /* バナー表示領域の縦幅。ページの長さによって、数字を調整 */
visibility: visible; /* 縦バナーの表示・非表示（hidden＝消す、visible＝見せる） */
}

#fixedsidebanner a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/* 小さいモニタ(ウィンドウ)の場合、ページ内容に被らないよう非表示にする */
@media screen and (max-width: 1220px) {
#fixedsidebanner { visibility: hidden; }
}


======== この上の行まで ==================
/* と */ で囲まれている文字は注釈のため、修正の必要はありませんが、
バナー画像ＵＲＬ、縦バナーの横幅、リンク先のＵＲＬは
必ず実際の内容にご変更ください。

Answer

ご回答ありがとうざいます。
上記ＣＳＳに入力したのですが表示されませんでした、
・/* と */ で囲まれている文字はそのままに
・バナー画像ＵＲＬ、縦バナーの横幅、リンク先のＵＲＬは実際の内容に変更しましたが表示されませんでした。

原因はどういったことが考えられますでしょうか？

Answer

ECマスターズの田中です。

ソースを確認する必要がありますので、
実際に先述のHTMLタグをご記載いただき、
記載された様子が確認できる商品ページの商品管理番号をいただけますでしょうか。

お客様に見えるページに記述することが難しい場合は、
テスト用に、サーチ非表示のコピーページをご用意いただき、
PC用販売説明文に先述のHTMLタグをご記載いただいても結構です。

なお、こちらのバナーは、
ページを表示するウィンドウの幅が1220ピクセル未満の場合、
ページの内容にかぶらないよう非表示になるので、
それが原因でご確認いただけていない可能性があります。

ページをご確認いただいているウィンドウの幅が
1220ピクセルより狭い場合は、
先述のHTMLタグの最後から5行目にある、

@media screen and (max-width: 1220px) {

の、「1220」の数字を減らして、動作をご確認いただけますでしょうか。

Answer

ECマスターズの田中です。

申し訳ありません、最初にご返信さし上げた際に、
リンクを設定するために必要なCSSの記載が漏れておりましたので、
追記させていただきました。

追記したのは、#fixedsidebanner a { から } までの部分となります。

お手数ですが、すでにご記載いただいたHTMLタグに、
上記内容を追記していただきますようお願いいたします。

Answer

該当ページはこちらです。
●●●は店舗アカウントです。
http://item.rakuten.co.jp/●●●/plicsyasprint/

スタイルシートは下記の通りです。
●●●は店舗アカウントです。


/* リンク付き縦バナーを表示 */
#fixedsidebanner {
right: 20px; /* 画面端からの距離。右端に設置する場合は、left→rightに変更 */
background: url(http://image.rakuten.co.jp/●●●/cabinet/04321093/imgrc0064458191.jpg) repeat-y scroll; /* 「バナー画像ＵＲＬ」を、実際のURLに変更 */
position: absolute;
width: 縦バナーの横幅px; /* 「縦バナーの横幅」を、半角数字に変更 */
top: 0px;
min-height: 100%;
z-index: 0; /* 重なり順の設定。上に他の要素が表示されて邪魔な場合は、数字を増やす */
height: 3000px; /* バナー表示領域の縦幅。ページの長さによって、数字を調整 */
visibility: visible; /* 縦バナーの表示・非表示（hidden＝消す、visible＝見せる） */
}

#fixedsidebanner a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/* 小さいモニタ(ウィンドウ)の場合、ページ内容に被らないよう非表示にする */
media screen and (max-width: 932px) {
#fixedsidebanner { visibility: hidden; }
}




すいませんが宜しくお願いします。

Answer

ECマスターズの田中です。

商品管理番号 plicsyasprint の商品ページのソースを確認したのですが、
貼り付けていただいたソースは確認することができませんでした。
実際の商品ページを、再度ご確認いただけますでしょうか。

また、作成していただいたHTMLタグに含まれております

width: 縦バナーの横幅px; /* 「縦バナーの横幅」を、半角数字に変更 */

を、

width: 160px; /* 「縦バナーの横幅」を、半角数字に変更 */

にご変更いただきますようお願いいたします。

Answer

できました、ありがとうございます。