--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/editing/element-picker' title: 'エレメントの検索と追加 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:20:17+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 追加するエレメントはすべてエレメントピッカーから選びます。5つのタブを持つダイアログです。レイアウト、コンテンツ、Drupalブロック、Drupalビュー、保存したテンプレート。各タブの中身と、エレメントを素早く見つける方法を説明します。例では各タブを巡り、Contentタブからボタンを追加しています。 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: 追加するエレメントはすべてエレメントピッカーから選びます。5つのタブを持つダイアログです。レイアウト、コンテンツ、Drupalブロック、Drupalビュー、保存したテンプレート。各タブの中身と、エレメントを素早く見つける方法を説明します。例では各タブを巡り、Contentタブからボタンを追加しています。 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:17+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/element-picker' articleSection: ページを編集 - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/editing/element-picker' description: 追加するエレメントはすべてエレメントピッカーから選びます。5つのタブを持つダイアログです。レイアウト、コンテンツ、Drupalブロック、Drupalビュー、保存したテンプレート。各タブの中身と、エレメントを素早く見つける方法を説明します。例では各タブを巡り、Contentタブからボタンを追加しています。 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/drag-and-drop) - [ページ上でのテキスト編集](/ja/hc/documentation/learn-dxpr-builder/editing/inline-text-editing) 追加するエレメントはすべてエレメントピッカーから選びます。5つのタブを持つダイアログです。レイアウト、コンテンツ、Drupalブロック、Drupalビュー、保存したテンプレート。各タブの中身と、エレメントを素早く見つける方法を説明します。例では各タブを巡り、**Content**タブからボタンを追加しています。 ## ピッカーを開く 1. 空のコンテンツエリアで**Add Elements**をクリックし、**Layout**タブから**Section**を選びます。 2. セクションの**+**をクリックします。ピッカーがもう一度開きます。ここで選んだ内容は、このセクション内の先頭に入ります。 ## 5つのタブを見る 1. 最初に**Layout**をクリックします。Section、Row、Tabs、Collapse panel、Carousel、Positioned layersがあります。 2. 次に**Content**をクリックします。**Search**ボックス付きのテキスト、メディア、インタラクティブの各エレメントがあります。 3. 次に**Drupal Blocks**をクリックします。**Filter by category**と検索ボックス付きのサイトのブロックがあります。 4. 次に**Drupal Views**をクリックします。有効なビューのすべてのディスプレイがあり、**Filter by tag**と検索ボックスが付いています。 5. 最後に**Saved templates**をクリックします。自分専用と共用のテンプレートがあり、**Filter by user**、**Filter by type**、検索ボックスが付いています。 検索ボックスがあるのは**Layout**以外の各タブです。**Search**ボックスに名前の一部を入力してそのタブを絞り込みます。 ## エレメントの追加 1. タブは**Content**に戻り、**Button**を選びます。設定ダイアログがすぐに開きます。 2. まず**Title**を入力し、**Link**を設定して**Save**をクリックします。**Type**はPrimaryのままです。 3. ツールバーの**Save**をクリックします。 ## コンテンツエレメント | エレメント | 用途 | |---|---| | Alert | Bootstrapのアラートメッセージ | | Block quote | スタイル付きの引用 | | Button | リンク付きのスタイル付きボタン | | Card | ヘッダー、タイトル、コンテンツ付きのカード | | Circle counter | 円形のプログレスアニメーション | | Countdown timer | 日時へのカウントダウン | | Number counter | カウントアップする数値 | | HTML | 生のHTMLコード | | Icon | アイコンライブラリーのアイコン | | Image | リンクとaltテキスト付きの単独画像 | | Image carousel | 回転する画像ギャラリー | | Jumbotron | タイトルとリード文付きの大きなバナー | | Link | スタイル付きのリンク | | Map | Googleマップの埋め込み | | Marquee | スクロールする画像の帯 | | Panel | タイトル付きの枠付きパネル | | Progress bar | アニメーションのプログレス表示 | | Divider | 水平線 | | Text | インライン編集付きのリッチテキスト | | Local video | 自前の動画ファイル | | Video | 埋め込み動画（YouTube、Vimeo） | | Social links | ソーシャルメディアのアイコンリンク | ## 表示内容 ほとんどのエレメントは、選ぶとすぐに設定ダイアログが開きます。Card、Divider、Panelは直接ページに配置されます。Section、Row、Tabs、Collapse panelも同様です。CarouselとPositioned layersは先に設定を開きます。新しいエレメントは、クリックしたセクションやカラムの先頭に入ります。下の方がよければドラッグで下げます。 ## エレメントが表示されない場合 - **タブにエレメントがない。** ユーザープロファイルで非表示になっています。管理者が**Elements**の**DXPR Studio** > **DXPR Builder** > **User Profiles**（`/admin/dxpr_studio/dxpr_builder/profile`）でチェックします。プロファイルでは一部のエレメント名が異なります。**Separator**がDivider、**Counter**がNumber counter、**Countdown**がCountdown timer、**Blockquote**がBlock quoteです。 - **新しいブロックやビューディスプレイがない。** プロファイルの**Check/Uncheck all Blocks**や**Check/Uncheck all Views**のチェックがない限り、ユーザープロファイルに新しいブロックやディスプレイは自動で追加されません。管理者が同じプロファイルの**Blocks**や**Views**でチェックします。 - **Drupal Blocksタブがない。** ビルダーがブロックを一覧するのは、Drupalの**Block Content**モジュールがオンのときのみです。**Extend**（`/admin/modules`）で有効化します。 - **Saved templatesが空になっている。** まだ何も保存されていません。エレメントの**More**メニューで**Save as template**を選びます。[ユーザーテンプレート](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)をご覧ください。 ## 次のステップ - [エレメントをドラッグで配置する](/ja/hc/documentation/learn-dxpr-builder/editing/drag-and-drop)：新しいエレメントをあるべき場所に動かします。 - [ページ上でのテキスト編集](/ja/hc/documentation/learn-dxpr-builder/editing/inline-text-editing)：ダイアログなしでテキストを入力・書式設定します。 - [エレメント](/hc/documentation/learn-dxpr-builder/elements)：各エレメントの内容と設定方法を確認できます。