【PC版】コピペするだけ！Yahoo!ショッピング フローティングバナーの設置方法
Yahoo!ショッピングにフローティングバナーを設置。
Yahoo!ショッピングの商品ページやカテゴリーページなどでフローティングバナーを置く方法を解説します。
フローティングバナーとは画面をスクロールしてもついてくるタブとかボタン風のバナーです。（フロートバナーとも）
外部CSSも使わずコピペするだけでオッケーです。
※画像のなかほら牧場さんのサイトがキレイでプリンがうまそーだったので勝手にサンプルに選んだだけ。なかほら牧場さんは本記事とは全く無関係です。
※95％OFFクーポンなんてふざけたクーポンも実在せいません。管理人が勝手にやっただけです。
先にフローティングバナー用の画像をアップロード
こんな感じで設置され、画面をスクロールしてもついてきてくれます。
先にバナー用の画像を作ってアップロードしておきましょう。
アップロード先はトリプルでもストアクリエイターPro内の追加画像の部分でもオッケーです。
（トリプル＝楽天GOLDにあたるHTML領域）
Yahoo!ショッピングの場合、どちらにしてもアップロードから実際に見れるようになるまで時間がかかるので先のアップロードをオススメします。
冒頭の画像の例ではわかりやすいよう画像をかなり大きめにしていますが、あまりに大きすぎるとお客様のモニターのサイズによっては商品ページに被ってしまうのでほどほどに。
フローティングバナーの設置方法
ストアデザインメニュー内のフリースペースにコードをコピペする。
まずストアクリエイターProにログインし、
ストアデザイン → ヘッダー・看板 → フリースペース
をクリック。
そして下記のHTMLコードをコピペしてください。
<a href="【リンク先】; style="display:inline-block; position:fixed; top:200px; right:0; z-index:9999; width:【画像の横幅】px;" target="_blank"> <img src="【画像URL】" /> </a>
そして、【リンク先】、【画像の横幅】、【画像URL】の3点を適宜書き替えてください。
もしまだフリースペースが設置されていないようでしたら新たにフリーペースを設置しましょう。
他の要素が書かれているフリースペースにコードを書きこむ場合は、その要素とは絡まないよう末尾にでも書き加えてください。
フロートバナー設置位置のカスタマイズ
フローティングバナーを左側に設置した場合の例。
上記コピペ用のコードでは右側に表示させていますが、左側に表示させたい場合は right:0; を left:0; に書き替えてください。
また、 top: 200px; で画面上端から200pxの場所に置いています。
画面下端を基準に設置したい場合はbottom: ○○px;と書き替えましょう。
冒頭と例とご紹介したタグでは画面の右端にくっついたタブみたいなイメージで設置しました。
が、浮いているボタンのようなイメージで画面右端から離して設置したい場合は right:0; を right:30px; といった具合で右から離すを距離を指定しましょう。
右端から離し、下から置いた時の例。
ボタン風にする時は、見やすいよう画面の下の方に設置するのがオススメです。
リンクを開く際の新規タブ指定のカスタマイズ
このフロートバナー自体はクーポン取得ページやキャンペーンページなどへの誘導を想定し、クリックした場合新しいタブで開くように設定してあります。
もし新規タブでなくそのまま画面遷移してほしい場合は、 target="_blank" の部分を消してください。
トリプル領域のHTMLページへの設置まとめ
- 商品ページのスマートフォン用フリースペースにコードをコピペすればフロートバナーが表示される。
必要なCSSは全てまとめてインラインっで書きこんであるので、上記コードをコピペして入れるだけでページに表示されます。
HTMLページのbodyタグ内に入れても機能するのでトリプル上のページにも仕込むことが可能です。
が、レスポンシブ対応している場合はスマホで表示させると結構デカいバナーがずっとついてくることになってしまうので注意。
CSSのメディアクエリなどで画面横幅が767px以下の場合は表示されないようにしておくことをオススメします。
そして、スマホ版を別途組み込んだ方が良いでしょう。
なお、今回やったのはPC版のみ。スマホ版の商品ページなどには別途コードを組み込む必要があります。
スマホ版については別途解説してありますので、下記関連記事よりどうぞ。