---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/elements/divider'
title: 'Dividerエレメントの追加 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:18:44+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ページを明確なセクションに分ける、すっきりした水平線を設置できます。視覚的な区切りが必要なとき、テキスト、画像、その他のエレメントの間に使います。

  ディバイダーの追加
  ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T14:18:44+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: Dividerエレメントの追加
      description: |-
        ページを明確なセクションに分ける、すっきりした水平線を設置できます。視覚的な区切りが必要なとき、テキスト、画像、その他のエレメントの間に使います。

        ディバイダーの追加
        ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:18:44+0000'
      dateModified: '2026-10-24T14:18:44+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/elements/divider'
      articleSection: データとモーション
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/elements/divider'
      description: |-
        ページを明確なセクションに分ける、すっきりした水平線を設置できます。視覚的な区切りが必要なとき、テキスト、画像、その他のエレメントの間に使います。

        ディバイダーの追加
        ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: ホーム
            item: 'https://dxpr.com/ja'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ja
---
[ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[コンテンツを追加](/ja/hc/documentation/learn-dxpr-builder/elements) /[データとモーション](/ja/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Dividerエレメントの追加.

 DXPR Builderを学ぶページを作るコンテンツを追加データとモーション

   ## このガイドの内容

 関連ガイド

- [Styleパネルでのエレメントの見た目の変更](/ja/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

ページを明確なセクションに分ける、すっきりした水平線を設置できます。視覚的な区切りが必要なとき、テキスト、画像、その他のエレメントの間に使います。

## ディバイダーの追加

ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は[最初のページ](/hc/documentation/learn-dxpr-builder/getting-started/first-page)をご覧ください。

1. カラムにカーソルを合わせ、コントロールバーの**+**をクリックします。空のページでは**Add Elements**をクリックします。**Content**タブを開き、**Divider**をクリックします。ダイアログなしでカラムの一番上に追加されます。移動するには、コントロールバーのハンドルでドラッグします。
2. 線は細いため、線自体にカーソルを合わせてコントロールバーを表示します。**More**をクリックし、**Settings**を選んで**Color**を決めます。
3. 太さ設定は**Thickness**で**Custom thickness**を選びます。
4. 線の太さは**Thickness**スライダーで設定します。ここでは6 pxにします。
5. 長さ設定は**Length**で**Custom width**を選びます。
6. 線の長さは**Width**スライダーで設定します。ここでは300 pxにします。
7. 配置は**Align**を**Center**にします。
8. ダイアログの**Save**をクリックします。次に、コンテンツエリア上部のツールバーにある**Save**をクリックして、ページを保存します。

  ## 表示内容

選んだ色・太さ・長さの水平線がカラムを横切ります。動画では太さ6 px、長さ300 pxの中央寄せです。ページを保存して公開すると、訪問者に表示されます。

## ディバイダーの設定

エレメントにカーソルを合わせ、コントロールバーの**More > Settings**を開きます。設定項目は次のとおりです。

- **Color:** 線の色。空にするとテーマの色になります。
- **Thickness:** Theme defaultまたはCustom thickness。Customを選ぶと、0から20 pxの**Thickness**スライダーが付きます。
- **Length:** Theme defaultまたはCustom width。幅いっぱいの線には**Length**をTheme defaultのままにします。Customを選ぶと、0から500 pxの**Width**スライダーが付きます。
- **Align:** Left、Center、Right。Custom widthでのみ表示されます。

## 表示されない場合

- **ContentタブにDividerがない。** ユーザープロファイルで非表示になっています。管理者に依頼して、**Separator**に**Elements**の[User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)でチェックを付けてもらいます。
- **再読み込み後に消えている。** ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにある**Save**をクリックします。
- **ディバイダーがコンテンツより上にある。** 新しいエレメントはカラムの一番上に追加されます。線にカーソルを合わせてハンドルでドラッグするか、**More > Move Down**を開きます。
- **線が見えない。** **Color**がページの背景色と同じです。エレメントにカーソルを合わせ、コントロールバーの**More > Settings**を開き、コントラストのある色を選びます。
- **線が幅いっぱいにならない。** **Length**がCustom widthになっています。エレメントにカーソルを合わせ、コントロールバーの**More > Settings**を開き、**Length**をTheme defaultに戻します。

## 次のステップ

[Styleタブ](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)でディバイダーまわりの間隔を変更します。