---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-theme/creating-a-sub-theme/creating-a-dxpr-theme-subtheme'
title: 'DXPR Themeのサブテーマの作成 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:35:57+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  DXPR Themeは色、フォント、ヘッダー、余白、レイアウトを設定ダッシュボードから変更できるため、ほとんどのサイトではCSSを1行も書く必要がありません。サブテーマはそれ以外の用途、すなわち独自のスタイルシート、テンプレートのオーバーライド、追加のライブラリ、コードと一緒に提供するカラーパレットのためのものです。サブテーマはDXPR Themeのすべてのスタイルシートとテンプレートを継承し、独自の設定を持ち、DXPR Themeの更新にも影響されません。
          このガイドはDrupal 10.3およびDrupal 11上のDXPR Theme 8.2を対象とします。使用するスターターキットはテーマ内のdxpr_theme/dxpr_theme_STARTERKITに同梱されています。DXPR Themeは独自のスターターキットとコマンドを備えているため、Drupalコアのgenerate-themeコマンドは使いません。
tags:
  - 'Een subthema maken'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T08:35:57+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      '@type': FAQPage
      mainEntity:
        -
          '@type': Question
          name: 色やフォントの変更にサブテーマは必要ですか。
          acceptedAnswer:
            '@type': Answer
            text: '<p>いいえ。色、フォント、ヘッダー、フッター、余白、レイアウトはDXPR Themeダッシュボードの設定です。サブテーマが必要なのは、独自のCSS、テンプレートのオーバーライド、追加のライブラリ、コードと一緒に提供するパレットの場合のみです。</p>'
        -
          '@type': Question
          name: AIエージェントはサブテーマとその設定をセットアップできますか。
          acceptedAnswer:
            '@type': Answer
            text: '<p>はい。drush dxt:setup-aiの実行後、エージェントはテーマ設定を理解して概要から変更し、drush dxt:subtheme:createでサブテーマ自体を作成できます。結果はサイト上で確認します。</p>'
        -
          '@type': Question
          name: 'DXPR Themeサブテーマが対応するDrupalバージョンは。'
          acceptedAnswer:
            '@type': Answer
            text: '<p>DXPR Theme 8.2と同じで、Drupal 10.3以降とDrupal 11です。スターターキットのinfoファイルは古いバージョンも宣言していますが、DXPR Theme 8.2はDrupal 10.3が必要なモジュールに依存します。</p>'
        -
          '@type': Question
          name: 'DXPR Themeの更新でサブテーマは上書きされますか。'
          acceptedAnswer:
            '@type': Answer
            text: '<p>いいえ。Composerが置き換えるのはthemes/contrib/dxpr_themeのみで、サブテーマはthemes/customにあります。更新後はサブテーマの設定フォームを1回保存し、新しい変数をスタイルシートに反映させます。</p>'
    -
      '@type': TechArticle
      headline: 'DXPR Themeのサブテーマの作成'
      description: |-
        DXPR Themeは色、フォント、ヘッダー、余白、レイアウトを設定ダッシュボードから変更できるため、ほとんどのサイトではCSSを1行も書く必要がありません。サブテーマはそれ以外の用途、すなわち独自のスタイルシート、テンプレートのオーバーライド、追加のライブラリ、コードと一緒に提供するカラーパレットのためのものです。サブテーマはDXPR Themeのすべてのスタイルシートとテンプレートを継承し、独自の設定を持ち、DXPR Themeの更新にも影響されません。
                このガイドはDrupal 10.3およびDrupal 11上のDXPR Theme 8.2を対象とします。使用するスターターキットはテーマ内のdxpr_theme/dxpr_theme_STARTERKITに同梱されています。DXPR Themeは独自のスターターキットとコマンドを備えているため、Drupalコアのgenerate-themeコマンドは使いません。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:35:57+0000'
      dateModified: '2026-10-24T08:35:57+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-theme/creating-a-sub-theme/creating-a-dxpr-theme-subtheme'
      articleSection: 'Een subthema maken'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-theme/creating-a-sub-theme/creating-a-dxpr-theme-subtheme'
      description: |-
        DXPR Themeは色、フォント、ヘッダー、余白、レイアウトを設定ダッシュボードから変更できるため、ほとんどのサイトではCSSを1行も書く必要がありません。サブテーマはそれ以外の用途、すなわち独自のスタイルシート、テンプレートのオーバーライド、追加のライブラリ、コードと一緒に提供するカラーパレットのためのものです。サブテーマはDXPR Themeのすべてのスタイルシートとテンプレートを継承し、独自の設定を持ち、DXPR Themeの更新にも影響されません。
                このガイドはDrupal 10.3およびDrupal 11上のDXPR Theme 8.2を対象とします。使用するスターターキットはテーマ内のdxpr_theme/dxpr_theme_STARTERKITに同梱されています。DXPR Themeは独自のスターターキットとコマンドを備えているため、Drupalコアのgenerate-themeコマンドは使いません。
      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 Theme](/hc/documentation/learn-dxpr-theme) /[Een subthema maken](/hc/documentation/learn-dxpr-theme/een-subthema-maken) # DXPR Themeのサブテーマの作成.

 Learn DXPR ThemeEen subthema maken

   ## In this guide

DXPR Themeは色、フォント、ヘッダー、余白、レイアウトを設定ダッシュボードから変更できるため、ほとんどのサイトではCSSを1行も書く必要がありません。サブテーマはそれ以外の用途、すなわち独自のスタイルシート、テンプレートのオーバーライド、追加のライブラリ、コードと一緒に提供するカラーパレットのためのものです。サブテーマはDXPR Themeのすべてのスタイルシートとテンプレートを継承し、独自の設定を持ち、DXPR Themeの更新にも影響されません。

このガイドはDrupal 10.3およびDrupal 11上のDXPR Theme 8.2を対象とします。使用するスターターキットはテーマ内の`dxpr_theme/dxpr_theme_STARTERKIT`に同梱されています。DXPR Themeは独自のスターターキットとコマンドを備えているため、Drupalコアの`generate-theme`コマンドは使いません。

## 始める前に

DXPR Themeを追加し、そのヘルパーモジュールを有効化します(Drupalがテーマをインストールする前に必要なモジュールです)。

```
composer require drupal/dxpr_theme
drush en dxpr_theme_helper
```

## 1. スターターキットからサブテーマを生成する

最も速い方法は、DXPR Theme Helperが提供するDrushコマンドです。プロジェクトルートで実行すると、マシン名を検証し、スターターキットを`themes/custom`にコピーしてすべてリネームします。

```
drush dxt:subtheme:create northwind_theme --theme-name="Northwind Theme"
```

引数なしでは、コマンドは2つの名前を尋ねます。Drushを使わない場合は、テーマに同梱のスクリプトを使います。`web/themes/contrib/dxpr_theme`に移動し、`chmod +x scripts/*`でスクリプトを実行可能にし(初回のみ)、`./scripts/create_subtheme.sh`を実行して、求められたら人間可読名とマシン名を入力します。このスクリプトはそのフォルダーからのみ実行できます。

どちらの方法でも`web/themes/custom/northwind_theme`ができあがります。スターターキットのファイルと設定はマシン名にリネームされ、infoファイルとスキーマファイル内の`THEMETITLE`プレースホルダーは置換されます。

## 2. 有効化して設定を1回保存する

1. サブテーマを使うには、*外観*を開き、*インストールしてデフォルトに設定*を選択します。
2. サブテーマの*設定*を開き、何も変更せずに*設定を保存*を押します。

最初の保存で、新しいテーマの設定スタイルシートが生成されます。サブテーマは、DXPR Themeで設定した内容ではなく、スターターキットのデフォルト設定から始まります。DXPR Themeの設定を引き継ぐには、DXPR Themeからエクスポートしてサブテーマにインポートします。

```
drush dxt:config:export --theme=dxpr_theme --file=theme.yml
drush dxt:config:import theme.yml --theme=northwind_theme
```

これ以降、ダッシュボードはDXPR Themeの場合とまったく同じように動作します。色、タイポグラフィ、ヘッダー、フッター、余白はすべてサブテーマのものになります。

サブテーマのリージョンはベーステーマと同一に保ちます。スターターキットはDXPR Themeと同じ14個のリージョンを宣言しており、コンテンツに対するDXPR Theme Helperの*リージョンを非表示*オプションは名前でそれらを参照します。

## 3. スターターキットの内容

- `northwind_theme.info.yml`: `base theme: dxpr_theme`、リージョン、そしてスタイルシートを読み込む1つのライブラリ`global-styling`です。コメントアウトされた`libraries-override`ブロックには、無効化する可能性が高いDXPR Themeライブラリが`dxpr_theme/bootstrap-5`から`dxpr_theme/helper-classes`まで列挙されています。
- `css/dxpr_theme_subtheme.css`: テーマ自体のスタイルシートの後にすべてのページで読み込まれます。CSSはここに記述します。
- `templates/`: README以外は空です。オーバーライドしたいテンプレートを`dxpr_theme/templates`からここにコピーします。
- `config/install`と`config/schema`: テーマ名にリネームされたデフォルト設定とそのスキーマです。
- `color-settings.json`: 独自の名前付きカラーパレットで、組み込みのものと並んでカラースキーム一覧に表示されます。
- `logo.svg`、`favicon.ico`、`screenshot.png`: 独自のものに置き換えます。

## 4. 設定に連動するCSSを書く

DXPR Themeは設定をCSS変数に書き出します。パレット用の`--dxt-color-*`、タイポグラフィ・余白・レイアウト用の`--dxt-setting-*`で、Bootstrapの`--bs-*`変数に対応付けられます。固定値の代わりにスタイルシートで変数を使うと、色やフォントが変更されてもCSSはダッシュボードに連動し続けます。

```
/* css/dxpr_theme_subtheme.css */
.card {
  border-radius: 1rem;
  border-color: color-mix(in srgb, var(--dxt-color-base) 20%, transparent);
}

.dxpr-theme-footer h2 {
  font-family: var(--dxt-setting-headings-font-face);
  color: var(--dxt-color-footertext);
}
```

ベースカラー、アクセントカラー、テキスト、見出し、リンク、カード、フッターにはすべて変数があります。全一覧はテーマのREADMEの*CSS Custom Properties (Variables) Reference*にあります。

## 5. テンプレートとライブラリをオーバーライドする

変更したいテンプレートを`themes/contrib/dxpr_theme/templates`からサブテーマの`templates`フォルダーにコピーし、ファイル名はそのままで編集して、キャッシュをクリアします。Drupalはサブテーマのコピーを優先します。

ベーステーマのスタイルシートやスクリプトを除外するには、infoファイル内の`libraries-override:`行を、削除したいライブラリの行と一緒にコメント解除します(すでに`false`に設定されています)。独自のものを追加するには、`northwind_theme.libraries.yml`でライブラリをさらに宣言し、スターターキットが`global-styling`で行っているようにinfoファイル内の`libraries`の下に列挙します。

## 6. DXPR Builderで編集者にクラスを提供する

サブテーマのinfoファイル内で`dxpr_builder_classes:`の下に宣言したクラスはDXPR Builderのクラスピッカーに表示されるため、編集者はクラス名を入力せずにダークバンドやガラスパネルを適用できます。対象のDXPR Builderエレメントにスコープして、`dxpr_theme_subtheme.css`でクラスにスタイルを付けます。

## 7. テーマにカラーパレットを同梱する

サブテーマのルートにある`color-settings.json`に名前付きスキームを追加します。各スキームは、ダッシュボードと同じキー(`base`、`basetext`、`link`、`accent1`、`accent2`、`text`、`headings`、`card`、`footer`、`header`、`pagetitle`など)を設定します。スキームは設定フォームのカラースキーム一覧に表示されるため、サイトはワンクリックでブランドパレットに切り替えられます。

## 8. 後でDXPR Themeを更新する

1. Composerでベーステーマを更新します(`composer update drupal/dxpr_theme --with-dependencies`)。
2. データベース更新を実行し、キャッシュをクリアします。
3. サブテーマの設定フォームを開いてもう一度保存し、新しい変数で設定スタイルシートを再生成します。
4. テンプレートやリージョンの変更についてリリースノートを読み、オーバーライドしたテンプレートを新しいバージョンと比較します。

## テーマ設定はAIエージェントに任せる

DXPR Theme 8.1.1以降にはエージェントスキルが同梱されています。プロジェクトで`drush dxt:setup-ai`を実行すると、コーディングエージェント(Claude Code、Codex、Gemini CLI、Cursor)はテーマ設定とその意味を学習します。ブランドを説明すると、エージェントはダッシュボードと同じ設定項目を通じて色、タイポグラフィ、ヘッダーレイアウト、余白を設定するため、サイト上で結果を確認できます。`drush dxt:subtheme:create`でサブテーマの作成も可能です。

DXPR Builderスキルはページに対して同じことを行い、Drush WebmasterはコンテンツとViewsに対して行います。[エージェントスキルの動作を見る](/drupal-agent-skills)。

## DXPR Themeサブテーマについての質問

### 色やフォントの変更にサブテーマは必要ですか。

いいえ。色、フォント、ヘッダー、フッター、余白、レイアウトはDXPR Themeダッシュボードの設定です。サブテーマが必要なのは、独自のCSS、テンプレートのオーバーライド、追加のライブラリ、コードと一緒に提供するパレットの場合のみです。

### AIエージェントはサブテーマとその設定をセットアップできますか。

はい。`drush dxt:setup-ai`の実行後、エージェントはテーマ設定を理解して概要から変更し、`drush dxt:subtheme:create`でサブテーマ自体を作成できます。結果はサイト上で確認します。

### DXPR Themeサブテーマが対応するDrupalバージョンは。

DXPR Theme 8.2と同じで、Drupal 10.3以降とDrupal 11です。スターターキットのinfoファイルは古いバージョンも宣言していますが、DXPR Theme 8.2はDrupal 10.3が必要なモジュールに依存します。

### DXPR Themeの更新でサブテーマは上書きされますか。

いいえ。Composerが置き換えるのは`themes/contrib/dxpr_theme`のみで、サブテーマは`themes/custom`にあります。更新後はサブテーマの設定フォームを1回保存し、新しい変数をスタイルシートに反映させます。