> For the complete documentation index, see [llms.txt](https://support.megadoga.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.megadoga.com/frontsaito/meinno.md).

# メイン画面の構成編集

## \[**メイン画面設定**]**について**

Frontサイトのメイン画面に表示させる、以下項目の構成を編集できます。

* ヘッダーバナーの編集
* スライドバナーの編集
* セクションの編集、追加作成

<figure><img src="/files/T5pj5Uvm6f2TvD3f8497" alt=""><figcaption><p>Frontサイト表示サンプル</p></figcaption></figure>

### **メイン画面設定の確認方法**

Frontサイトのメイン画面の構成は、\[メイン画面設定]画面にて編集することができます。

各項目の説明と、Frontサイトの表示サンプルは以下のスクリーンキャプチャを参考の上、ご確認ください。

{% tabs %}
{% tab title="各設定項目の説明" %}

<figure><img src="/files/qVZr2ur8PR5245jaFoGN" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure>

1. **セクションメニュー**

   Frontサイトのメイン画面に表示するバナーやセクションの構成・編集が行えます。

   * ヘッダーバナー：ヘッダー部分に表示するテキストバナー

     　　　　　　　　設定方法については[\[→ヘッダーバナーの設定\]](#heddbanno)項目を確認してください
   * スライドバナー：複数画像をスライドショーで自動で表示する動的なバナー\
     　　　　　　　　設定方法については[\[→スライドバナーの設定\]](#suraidobanno)項目を確認してください
   * セクション　　：指定した条件と一致する商品（動画）をセクション化して表示します。\
     　　　　　　　　デフォルトで登録されているセクション項目については\
     　　　　　　　　[\[→セクションの表示形式変更\]](#sekushonno)の項目を確認してください。
2. **セクションの表示順の変更**\
   左側に\[ドロワーメニュー（≡）]がついているセクションは、\
   ドラッグ＆ドロップでFrontサイトに表示するセクションの順番変更ができます。\
   デフォルトで登録されている項目は以下の通りです。
3. **セクションの表示形式・並び替え変更**\
   各セクションの動画一覧の表示形式を、横並び型またはグリッド方式から選択できます。
4. **表示動画数の変更**

   各セクションの動画一覧で表示する動画本数を、8個、16個、24個から選択できます。
5. **編集ボタン**\
   バナーの内容変更を行えます。\
   クリックすると編集画面が表示されます。
6. **表示有無の指定**\
   メイン画面に各項目別にセクション化した内容の表示有無を指定します。\
   キャプチャのようにボタンが右になっている状態が表示ONを意味します。
7. **削除ボタン**\
   作成したバナーを削除することができます。
8. **セクションの追加登録**\
   スライドバナー、セクションを追加登録できます。\
   作成したセクションに、動画が紐づいていない場合はメイン画面に表示されません。\
   追加方法は[\[→セクションの追加・編集\]](#sekushonno-1)項目を確認してください。
   {% endtab %}
   {% endtabs %}

### **ヘッダーバナーの設定**

ヘッダーセクションの右側にある\[編集ボタン]をクリックすると、\[ヘッダーバナー修正]ウィンドウが開きます。各項目の説明と、表示サンプルは以下のスクリーンキャプチャを参考の上、ご確認ください。

<figure><img src="/files/uuZKxQ4RqwpZgq6gnYrm" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure>

1. **内容：**&#x30D0;ナーに表示させる内容を登録できます。
2. **背景色：**&#x8868;示させるバナーの背景色を指定できます。
3. **文字色**：表示させるバナーの文字色を指定できます。\
   背景色、文字色の変更方法は、以下のスクリーンキャプチャを参考の上確認してください。\
   カラー色相スライダーをマウスで調整または、カラーコードを入力すると、カラー変更画面が表示されます。カラーコードの形式変更は、カラーコード入力欄の右側\[矢印]をクリックしてください。

   <figure><img src="/files/NHW5wVR1mrPUGI7gCjIN" alt="" width="563"><figcaption></figcaption></figure>
4. **テキスト並べ替え：**&#x30C6;キストバナーの文字位置を、左/センター/右の3パターンから調整できます。
5. **バナー連結：**&#x30E6;ーザーがヘッダーをクリックしたときに、移動させるページを指定できます。
   * 連結しない　：ユーザーがヘッダーをクリックしてもページ移動しません。
   * カテゴリ　　：バナーに連結させるカテゴリページを選択できます。\
     　　　　　　　カテゴリページの設定・編集は[\[→カテゴリ設定\]](/shang-pin-guan-li/editor.md)のページを確認してください。
   * プラン　　　：バナーに連結させるプランページを選択できます。\
     　　　　　　　プランページの設定・編集は[\[→商品登録\]](/shang-pin-guan-li/risuto.md)のページを確認してください。
   * URLアドレス：バナーに連結させるURLページを手動で指定できます。
6. **表示期間**：ヘッダーを表示する期間を自由に設定できます。\
   　　　　　期間を設定しなければ、ずっと表示され続けます。\
   　　　　　特定のキャンペーン期間やイベントに合わせて、ヘッダーを効果的に活用できます。

### **スライドバナーの設定**

複数の画像を自動で表示する動的なバナーを設定できます。以下2つのスライドバナーがあります。

* メインスライドバナー：デフォルトで登録されているスライドバナー。\
  　　　　　　　　　　　Frontサイトのトップに表示されます。
* スタイドバナー　　　：追加できるスライドバナー。表示位置を指定できます。

編集ボタンをクリックして、設定変更を行うことができます。\
以下のスクリーンキャプチャを参考の上確認してください。

<figure><img src="/files/PMrgv6y8jZew4wB3F9x8" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure>

1. **バナー登録：**\[＋バナー登録]ボタンをクリックして、スライドバナーを追加します。
2. **バナー画像：**&#x30D0;ナー表示させる画像ファイルを設定します。\
   　　　　　　\[ファイルを選択]をクリックして、画像ファイルを選択してください。
3. **バナー連結 / バナーリンク先：**&#x30E6;ーザーがスライドバナーをクリックした際に移動させるページを指定します。
   * 連結しない　：ユーザーがスライドバナーをクリックしてもページ移動しません。\ <mark style="color:red;">※メインスライドバナーのみ</mark>
   * カテゴリ　　：バナーに連結させるカテゴリページを選択できます。\
     　　　　　　　カテゴリページの設定・編集は[\[→カテゴリ設定\]](/shang-pin-guan-li/editor.md)のページを確認してください。
   * プラン　　　：バナーに連結させるプランページを選択できます。\
     　　　　　　　プランページの設定・編集は[\[→商品登録\]](/shang-pin-guan-li/risuto.md)のページを確認してください。
   * URLアドレス：バナーに連結させるURLページを手動で指定できます。
4. 表示期間：スライドバナーを表示する期間を自由に設定できます。<mark style="color:red;">※メインスライドバナーのみ</mark>\
   　　　　　期間を設定しない場合は、Front画面に表示され続けます。\
   　　　　　特定のキャンペーン期間やイベントに合わせて、ヘッダーを効果的に活用できます。
5. 登録ボタン：バナー編集が完了したら、必ず\[登録]ボタンで編集内容を保存してください。

### **セクションの表示形式変更**

指定した条件と一致する商品（動画）をセクション化して表示します。

表示/非表示設定は、各セクションの右側にあるトグルボタンでON/OFFを切り替えてください。

以下、デフォルトで登録されているセクションについて説明します。

* 新しい商品　　　　　：登録日が最も新しい商品（動画）が一覧で表示されます。
* 視聴中の商品　　　　：視聴中の動画が一覧で表示されます。
* 有料商品　　　　　　：有料商品が新着順に一覧で表示されます。
* 無料商品　　　　　　：無料商品が新着順に一覧で表示されます。
* 販売TOP10　　　　　：最も多く購入された商品（動画）上位10件が表示されます。
* いいね！TOP10　　　：最も多くいいね！がついている商品（動画）上位10件が表示されます。
* カートTOP10　　　　：最も多くカートに入れられた商品（動画）上位10件が表示されます。

### **セクションの追加・編集**

Frontサイトに表示するスライドバナー、セクションは追加することができます。

追加方法については、以下のスクリーンキャプチャを参考の上確認してください。

{% tabs %}
{% tab title="1. セクションの追加" %}

1. \[メイン画面設定]の画面右上にある\[＋追加]ボタンをクリックしてください。
2. \[セクション登録]ウィンドウが表示されるので、セクション形式を選択してください。
3. 追加したセクションは、\[メイン画面設定]のセクション最下部に表示されます。

追加したスライドバナーの設定方法は[\[→スライドバナーの設定\]](#suraidobanno)項目を確認してください。

追加したセクションの設定方法は、\[2. セクションの編集]タブを確認してください。

<figure><img src="/files/n5RZDYduviFQVSKRHynX" alt="" width="563"><figcaption><p>画像クリックで拡大</p></figcaption></figure>

<figure><img src="/files/3xW8jROPaFi5amMW3886" alt="" width="563"><figcaption><p>画像クリックで拡大</p></figcaption></figure>
{% endtab %}

{% tab title="2. セクションの編集" %}
編集ボタンをクリックして、設定変更を行うことができます。\
以下のスクリーンキャプチャを参考の上確認してください。

<mark style="background-color:red;">**【スクリーンキャプチャを追加】**</mark>

1. Frontサイトに表示するセクションタイトルを入力してください。
2. セクションに関する説明文を入力してください。入力内容はFrontサイトに表示されます。
3. セクションと紐づける商品（動画）を選択します。
   * カテゴリ
   * プラン
   * 商品と紐づける
     {% endtab %}
     {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://support.megadoga.com/frontsaito/meinno.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.