バナーの追加・並び替え方法を教えてください

無料バナーや好きな画像を選んで追加でき、並び順も自由に変えられます

並び替えはどのページでも共通(ドラッグ&ドロップ)です。
バナーの追加方法は、編集するページの種類によって少し異なります。

ご質問例

  • グローバルデザインや特集ページにバナーを追加したい
  • 新店舗トップやRMS連動特集ページにバナーを設置したい
  • 無料提供バナーや自店舗で用意した画像を表示したい
  • 追加したバナーの並び順を変えたい

ご回答

バナーの追加方法は編集するページの種類で少し異なりますが、並び順の変更はどのページでも共通です。

バナーを追加する

GOLD製特集ページ・グローバルデザイン・共通コンテンツ・カテゴリ上部の場合

これらのページでは「各種バナー」パーツを使ってバナーを追加します。

 

1. 対象ページの編集画面を開く

バナーを追加したい機能の編集画面を開きます(例:「特集ページを作る」「グローバルデザインを作る」など)

 

2. 左メニュー「パーツを追加する」をクリック

 

3. 追加するエリアを選ぶ

ヘッダー・ナビ・メイン・フッターなどから、バナーを表示したいエリアを選びます。

 

4. 「各種バナー」をクリック

 

5. 表示タイプを選ぶ

固定タイプ(画像を横一列に並べる)とスライドタイプ(複数画像をスライド表示する)から選べます。
ここでは例として「固定×2」を選びます。

固定とスライドの使い分け
固定タイプは画像をまとめてきれいに見せたいときに、スライドタイプはすっきり見せたいときに向いています。
スライドタイプは、横一列に並べる枚数より多くの画像を選ぶと動きが出ます。

 

6. 「画像を追加する」をクリック

設定画面を下にスクロールすると「画像を追加する」ボタンがあります。

 

7. 「画像選択」をクリック

 

8. 画像の取得元を選ぶ

ビーノ提供のバナーを使う場合は「無料提供バナーを選択」を選びます。
PC内の画像や楽天Cabinet内の画像も選べます。

 

9. フォルダと画像を選ぶ

フォルダ(例:「楽天キャンペーン用」)を選ぶと、右側に保存画像が一覧表示されます。
表示したい画像をクリックして選びます。

 

10. リンク先URLを設定する(任意)

「リンク先URL」欄にリンクさせたいページのURLを貼り付けます。
未設定の場合はただの画像として表示されます。

 

「▼」をクリックすると、特集ページ機能で作成した「GOLD製特集ページ」や「RMS連動特集ページ」をリンク先URLとして選ぶことができます!

 

「表示期間」「文字表示」も設定できます
リンク先URL設定欄の下にある「表示期間」で掲載期間を、「文字表示」で画像下のテキストを設定できます。
表示期間の詳細は「バナーに表示期間を設定することはできますか?」をご覧ください。

 

11. 2枚以上のバナーを追加する場合

再度「画像を追加する」から、手順6〜10を繰り返します。

 

12. 最後に「決定」をクリック

新店舗トップ・RMS連動特集ページの場合

これらのページでは、用途に応じて複数のバナーの種類から選んで追加します。

1. 編集画面で「パーツを追加」をクリック

 

2. 追加したいバナーの種類を選ぶ

「小バナー・大バナー・共通バナー(小)・共通バナー(大)・ターゲティング画像」などから、表示したい場所や用途に合わせて選びます。

表示イメージや用途は、各バナータイプにマウスを当てるとヒントが表示されますので、ぜひ参考にしてみてください!

 

3. 表示タイプを選ぶ

 

4. PC用の表示サイズを選ぶ

PCで表示するときに、バナーを横幅いっぱい(100%)に表示するか、少し小さめ(70%)に表示するかなど選ぶことができます。

 

5. 画像を追加する

画像を追加する」をクリックし、「画像を選択」から画像を選びます。

 

6. リンク先URLを設定する(任意)

必要に応じてリンク先URLを設定します。
未設定の場合はただの画像として表示されます。

 

「▼」をクリックすると、特集ページ機能で作成した「GOLD製特集ページ」や「RMS連動特集ページ」をリンク先URLとして選ぶことができます!

 

7. 「決定」をクリックする

バナーの並び順を変える(全機能共通)

追加したバナー画像は、どのページ・どの種類でもドラッグ&ドロップで並び順を変えられます。

⚠ 設定後は「反映する」を忘れずに

設定が完了したら、最後に必ず「反映する」をクリックして、公開中のページへ変更内容を反映させましょう。

 

関連キーワード
イベントバナー お買い物マラソンバナー スーパーセールバナー スーパーSALEバナー バナー表示方法 バナー設定方法

関連しそうなFAQなど

ビーノ独自のおすすめ機能 次の開発予定 動画で学ぶビーノ 導入事例