---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/editing/selecting-elements'
title: '編集したい箇所の選択 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:20:20+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: ページの各部には独自のコントロールバーがあります。エレメント、カラム、ロー、セクションです。カーソルを合わせれば各バーにたどり着けますし、Layersパネルから任意のレベルを選ぶこともできます。動画ではテキストとボタンを持つ2カラムのローを作り、各レベルを巡っています。
tags:
  - 'Edit a page'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 編集したい箇所の選択
      description: ページの各部には独自のコントロールバーがあります。エレメント、カラム、ロー、セクションです。カーソルを合わせれば各バーにたどり着けますし、Layersパネルから任意のレベルを選ぶこともできます。動画ではテキストとボタンを持つ2カラムのローを作り、各レベルを巡っています。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:20:20+0000'
      dateModified: '2026-10-24T17:19:22+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/editing/selecting-elements'
      articleSection: ページを編集
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/editing/selecting-elements'
      description: ページの各部には独自のコントロールバーがあります。エレメント、カラム、ロー、セクションです。カーソルを合わせれば各バーにたどり着けますし、Layersパネルから任意のレベルを選ぶこともできます。動画ではテキストとボタンを持つ2カラムのローを作り、各レベルを巡っています。
      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/editing) # 編集したい箇所の選択.

 DXPR Builderを学ぶページを作るページを編集

   ## このガイドの内容

 関連ガイド

- [ページ上でのテキスト編集](/ja/hc/documentation/learn-dxpr-builder/editing/inline-text-editing)
- [エレメントのMoreメニューの使い方](/ja/hc/documentation/learn-dxpr-builder/editing/context-menus)
- [キーボードショートカット](/ja/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)

ページの各部には独自のコントロールバーがあります。エレメント、カラム、ロー、セクションです。カーソルを合わせれば各バーにたどり着けますし、Layersパネルから任意のレベルを選ぶこともできます。動画ではテキストとボタンを持つ2カラムのローを作り、各レベルを巡っています。

  ## 2カラムのローの作成

1. コンテンツエリアの**+**をクリックし、**Layout**タブから**Section**を選びます。
2. セクションの**+**をクリックして**Row**を選びます。均等な2カラム付きで追加されます。
3. 左カラムの**+**をクリックし、**Content**タブから**Text**を選びます。
4. 見出しと1行のテキストを入力し、**Save**をクリックします。
5. 右カラムの**+**をクリックして**Button**を選びます。
6. タイトル欄の**Title**を入力し、**Link**を設定して**Save**をクリックします。

## ホバーでの各レベルへの到達

1. ボタンにカーソルを合わせます。エレメント名と**More**ボタンを持つコントロールバーが表示されます。
2. ポインターをカラムの端に動かします。バーが**Column**に変わります。
3. ローにカーソルを合わせます。バーが**Row**になり、カラムレイアウトアイコンが付きます。
4. セクションにカーソルを合わせます。最も外側のバーが**Section**になります。

表示されるバーは、ポインターの下にある最も内側の箇所のものです。コントロールバーをクリックすると、その箇所が選択されて枠線が付きます。**Ctrl+C**などのキーボードショートカットは選択した箇所に作用し、何も選択していない場合はポインターの下の箇所に作用します。選択の解除は、コンテンツ外の空いた場所をクリックします。

## Layersパネルからのレベル選択

1. DXPRツールバーの**More**を開き、**Layers panel**を選びます。
2. ツリーのレイヤーをクリックします。ページがその箇所までスクロールし、ハイライトされます。
3. レイヤーの3点ドットをクリックすると、コントロールバーと同じメニューが開きます。
4. パネルを閉じて**Save**をクリックします。

**Ctrl+Shift+J**キー（Macでは**Cmd+Shift+J**キー）でも、パネルを開閉できます。

## 表示内容

ページは入れ子のレベルで作られ、順序は常に**Section**、**Row**、**Column**、エレメントです。各レベルのバーには、そのレベル向けの操作を持つ**More**ボタンが付いています。Layersパネルでは同じレベルがツリー表示のため、ホバーしにくい箇所も1クリックで選べます。

## コントロールバーの表示方式

| 選択肢 | 表示内容 |
|---|---|
| **On each element** | 各エレメントに独自のバーが表示されます。入れ子のエレメントには編集中の余白が付きます。 |
| **One row** | ポイントしたエレメントの上に1列のバーが表示されます。**Section**、**Row**、**Column**、**Button**の順です。編集中もページは公開時のレイアウトを保ちます。 |

表示方式**One row**では、バーに乗るとページの対応箇所が光ります。狭い画面では外側のバーが列から落ちます。コンテナの端にカーソルを合わせてそのレベルにたどり着きます。

1. DXPRツールバーの**More**を開いて**Editor settings**を選ぶか、**Ctrl+;**キー（Macでは**Cmd+;**キー）を押します。
2. 設定は**Control bars**で**On each element**か**One row**を選びます。
3. 最後に**Save**をクリックします。ページはすぐに変わります。

**Ctrl+Shift+B**キー（Macでは**Cmd+Shift+B**キー）でダイアログなしに切り替えます。選択はユーザーアカウントに保存されるため、他のブラウザーにも付いてきます。アカウントの編集ページにある**DXPR Builder**でも変えられます。**Default**タグ付きの選択肢はサイトの設定です。それを選ぶと、管理者が後から初期値を変えてもサイトに追随します。

## コントロールバーが表示されない場合

- **コントロールバーが出ない。** ページがPreviewです。表示メニュー（DXPRツールバーの**目アイコン**）を開いて**Edit**を選びます。
- **バーが違う箇所のものになっている。** ポインターが子エレメントの上にあります。コンテナ端のパディングに移動するか、**Layers panel**で箇所を選びます。
- **テキストのクリックでテキストエディターが開く。** 選択ではなくインライン編集です。テキストの外側をクリックしてから、テキストのコントロールバーをクリックします。

## 次のステップ

- [ページ上でのテキスト編集](/ja/hc/documentation/learn-dxpr-builder/editing/inline-text-editing)：ページ上で直接語句を変えます。
- [エレメントのMoreメニュー](/ja/hc/documentation/learn-dxpr-builder/editing/context-menus)：**More**メニューのすべての操作を確認できます。
- [キーボードショートカット](/ja/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)：選択した箇所をマウスなしで操作できます。