---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/development/theming'
title: 'DXPR Builderのテーマ設定 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:16:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  ビルダーのコンテンツはページ内の通常のHTMLのため、テーマは他のコンテンツと同様にスタイルを当てます。このページでは、テーマが引き継ぐ内容、エディターへのクラスの追加方法、上書きの置き場所を説明します。
  テーマがスタイルする範囲
  公開したビルダーコンテンツは、テーマのスタイルを引き継ぎます。
tags:
  - 'Build on it'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T19:16:17+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: |-
        ビルダーのコンテンツはページ内の通常のHTMLのため、テーマは他のコンテンツと同様にスタイルを当てます。このページでは、テーマが引き継ぐ内容、エディターへのクラスの追加方法、上書きの置き場所を説明します。
        テーマがスタイルする範囲
        公開したビルダーコンテンツは、テーマのスタイルを引き継ぎます。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:16:17+0000'
      dateModified: '2026-10-24T19:16:17+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/development/theming'
      articleSection: 開発ガイド
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/development/theming'
      description: |-
        ビルダーのコンテンツはページ内の通常のHTMLのため、テーマは他のコンテンツと同様にスタイルを当てます。このページでは、テーマが引き継ぐ内容、エディターへのクラスの追加方法、上書きの置き場所を説明します。
        テーマがスタイルする範囲
        公開したビルダーコンテンツは、テーマのスタイルを引き継ぎます。
      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/extend) /[開発ガイド](/ja/hc/documentation/learn-dxpr-builder/extend/build-on-it) # DXPR Builderのテーマ設定.

 DXPR Builderを学ぶ拡張開発ガイド

   ## このガイドの内容

ビルダーのコンテンツはページ内の通常のHTMLのため、テーマは他のコンテンツと同様にスタイルを当てます。このページでは、テーマが引き継ぐ内容、エディターへのクラスの追加方法、上書きの置き場所を説明します。

## テーマがスタイルする範囲

公開したビルダーコンテンツは、テーマのスタイルを引き継ぎます。

- 見出し、本文テキスト、リンクはテーマのスタイルを使います。
- レイアウトはBootstrap 5のローとカラムを使うため、Bootstrap 5テーマとは揃います。他のテーマでは、**DXPR Studio > DXPR Builder > General Settings**で**Sideload Bootstrap files**を**Bootstrap 5**に設定します。
- 各エレメントはタイプごとに1つのクラス（`az-card`や`az-button`など）を持ち、ほとんどは`az-element`も持ちます。[CSSアーキテクチャ](/ja/hc/documentation/learn-dxpr-builder/development/css-architecture)をご覧ください。

## エディターへのクラスの追加

### テーマのinfo.ymlで追加する

テーマの`.info.yml`で`dxpr_builder_classes`の下にクラスを列挙します。テーマ有効中は、各エレメントの**HTML classes**一覧に、テーマ名のオプショングループで表示されます。

```yaml
# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

```

### モジュールから追加する

実装するのは`hook_dxpr_builder_classes_alter()`です。名前は`_alter`で終わる必要があります。[Hooks APIリファレンス](/ja/hc/documentation/learn-dxpr-builder/development/hooks-api)をご覧ください。

```php
/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

```

## ボタンのスタイル

ButtonエレメントにはBootstrapスタイルのPrimary、Secondary、Success、Info、Warning、Danger、Link、Light、Darkがあります。一覧はエディターで固定で、buttons foldersフックでは変わりません。ボタンにブランドらしい見た目を付けるには、テーマでBootstrapの`btn-*`クラスにスタイルするか、**HTML classes**で独自クラスを追加します。

## CSSの上書き

ビルダーの出力はテーマのCSSで上書きします。

```css
/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

```

編集者がStyleタブで行う設定は、インラインスタイルとして書き込まれます。インラインスタイルは`!important`なしのテーマルールより優先されるため、テーマCSSは初期値に使い、エレメントごとの上書きは編集者に任せます。

## エディターとテーマ

エディターは、フィールドが表示されるページ上で動作します。管理テーマではなくフロントエンドテーマ内です。コントロールバー、メニュー、ダイアログは`dxpr-builder-ui`クラスを持ち、独自のスタイルシート`dxpr_builder_backend.css`を読み込みます。`button`や`.modal`のような広いセレクターを狙うテーマルールは届く場合があるため、ルールはコンテンツ領域に限定します。