---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
title: 'ポジションドレイヤーコンテナーを追加する | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:48:12+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  エレメントの重なりや正確な位置決めが必要で、ローとカラムではできない
  場合はポジションドレイヤーを使います。エレメントを好きな場所へドラッグ
  するキャンバスが得られます (例: 写真の上の見出し)。例では白いオープン
  デーの見出しを画像に重ねます。通常の横並びコンテンツは
  ローとカラムの方が
  携帯電話でも整えやすいです。
tags:
  - Lay-out
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: ポジションドレイヤーコンテナーを追加する
      description: |-
        エレメントの重なりや正確な位置決めが必要で、ローとカラムではできない
        場合はポジションドレイヤーを使います。エレメントを好きな場所へドラッグ
        するキャンバスが得られます (例: 写真の上の見出し)。例では白いオープン
        デーの見出しを画像に重ねます。通常の横並びコンテンツは
        ローとカラムの方が
        携帯電話でも整えやすいです。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:48:12+0000'
      dateModified: '2026-10-24T09:09:48+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/layout/positioned-layers'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
      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
---
[Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # ポジションドレイヤーコンテナーを追加する.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [セクションを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/sections)
- [ネストレイアウトを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/nesting)
- [スクロール・ホバー・クリックでエレメントに動きを付ける](/ja/hc/documentation/learn-dxpr-builder/design/animation-tab)

エレメントの重なりや正確な位置決めが必要で、ローとカラムではできない 場合はポジションドレイヤーを使います。エレメントを好きな場所へドラッグ するキャンバスが得られます (例: 写真の上の見出し)。例では白いオープン デーの見出しを画像に重ねます。通常の横並びコンテンツは [ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)の方が 携帯電話でも整えやすいです。

  ## ポジションドレイヤーコンテナーを追加する

1. カラムにホバーしてコントロールバーの**+**をクリックするか、空カラム 中央の**+**をクリックしてエレメントピッカーを開きます。
2. 開いて**Layout**タブで**Positioned layers**を クリックします。
3. 先に設定が開きます。最も高いレイヤーが収まるよう**Height**を設定し、 **Save**をクリックします。空のキャンバスが現れます。
4. キャンバスにホバーしてコントロールバーの**+**をクリックし、 エレメント (**Text**や**Image**など) を追加します。 追加したエレメントはそれぞれ配置可能なレイヤーになります。

## 表示結果

キャンバスは設定した高さを保ち、各レイヤーは置いた場所に他の上下に重なって 座ります。訪問者にはエディター通りの構成が見えます。位置はキャンバスに対する 割合で保存されるので、キャンバスが狭まってもレイヤーは位置を保ちます。 テキストは**Responsive**をオンにしない限りサイズを保ちます。

## ポジションドレイヤーの設定

開くのは**More** > **Settings**からで、**Positioned layers**コントロールバー内です。

| 設定 | 内容 | 既定値 |
|---|---|---|
| **Width** | キャンバスの幅です。100%や600pxなど | 100% |
| **Height** | キャンバスの高さ (ピクセル) | 500 |
| **Responsive** | キャンバスの高さとテキストをキャンバス幅に連動させ、小画面でも構成の比率を保ちます | Off |

## レイヤーの配置

- **Select**: レイヤーをクリックします。角と辺にハンドルが出ます。
- **Move**: コントロールバーの名前 (**Text**や **Image**など) をつかんでレイヤーをドラッグします。レイヤーは キャンバス内に留まります。
- **Resize**: 選択中レイヤーのハンドルをドラッグします。
- **Add at a spot**: キャンバスの空き部分をダブルクリックします。 エレメントピッカーが開き、新しいエレメントがクリック位置に付きます。

各レイヤーの**More**メニューには4つの追加項目があります。 **100% width**と**100% height**はレイヤーをキャンバス いっぱいに伸ばします。**Bring forward**と**Send backward**は 他のレイヤーの上下へ移動します。

## 表示されない場合

- **ドラッグしてもレイヤーが動きません。** レイヤーはコントロール バーの名前付きハンドルでしか動きません。レイヤーにホバーしてそのハンドルを ドラッグします。
- **レイヤーが別のレイヤーの後ろに隠れます。** 積み重ねの下の方にいます。 レイヤーの**More**メニューを開いて**Bring forward**を 選びます。
- **携帯電話でレイヤーが重なったりはみ出したりします。** **Responsive**がオフなので、キャンバスの高さとテキストがサイズを 保っています。**Positioned layers**設定で**Responsive**を オンにします。
- **キャンバス内ではPositioned layersがピッカーにありません。**キャンバスはキャンバスを持てません。新しい**Positioned layers**エレメントは代わりにカラムに追加します。
- **Positioned layersがピッカーのどこにもありません。**DXPR Builderユーザープロファイルに含まれていません。管理者が**Layers**を プロファイルの**Elements**下でチェックします (`/admin/dxpr_studio/dxpr_builder/profile`)。

## 次はこちら

- [セクション](/ja/hc/documentation/learn-dxpr-builder/layout/sections): キャンバス周りの領域に背景色や画像を付けます。
- [ネスト](/ja/hc/documentation/learn-dxpr-builder/layout/nesting): レイヤーとロー・カラムを組み合わせて複雑なレイアウトにします。
- [アニメーションタブ](/hc/documentation/learn-dxpr-builder/design/animation-tab): 各レイヤーに独自の登場効果を付けます。