--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/custom-css' title: 'テーマのCSSでビルダーコンテンツをスタイルする | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:26:51+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builderコンテンツはテーマがレンダリングするページの一部であり、テーマのCSSがエディターと公開ページの両方にスタイルします。多くのエレメントやページで繰り返す見た目や、エレメント設定では実現できない見た目に使います。最終的にテーマ内のスタイルシートと、編集者が適用できるクラスができます。1つのエレメントには設定ダイアログを使います。 始める前に テーマのファイルへのアクセスとデプロイ方法が必要です。 カスタムテーマまたはサブテーマを使います。コントリビュートテーマのアップデートはそのファイルを置換し、CSSも一緒に置換されます。 セットアップ テーマのフォルダーにcss/custom.cssを作成します(例: themes/custom/mytheme/css/custom.css)。 tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:26:51+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: テーマのCSSでビルダーコンテンツをスタイルする description: |- DXPR Builderコンテンツはテーマがレンダリングするページの一部であり、テーマのCSSがエディターと公開ページの両方にスタイルします。多くのエレメントやページで繰り返す見た目や、エレメント設定では実現できない見た目に使います。最終的にテーマ内のスタイルシートと、編集者が適用できるクラスができます。1つのエレメントには設定ダイアログを使います。 始める前に テーマのファイルへのアクセスとデプロイ方法が必要です。 カスタムテーマまたはサブテーマを使います。コントリビュートテーマのアップデートはそのファイルを置換し、CSSも一緒に置換されます。 セットアップ テーマのフォルダーにcss/custom.cssを作成します(例: themes/custom/mytheme/css/custom.css)。 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:51+0000' dateModified: '2026-10-24T11:26:51+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-css' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/custom-css' description: |- DXPR Builderコンテンツはテーマがレンダリングするページの一部であり、テーマのCSSがエディターと公開ページの両方にスタイルします。多くのエレメントやページで繰り返す見た目や、エレメント設定では実現できない見た目に使います。最終的にテーマ内のスタイルシートと、編集者が適用できるクラスができます。1つのエレメントには設定ダイアログを使います。 始める前に テーマのファイルへのアクセスとデプロイ方法が必要です。 カスタムテーマまたはサブテーマを使います。コントリビュートテーマのアップデートはそのファイルを置換し、CSSも一緒に置換されます。 セットアップ テーマのフォルダーにcss/custom.cssを作成します(例: themes/custom/mytheme/css/custom.css)。 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 Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # テーマのCSSでビルダーコンテンツをスタイルする. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [ユーティリティクラス](/ja/hc/documentation/learn-dxpr-builder/customization/utility-classes) - [ビルダーページでブランドフォントを使う](/ja/hc/documentation/learn-dxpr-builder/customization/custom-fonts) - [テキストエディターにブランドスタイルとボタンを追加する](/ja/hc/documentation/learn-dxpr-builder/customization/text-editor) DXPR Builderコンテンツはテーマがレンダリングするページの一部であり、テーマのCSSがエディターと公開ページの両方にスタイルします。多くのエレメントやページで繰り返す見た目や、エレメント設定では実現できない見た目に使います。最終的にテーマ内のスタイルシートと、編集者が適用できるクラスができます。1つのエレメントには[設定ダイアログ](/hc/documentation/learn-dxpr-builder/element-settings)を使います。 ## 始める前に - テーマのファイルへのアクセスとデプロイ方法が必要です。 - カスタムテーマまたはサブテーマを使います。コントリビュートテーマのアップデートはそのファイルを置換し、CSSも一緒に置換されます。 ## セットアップ 1. テーマのフォルダーに`css/custom.css`を作成します(例: `themes/custom/mytheme/css/custom.css`)。 2. ファイルを`mytheme.libraries.yml`に宣言します。 ```yaml global-styling: css: theme: css/custom.css: {} ``` 3. ライブラリーを`mytheme.info.yml`からすべてのページに読み込みます。 ```yaml libraries: - mytheme/global-styling ``` 4. 独自のクラス名のルールを書きます。 ```css .brand-hero { background: linear-gradient(135deg, #1a4d8f, #0f2a4d); color: #ffffff; } ``` 5. キャッシュは**Configuration** > **Development** > **Performance** (`/admin/config/development/performance`)で**Clear all caches**を使ってクリアするか、`drush cr`を実行します。 6. ビルダーで**Section**の設定を開き、`brand-hero`を**HTML classes**配下に追加します。独自のクラスの入力方法は[HTML IDとクラス](/hc/documentation/learn-dxpr-builder/element-settings/custom-css)をご覧ください。 テーマが一覧に掲載すれば、編集者は**HTML classes**一覧からクラスを選ぶこともできます。詳しくは[ユーティリティクラス](/hc/documentation/learn-dxpr-builder/customization/utility-classes)をご覧ください。 ## 表示内容 クラスを追加するとすぐにセクションにグラデーションと白テキストが適用されます。エディターはテーマがレンダリングするページ上で動作するためです。ページ保存後、訪問者にも同じ表示になります。クラスはページのHTMLに保存されるため、後からルールを変更するとそのクラスのすべてのエレメントが更新されます。 ## DXPR Builderが書き込むクラス 独自のクラスが最も安全な対象です。保存されるHTMLには次のクラスもあります。 | セレクター | 一致対象 | |---|---| | `.az-container` | 各DXPR Builderフィールドのラッパー。編集中は`.dxpr-editor`も付きます | | `.az-section` | すべての**Section**。内側には`.container`または`.container-fluid`(**Full width**オン時) | | `.row` | すべての**Row**。DXPR BuilderはBootstrap独自のクラスを使い、追加対象外：`az-row` | | `.col-*` | すべてのカラム(例: `.col-12.col-md-6`)。該当なし：`az-column` | | `.az-text`, `.az-image`, `.az-button`, `.az-card` | 1つのエレメントタイプ。`az-`とエレメント名の組み合わせです(例: Divider用の`.az-separator`) | | `.az-element` | ほとんどのコンテンツエレメント。Image、Icon、Buttonは除きます | 書き込むのは**Style**パネルで、インライン`style`属性です。同じプロパティのクラスルールより優先されます。Bootstrapユーティリティクラスは`!important`付きで、両方より優先されます。 ## スタイルが表示されない場合 - **クラスはエレメントにあるのに何も変わりません。**ライブラリーが読み込まれていないか、キャッシュが古いCSSを保持しています。`mytheme.info.yml`にライブラリーが記載されているか確認し、`/admin/config/development/performance`でキャッシュをクリアします。 - **一部のプロパティのみ適用されます。**同じプロパティの**Style**パネルの値が優先されます。エレメントの**Style**パネルでその値をクリアするか、見た目全体をクラスに移します。 - **エディターでは表示されるが訪問者には表示されません。** **Apply text format filters to frontend content**がオンで、フィールドのテキストフォーマットが`class`属性を除去しています。**Text Filters**配下(`/admin/dxpr_studio/dxpr_builder/settings`)でオフにするか、フォーマットでクラスを許可します。 - **ルールが一致しないのは`.az-row`や`.az-column`への指定です。**DXPR Builderはこれらのクラスを書き込みません。`.row`、`.col-*`クラス、独自のクラスを対象にします。 ## 次のステップ - [ユーティリティクラス](/hc/documentation/learn-dxpr-builder/customization/utility-classes)：**HTML classes**配下にクラスを一覧して編集者が選べるようにする。 - [カスタムフォント](/hc/documentation/learn-dxpr-builder/customization/custom-fonts)：同じ方法でブランドフォントを読み込む。 - [テキストエディター](/hc/documentation/learn-dxpr-builder/customization/text-editor)：**Styles**一覧で段落・単語用のクラスを提供する。