> ## Documentation Index
> Fetch the complete documentation index at: https://help.mosh.jp/llms.txt
> Use this file to discover all available pages before exploring further.

# セクションの設定編集・削除

> ページビルダーで追加したセクションの背景色・余白・スタイルの編集方法と、移動・複製・削除の方法を説明します。

追加したセクションは自由に編集、削除が可能です。ご自身のサービスの世界観に合わせてご活用ください。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/29896847-a9ac-4636-b25c-07640aac9b64/image/w=1920,quality=90,fit=scale-down" />
</Frame>

<Info>
  **アクセス経路**

  [ログイン](https://mosh.jp/authentication/login?openExternalBrowser=1) → 左メニュー → ページビルダー → 新規ページを作成/既存ページの編集
</Info>

## セクションの編集設定

追加したセクションを編集することができます。画像やテキストを編集して、サービスを訴求するページを作成しましょう。

編集したいセクションや、セクション内の項目を選択すると、左側に設定画面が表示されます。

### 背景色

背景色では、背景色の設定や背景に画像を設定することが可能です。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/b522a59a-98d1-4ea3-9909-a7111cfa33b7/image/w=1920,quality=90,fit=scale-down" />
</Frame>

### 余白

セクションの周囲の余白を設定できます。前・後・左・右の4箇所を個別に設定するか、前後・左右で同様の設定にするか右側の□で切り替えできます。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/65cb6937-5e2a-40c4-9644-545a809a2f07/image/w=1920,quality=90,fit=scale-down" />
</Frame>

### スタイル

以下の設定ができます。

* セクションの角丸
* セクションの幅
* レイアウト方向（β版）
* セクションの枠線

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/886cf0da-5eb1-4ced-9918-afe73ca8b155/image/w=1920,quality=90,fit=scale-down" />
</Frame>

**詳細設定**では、セクションの表示期間の設定ができます。タブをオンにして「**ウェビナー連動**」「**表示期間**」「**経過時間**」を選択します。

「表示期間」「経過時間」を選択した場合：

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/b6e1230c-92a7-489d-9243-bfdae49b3e77/image/w=1920,quality=90,fit=scale-down" />
</Frame>

「**表示開始日時**」と「**表示終了日時**」に任意の日時を入力します。どちらか一方だけの設定も可能です。

* **表示開始日時のみ**設定：指定日時以降にセクションが表示されます
* **表示終了日時のみ**設定：指定日時を過ぎるとセクションが非表示になります
* **両方**設定：指定期間中のみセクションが表示されます

「ウェビナー連動」を選択した場合：

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/d23cba7d-91f0-4470-af9e-53e3a3d7b251/image/w=1920,quality=90,fit=scale-down" />
</Frame>

セクション単位で動画再生から「X時間X分X秒後に表示」という時間条件を設定できます。サービスにオートウェビナーが紐づいたLPで、経過時間に応じてセクションを自動表示できます。

## セクションの移動

セクションを選択した状態でドラッグ＆ドロップで前後に移動することができます。また、セクション内に別のセクションを入れて、複数のセクションを1つの塊にすることもできます。

セクションを選択した状態で上部の↑↓矢印を押すと、上下のセクションと順番を入れ替えることも可能です。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/06a0b665-5b62-497e-8f59-4ef9e6e82f5b/image/w=1920,quality=90,fit=scale-down" />
</Frame>

## セクションの複製

セクション上部の「複製」を押すと、セクションの内容をコピーして複製することができます。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/c24854ad-8576-40a2-827a-78f2d8ccfa30/image/w=1920,quality=90,fit=scale-down" />
</Frame>

## セクションのリンクのコピー

セクション上部のリンクマークから、該当セクションのリンクをコピーできます。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/407b5658-e8c0-42c1-83c1-c35b39fdc14b/image/w=1920,quality=90,fit=scale-down" />
</Frame>

## セクションの削除

セクション上部のゴミ箱ボタンを押すと、該当セクションが削除されます。誤って削除した場合は、右上の「←Undo（元に戻す）」を押すと復元できます。

<Frame>
  <img src="https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/cbed4c37-95c8-490c-8f5f-106149bffce7/image/w=1920,quality=90,fit=scale-down" />
</Frame>

<Warning>
  削除後にページの編集画面から離れると、Undoができなくなります。削除されたセクションの復元はできませんのでご注意ください。
</Warning>
