縦帯設置と縦帯にリンクを設定する方法こんにちは。体がどんどんたるんできて、いい加減何とかしなければ!と思いつつも毎日3食とおやつを欠かさず美味しく食べている鷲尾です。実家暮らしだと、何時に帰っても美味しいご飯が待っているのでついついしっかり食べてしまいます。今回は今や楽天市場の店舗ページには無くてはならない告知ツール!縦帯バナーを設置する方法をご紹介します。おすすめ商品への誘導やイベントの紹介など、サイトに縦帯を設定するだけで華やかになり、訪問されたお客さんの興味を惹くきっかけになるかもしれません。そんな縦帯が簡単に設置出来るので、是非参考にしてください。画像を準備する最初に、縦帯となる画像を準備してください。どのくらいのサイズがいいということはありませんが、当社のお客様で言うとだいたい横80ピクセル~150ピクセル・縦500ピクセル~800ピクセルといったところが多いです。伝えたい情報が簡潔に詰め込まれていて、トップページや商品ページの内容に被らない横幅と、スクロールしなくても見える縦幅がよいかなと思います。スタイルの記述のみで縦帯を設置するここからが縦帯設置のソースの準備ですが、まずは簡単なスタイルの追記だけで店舗ページの左右のどちらか、または両側へ縦帯を設置する方法をご紹介します。下記のスタイルを書き込むだけです。ウィンドウの左端から表示するよう指示しています。書き込む場所は、<head>~</head>内です。楽天RMSで言うと、ヘッダー・フッター・レフトナビのヘッダーコンテンツに追記してください。右側のみへ設置する方法ですが、左側への設置ソースを少し書き換えるだけでOKです。ウィンドウ右端から表示するよう変更しただけです。縦帯を設置したい!という時は、以下のスタイルを使用してください。*/}</style>以上、左右への縦帯の設置はこれだけの簡単なソースで実装できるので、是非試してみてください。サイトの背景にすでに画像を指定している場合、表示崩れてしまうため注意してください。次に、リンクを設定出来る縦帯の設置方法をご紹介します。縦帯で目立たせたい商品の商品ページやカテゴリーページなどへのリンクを設定出来ると、お客さんに買ってもらいたい商品への誘導にもなり便利ですよね。スタイルの記述まずは、<head>~</head>内に記述するスタイルです。auto;}</style>さらに、<body>~>/body>内に下記を記述します。楽天で言うとヘッダー・フッター・レフトナビのヘッダーコンテンツ内です。--></ul>私は、ページをスクロールさせても縦帯が固定されて付いてくるように設定しています。これだとページ毎に高さを指定しなければならないので、私は固定表示の方が気に入っています。楽天の店舗では楽天市場のヘッダーメニューが表示されて縦帯と被ってしまうので、上からの距離を56px程に設定すると被らず綺麗に表示出来ます。リンク付きの縦帯も意外と簡単に設置出来るので是非活用してみてください!鷲尾オールラウンダーなスーパーマンを目指してます。社長と目でバトル(会話)するのが日課です。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。対応しないといけないのは、わかるけど・・。楽天市場の上位検索にヒットさせる商品名のつけ方ECサイトのランディングページを制作します。SEO対策のサービスの終了につ...ランディングページの成功の秘密はページ構成だけではないランディングページの必勝パターンECサイトのランディングページを制作します。運営ノウハウ運営ノウハウ一覧へ商品ページ制作を成功させるためにするべき事2018.11.08楽天市場の商品画像登録ガイドラインの遵守必須化に伴う改定につ...2018.07.25オリジナル商品は縦長のランディングページでないと売れません。SEO対策のサービスの終了について2018.04.18ランディングページの成功の秘密はページ構成だけではない2018.02.13ランディングページの必勝パターン2018.02.06ECサイトのランディングページを制作します。2018.02.03運営代行サービスのご提供内容が変わりました。