--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/custom-templates' title: 'DXPR Builderテンプレートをオーバーライドする | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:26:58+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builderはエレメントをブラウザーでレンダリングします。エディターにコンパイルされたテンプレートからです。テーマにコピーできるエレメントテンプレートはありません。モジュールは独自ページ用に4つのTwigテンプレートを提供し、それらは通常のDrupalの方法でオーバーライドします。このページではそれらを一覧し、エレメントマークアップがオーバーライドできない理由を説明し、代わりにモジュールがサポートするルートを示します。 オーバーライドできるTwigテンプレート テンプレートはモジュールのtemplates/フォルダーにあります。 tags: - 'Match your brand' 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: 'DXPR Builderテンプレートをオーバーライドする' description: |- DXPR Builderはエレメントをブラウザーでレンダリングします。エディターにコンパイルされたテンプレートからです。テーマにコピーできるエレメントテンプレートはありません。モジュールは独自ページ用に4つのTwigテンプレートを提供し、それらは通常のDrupalの方法でオーバーライドします。このページではそれらを一覧し、エレメントマークアップがオーバーライドできない理由を説明し、代わりにモジュールがサポートするルートを示します。 オーバーライドできるTwigテンプレート テンプレートはモジュールのtemplates/フォルダーにあります。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:26:58+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/customization/custom-templates' articleSection: ブランドに合わせる - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/custom-templates' description: |- DXPR Builderはエレメントをブラウザーでレンダリングします。エディターにコンパイルされたテンプレートからです。テーマにコピーできるエレメントテンプレートはありません。モジュールは独自ページ用に4つのTwigテンプレートを提供し、それらは通常のDrupalの方法でオーバーライドします。このページではそれらを一覧し、エレメントマークアップがオーバーライドできない理由を説明し、代わりにモジュールがサポートするルートを示します。 オーバーライドできるTwigテンプレート テンプレートはモジュールのtemplates/フォルダーにあります。 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/manage) /[ブランドに合わせる](/ja/hc/documentation/learn-dxpr-builder/customization) # DXPR Builderテンプレートをオーバーライドする. DXPR Builderを学ぶサイト管理ブランドに合わせる ## このガイドの内容 関連ガイド - [テンプレートからページをはじめる](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates) - [Theming](/hc/documentation/learn-dxpr-builder/development/theming) DXPR Builderはエレメントをブラウザーでレンダリングします。エディターにコンパイルされたテンプレートからです。テーマにコピーできるエレメントテンプレートはありません。モジュールは独自ページ用に4つのTwigテンプレートを提供し、それらは通常のDrupalの方法でオーバーライドします。このページではそれらを一覧し、エレメントマークアップがオーバーライドできない理由を説明し、代わりにモジュールがサポートするルートを示します。 ## オーバーライドできるTwigテンプレート テンプレートはモジュールの`templates/`フォルダーにあります。 | テンプレート | 用途 | 変数 | |---|---|---| | `dxpr-license-info.html.twig` | 使用状況サマリーの対象は**User Licenses**と**Content items**ページ、および**License info**ブロックです | `used_count`、`total_count`、`limit`、`block_label`、`total_label`、`used_label`、`more_info_link` | | `page--dxpr-builder--media-library.html.twig` | Media Libraryダイアログのページラッパー：`/dxpr_builder/media-library` | 標準の`page`変数 | | `html--dxpr-builder--media-library.html.twig` | 同じダイアログの``ラッパー | 標準の`html`変数 | | `page--people-list.html.twig` | ライセンスサマリー付きの**People**ページ(`/admin/people`)の出発点 | 標準の`page`変数と`user_license` | 最初の3つはそのまま動作します。Drupalはモジュールから`page--people-list.html.twig`を読み込みません。DXPR BuilderはPeopleページに`page__people_list`サジェストと`user_license`変数を追加するのみです。そこにサマリーを表示するには、ファイルを管理テーマにコピーします。 テンプレートのオーバーライド手順は次のとおりです。 1. レンダリングするテーマの`templates/`フォルダーに`modules/contrib/dxpr_builder/templates/`からファイルをコピーします。管理ページとMedia Libraryダイアログは管理テーマを使います。**License info**ブロックは配置したリージョンのテーマを使います。 2. コピーを編集します。 3. キャッシュは`drush cr`でクリアします。 ## エレメントマークアップがオーバーライドできない理由 各エレメントのマークアップは`dxpr_builder/templates/`内のtwig.jsテンプレートです(例: `elements/alert/alert.twig.html`)。ビルドはこれらのテンプレートを`dxpr_builder/dxpr_templates.js`にコンパイルします。エディターはブラウザーでレンダリングし、結果のHTMLをフィールドに保存します。帰結は2つあります。 - 変更したテンプレートにはエディターの再ビルドが必要です。DXPR CDNからエディターを読み込むサイトでは、変更したテンプレートはまったく使えません。 - 保存済みページは保存時のHTMLを保持します。新しいテンプレートは変更後にレンダリングされるエレメントにのみ影響します。 そのため、モジュールはエレメントテンプレートのサイトごとのオーバーライドを提供しません。下のルートのいずれかを使います。 ## サポートされるカスタマイズルート | 目的 | ルート | |---|---| | 編集者向けの再利用可能なレイアウト | [ページテンプレート](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)と[ユーザーテンプレート](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)(いずれもビルダーで選択) | | エレメントの見た目の変更 | [カスタムCSS](/ja/hc/documentation/learn-dxpr-builder/customization/custom-css)を使います。テーマ内で独自のクラスまたは`az-*`クラスを対象にします | | 編集者向けの名前付きスタイル | [ユーティリティクラス](/ja/hc/documentation/learn-dxpr-builder/customization/utility-classes)を使います。テーマの`.info.yml`から取得し、テキストエディター用の[カスタムスタイル](/ja/hc/documentation/learn-dxpr-builder/customization/text-editor#set-up)も使います | | 追加のアイコンセット | [アイコンライブラリー](/ja/hc/documentation/learn-dxpr-builder/customization/icon-libraries) | | 新しいエレメントタイプ | [カスタムエレメントの作成](/ja/hc/documentation/learn-dxpr-builder/development/custom-elements) | ## 次のステップ - [ページテンプレート](/ja/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)：編集者が使うテンプレートシステム。 - [DXPR Builderのテーマ設定](/hc/documentation/learn-dxpr-builder/development/theming)：ビルダーのCSSとテーマの関係。