Yahooでの縦帯バナー

Question

お世話になっております。楽天のように、左右の縦帯バナー（リンク付き）をyahooにて設置できますか？[左だけでもいいのですが・・・]もしできるようでしたら、セットするサンプルコードとセットする場所を教えていただければ幸いです。*例)縦帯バナー A[1000px,80px] 縦帯バナー B[1000px,80px]宜しくお願いい致します。

Answer

ECマスターズの田中です。縦帯バナーをyahooに設置することはできます。Eagle23さんのYahoo用ページは内容の横幅が985ピクセルかつ中央寄せなので、たとえばページ内容より10ピクセル左側にスクロールしても追従しない固定バナーを設置し、ウィンドウが固定バナーが表示しきれない横幅の場合は（内容985ピクセル＋バナー80ピクセル×2＋余白10ピクセル×2＝1165ピクセル未満の場合）固定バナーを非表示にする設定をご案内いたします。最初に、Yahoo!トリプル内に、下記内容で外部CSSファイルを設置してください。===== この下の行から ================#tateobiBnrLeft{display: none;}@media screen and (min-width: 1165px) {#tateobiBnrLeft{position: fixed;top: 0px;left: calc( 50% - (985px + 80px * 2) / 2 - 10px );display: block;width: 80px;height: 1000px;background:url(バナー画像URL);background-size: 100% 100%;}}===== この上の行まで ================※バナー画像URLは、実際のURLをご記載ください。次に、下記HTMLソースをヘッダーのフリースペースなど、ページ共通で表示される部分に挿入してください。===== この下の行から ===================== この上の行まで ================※外部CSSファイルのURL・リンク先URLは、実際のURLをご記載ください。左右同時に表示したい場合は、外部CSSファイルの中身を、同じファイルの中にそのままコピーし、「left」を「right」に、バナー画像URLを右側用のものに変更し、HTMLソースのタグのみをコピーし、リンク先URLを変更し、コピーしたCSS・HTMLに含まれる「tateobiBnrLeft」を別の文字列（tateobiBnrRight、など）に変更することで左右同時に表示させることができます。

Answer

ありがとうございます。早速、アドバイスいただいた内容で定義していきました。ページを開いたとき、ヤフーのショッピングロゴやカテゴリー検索入力窓に縦帯バナーがかぶってしまうため　position: fixed;のところの top: 260pxにしました。商品ページを下スクロールしたらバナーが固定されて左帯バナーの上がスペースのようにあいてしまいます。掲示板の他の方の情報を参考にしながら、楽天サイトで実験的に（ヤフートリプルでは更新が遅いので・・）position: absoluteにしたのですが、バナー画像が１枚のみでてくる感じで今度は、バナー下がスペースのようにあいてしまいます。＊ヤフーショッピングの左側上部のロゴや検索入力窓に被らずに、ページをスクロールしても違和感がない設定にしたいのですが、アドバイスいただけましたら幸いです。（縦帯バナーのサイズには特にこだわっておりません。）ヤフーでは現在position: fixed;のところの top: 260pxにしております。宜しくお願いいたします。

Answer

ECマスターズの田中です。設置していただいたバナーを確認したのですが、縦の重なり順による調整もできず（z-index:0; でも被り、-1 だとクリックできなくなる）、JavaScriptが使えないため、スクロールに合わせて位置を調整することができないため、リンクが有効な状態のまま、スクロールしても違和感がない設定にすることが難しい状態となっております。私では解決方法を提示できないのですが、他ショップにてうまく解決されている事例がございましたら、分析して方法をご案内することができますので、URLをお知らせいただきますようお願いいたします。

Answer

アドバイスありがとうございました。本当に助かりました。当初のサンプルにて画像の位置関係を調整し使用させていただきます。今後とも宜しくお願いいたします。

Yahooでの縦帯バナー

カテゴリーから探す