【コピペで完了】Yahoo!ストアに縦帯バナーを設置するHTMLソース

こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。

0312

こんにちは～。ガムテープはビニールより布派、オガリア中村です。

先日よりYahoo!ストア向けのogaRia無料プランを公開させて頂いた事もあり、このオガレポもYahoo!ストア様に読んで頂く機会が増えているに違いありません。

そこで…初！Yahoo!ストア様向けのネタを投下しますよ。ドキドキ。

手始めに、ストアページの左右に縦帯バナーを設置する方法書きます！
楽天ショップと同じCSSで行けると思っていたのですが、Yahoo!ストアマネージャー内ではCSSをインラインに記述する必要がありました。

以下、HTMLソースをコピーの上、必要箇所(画像URLとリンク先URL)を書き換えください。

左側に設置する場合

左側に縦帯バナーがついちゃいますよ～

<ul>
<li style="background-color:transparent;
background-image:url(縦帯バナーURL);background-repeat:repeat-
y;background-position:top
left;background-attachment:scroll;height:7000px;top:230px;z-index:auto;left:0px;position:absolute;width:80px;min-height:100%;visibility:visible;display:block;">
<a href="リンク先URLを入力"
style="display:block;min-height:100%;width:80px;visibility:visible;height:7000px;text-indent:-9999px;">
</a></li>
</ul>

右側に設置する場合

右側にだって縦帯バナーがついちゃいますよ～

<ul>
<li style="background-color:transparent;
background-image:url(縦帯バナーURL);background-repeat:repeat-
y;background-position:top right;background-attachment:scroll;height:7000px;top:230px;z-index:auto;right:0px;position:absolute;width:80px;min-height:100%;visibility:visible;display:block;">
<a href="リンク先URLを入力"
style="display:block;min-height:100%;width:80px;visibility:visible;height:7000px;text-indent:-9999px;">
</a></li>
</ul>

※2014.03.17 CSS記述に誤りがあった為、内容を修正しました。す、すいません…！

yahoo!ストアの画像URL

↓の内容になります。

http://shopping.c.yimg.jp/lib/storeID/*****.jpg

(※storeIDは自店舗のストアIDに書き換えましょう。

yahoo!ストアマネージャー内貼付け箇所

※2014.03.17追記

全ページ共通で表示が可能な「フリースペース」へ貼付けましょう。

■例）レフトナビ「フリースペース」
Yahoo!ストアマネージャー ＞ ストアデザイン ＞ デザイン設定　に入ります。
レフトナビ内「フリースペース1」をクリックし、下部に表示される「フリースペース」枠内へHTMLを貼付けます。

　　
　
ちなみに、、、「ogaRia for Yahoo!無料ライトプラン」では、Yahoo!ストアで使えるバナー素材100枚が無料でお使い頂けますよ～！もちろん縦帯バナーも入ってます。

「本当に無料なんですか・・・？」とご質問をよく頂くのですが、本当に無料です、ご安心を！

尚楽天ショップ様におかれましては、「楽天店舗ページに左縦帯バナーも右縦帯バナーも貼る方法」の記事をご参照くださいませー！

ではでは。オガリア中村でした。

関連記事

楽天店舗ページに左縦帯バナーも右縦帯バナーも貼る方法楽天店舗ページに左縦帯バナーも右縦帯バナーも貼る方法 楽天PC店舗ページに、スクロール追従バナーを設置する方法楽天店舗ページに左縦帯バナーを設置して、しかもリンクも貼れちゃう方法 Yahoo!ストアマネージャーでの店舗構築は、CSSをインライン記述に一発変換する「CSS inliner」が便利。Yahoo!ストアマネージャーでの店舗構築は、CSSをインライン記述に一発変換する「CSS inliner」が便利。 【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法
    • やまもと@BOS
    • 2014 3/13 11:01am

    いつもお世話になってます！やまもとです。
    Yahoo!ストア向けのogaRia無料プランを公開しているんですか！
    凄い販促ですね！

    トリプルを使用している人は、Yahoo!ストアマネージャー内でも
    楽天と同じようにCSSが使えますよね！
    楽天同様、CSS等のYahooネタをお願いします〜♪

      • ogaria
      • 2014 3/20 2:11pm

      山本様

      お世話になっております～！コメント有難う御座います！
      弊社オーガランドYahoo!店もトリプルで店舗構築をしておりますので、
      現場からネタをもらって参りますね！！
      どうぞ宜しくお願い致します^^

    • 通りすがり
    • 2014 5/26 12:48pm

    Yahooストアの縦バナーを検索して辿り着きました。
    記述で分からない点があるので質問です。

    「Yahoo!ストアマネージャー ＞ ストアデザイン ＞ デザイン設定」
    とありますが、”デザイン設定”という項目がないのですが、
    これは「ストアデザインメニュー」の欄という事ですか？

    また、「レフトナビ内」とありますが、これは「サイドナビ」ですか？

    フリースペース1に上記URL（IDや画像の指定変更済み）を入れても、
    表示できないのですが、何か注意点などありますでしょうか。
    お手隙の時にでも回答していただけると助かります。
    よろしくお願いします。

      • 通りすがり
      • 2014 5/26 1:23pm

      解決しました。

      申し訳ありません。
      URLを入れる際に、「url(縦帯バナーURL)」に上書きしていました。
      （）内にそのまま入れれば良かったんですね。

      おかげさまで両サイドに画像を入れることが出来ました。
      ありがとうございました。

        • ogaria
        • 2014 5/27 9:30am

        通りすがり様

        ご返信遅くなり申し訳ありません！
        解決されたとの旨大変恐縮で御座います。。
        また何か御座いましたら、どうぞササッとコメントくださいませ～！

    • きょう
    • 2014 7/25 8:55pm

    楽天商品ページのHTMLをヤフー商品ページにコピペしてもキチンと反映されないのですが、不要な記述などを訂正してくれる方法やツールまたは御社のサービスはありますか？

      • ogaria
      • 2015 3/12 7:04pm

      > きょう様

      コメント頂きありがとう御座います！
      今更なご返信ですが、、、弊社ogaRiaサービスにては、該当サービスは現在ご提供出来て御座いません、、、開発検討させてください！

      恐らく

  4. お世話になります。
    Yahoo!ストア向けのogaRia無料プランを利用させて頂いております。
    縦帯サイドバナーをさっそく利用させて頂いたのですが、PCの画面によってカテゴリーやサイドバナーにかぶってしまい困っています。
    どのPC環境でも見やすくなるようにはどのようにすればいいでしょうか。
    無知で申し訳ございませんが、ご教授いただけないでしょうか。

      • ogaria
      • 2015 3/12 7:07pm

      イマムラyahoo様

      コメントありがとうございます！
      縦帯バナーがサイドバナーに被ってしまうとの事ですが、ストアページ全体はセンター寄せにして頂いてる状態でしょうか？？
      左寄せのご設定ですと被ってしまいますので、センター寄せをオススメします。
      (恐らくストアマネージャー内に該当の設定項目があるかと・・・）

    • ko-ki
    • 2014 9/7 3:15am

    はじめまして。
    コメント失礼します。
    いつもとても参考になる記事をありがとうございます。
    私は現在yahooショップでショップを運営しております。
    htmlは勉強中で、失敗の毎日です。
    縦帯バナーについても失敗しながらなんとか設置完了！！
    そこで質問なんですが、縦帯バナーを設置したのは良いのですが、画面の幅を狭くするとバナーも一緒に動き、メイン画面を隠してしまいます。
    その対処法を教えていただけないでしょうか。
    例えば、画面の幅を狭くした場合でもメイン画面の背面をバナーが移動する。
    など、そのような対策があるのなら教えてください。
    お手数ですが、よろしくお願い致します。

      • ogaria
      • 2015 3/12 7:12pm

      ko-ki様

      コメントありがとうございます！
      HTMLは勉強中との事、、私も楽天店長になるまで無知でした、ご状況お察しします、、

      > 画面の幅を狭くした場合でもメイン画面の背面をバナーが移動する。

      こちら、以下の方法で実現可能です。
      記事内でご案内させて頂いたHTMLの中に、

      z-index:auto;

      という記述があるのですが、こちらを

      z-index:-9999;

      に変更して頂ければ反映されます。

      お試しくださいませー！

  6. お世話になりました。

    ひとつ質問ですが

    リンク先を別タブで表示したい時はどのようにしたらよいのでしょうか？

    <a href="リンク先URLを入力"の次にtarget="_blank"をつけてもダメっぽかったです。

    宜しくお願いします。

  7. お世話になります。

    もう一度チャレンジしたらできました。

    target=”_blank”を”target=”_blank”にしたと思います。

    ありがとうございました！

      • ogaria
      • 2015 3/12 7:13pm

      さとう様

      コメントありがとう御座います！
      無事に設定できたとの事、大変幸いです！
      ゴミの様にお力になれず、、、申し訳ありません、、、ふがいない、、、

    • 初心者いなば
    • 2014 10/24 1:18pm

    ヤフーショッピング出店者です。
    現在のストアクリエイターproでは上記の方法では縦バナー登録は
    できないのでしょうか？
    何度やっても上手くいきません(泣)
    よければご教授願いますm(__)m

    • さく
    • 2014 11/17 1:22pm

    すみません、通りすがり様と同じ質問内容になってしまうのですが
    ”デザイン設定”という項目がないのですが、
    これは「ストアデザインメニュー」のことですか？
    また、「レフトナビ内」とありますが、これは「サイドナビ」のことですか？
    サイドナビ内のフリースペースに右用と左用の記述をすれば表示されるのでしょうか？

    サイドナビのフリースペース１に右用と左用を記述してみたのですが変更されなかったので場所を間違えておりましたら教えていただければ幸いです。

    • にしひがっし
    • 2014 12/20 12:01pm

    こんにちは。
    早速ですが、ストアデザインの左側に縦帯をつけたくて、色々探してこちらにたどり着きました。
    「遂に救世主に出会えた！やったー！」と思ってやってみたのですが、うまくいきません。ウィンドウの左端にぴたりとくっついてしまう感じになります。
    サイドナビの左側に、ぴったり寄り添うような形にしたかったのですが(^_^;)
    これが実際のページです。
    http://store.shopping.yahoo.co.jp/e-zakkakoubou/

    何かヤフーのオプションサービスに申し込んでおく必要があるのでしょうか？

    ご多忙中恐縮ですが、ご教授下さい。
    よろしくお願いします。

  1. トラックバックはまだありません。

オガリア中村

オガリア中村
こんにちは、オガリア中村です。最近よく、田舎でゾンビに囲まれる夢を見ます。アワビは嫌いですがホタテは好きです。宜しくお願いします。

webデザイナー募集中

ogaRiaで働きませんか？

オガリア技術ブログ

オガリア技術ブログ オガリア開発チームによる技術ブログです。