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

(※この記事は、2014/3/12に投稿されたオガレポを再掲載しています。)

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

先日より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枚が無料でお使い頂けますよ～！もちろん縦帯バナーも入ってます。

「本当に無料なんですか・・・？」とご質問をよく頂くのですが、本当に無料です、ご安心を！
ではでは。オガリア中村でした。