Skip to content

バナー (Banner)

バナーパーツは、画像を表示するためのパーツです。複数の画像を並べて表示したり(グリッド)、自動で切り替わるスライドショー(スライダー)として表示したりできます。各画像にリンクを設定することも可能です。

設定タブ

バナーパーツを選択すると、設定エリアに以下のタブが表示されます。

  • コンテンツ: 表示する画像、リンク、代替テキストなどを設定します。
  • スタイル: 表示形式(グリッド/スライダー)、列数、間隔、背景、余白などを設定します。
  • メニュー: モバイルメニューや追従メニューに表示するかどうかを設定します。

コンテンツ設定

「コンテンツ」タブでは、表示するバナー画像とその情報を管理します。

バナー コンテンツタブ (コンテンツタブ全体のスクリーンショット)

  1. バナーの追加: 「+ バナーを追加」ボタンをクリックすると、新しいバナー項目がリストに追加されます。
  2. 画像の選択: 追加されたバナー項目の画像エリアをクリックして、画像を選択(アップロードまたは既存メディアから選択)します。 画像選択 (画像選択UIのスクリーンショット)
  3. リンクの設定 (任意): バナー画像にリンクを設定したい場合は、「リンク URL」フィールドに対応するURLを入力します。
  4. 代替テキスト (Alt Text): 画像が表示されない場合やスクリーンリーダーのために、画像の内容を説明するテキストを入力します。SEOの観点からも重要です。
  5. タイトル・説明 (任意): (※もしあれば) 画像上に表示するタイトルや短い説明文を入力します。
  6. 並び替え: リスト内のバナー項目は、ドラッグ&ドロップで表示順序を変更できます。
  7. 削除: 不要になったバナー項目は、右端の「×」ボタンなどで削除します。

スタイル設定

「スタイル」タブでは、バナー全体の見た目やレイアウトを調整します。

バナー スタイルタブ (スタイルタブ全体のスクリーンショット)

  • 表示形式 (Layout): バナーの表示方法を選択します。
    • グリッド (Grid): 複数の画像を格子状に並べて表示します。
    • スライダー (Slider): 画像が自動または手動で切り替わるスライドショー形式で表示します。
  • 列数 (Grid Columns) / 表示枚数 (Slides Per View):
    • グリッドの場合: 1行あたりに表示するバナー数を設定します (PC/SPそれぞれ設定可能か要確認)。
    • スライダーの場合: 一度に表示されるスライド(バナー)の数を設定します。
  • 間隔 (Spacing): グリッド内のバナー間、またはスライダーの各スライド間のスペースを調整します。
  • スライダー設定 (Slider Settings): (※スライダー選択時のみ表示)
    • 自動再生 (Autoplay): スライドを自動で切り替えるかどうか、切り替え間隔(ミリ秒単位)を設定します。
    • ナビゲーション (Navigation): スライドを前後に移動するための矢印ボタンを表示するかどうかを設定します。
    • ページネーション (Pagination): 現在のスライド位置を示すインジケーター(点など)を表示するかどうかを設定します。
    • ループ (Loop): 最後のスライドの次に最初のスライドを表示するかどうかを設定します。
  • 画像アスペクト比: バナー画像の縦横比を固定するかどうかを設定します。
  • 背景: パーツ全体の背景色や背景画像を設定します。
  • パディング・マージン: パーツの内側・外側の余白を調整します。
  • 枠線: パーツに枠線を追加します。
  • … その他、スタイルオプションがあれば記載。

メニュー設定

「メニュー」タブでは、このバナーパーツをモバイルメニューや追従メニューに含めるかどうかを設定します。

設定方法の詳細は「6. メニュー設定(モバイル・追従)」ガイドを参照してください。


これでバナーパーツの設定は完了です。