---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/text-editor'
title: 'テキストエディターにブランドスタイルとボタンを追加する | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:27:10+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '編集者がDXPR Builderでテキスト内をクリックするとツールバーが表示されます。Styles一覧にはブランドのスタイル(リード段落やハイライト付きフレーズなど)を登録できます。各ロールが使うボタンも選べます。編集者はサイズや色を手作業で設定する代わりに、ワンクリックでブランドの見た目を適用します。フォントはテーマから取得します。詳しくはカスタムフォントをご覧ください。'
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:27:10+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: テキストエディターにブランドスタイルとボタンを追加する
      description: '編集者がDXPR Builderでテキスト内をクリックするとツールバーが表示されます。Styles一覧にはブランドのスタイル(リード段落やハイライト付きフレーズなど)を登録できます。各ロールが使うボタンも選べます。編集者はサイズや色を手作業で設定する代わりに、ワンクリックでブランドの見た目を適用します。フォントはテーマから取得します。詳しくはカスタムフォントをご覧ください。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T11:27:10+0000'
      dateModified: '2026-10-24T11:27:10+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/text-editor'
      articleSection: 'Je huisstijl toepassen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/text-editor'
      description: '編集者がDXPR Builderでテキスト内をクリックするとツールバーが表示されます。Styles一覧にはブランドのスタイル(リード段落やハイライト付きフレーズなど)を登録できます。各ロールが使うボタンも選べます。編集者はサイズや色を手作業で設定する代わりに、ワンクリックでブランドの見た目を適用します。フォントはテーマから取得します。詳しくはカスタムフォントをご覧ください。'
      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) # テキストエディターにブランドスタイルとボタンを追加する.

 Learn DXPR BuilderManage the siteJe huisstijl toepassen

   ## In this guide

 Related guides

- [テーマのCSSでビルダーコンテンツをスタイルする](/ja/hc/documentation/learn-dxpr-builder/customization/custom-css)
- [ユーティリティクラス](/ja/hc/documentation/learn-dxpr-builder/customization/utility-classes)
- [各ロールがビルダーで見る内容を選ぶ](/ja/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)

編集者がDXPR Builderでテキスト内をクリックするとツールバーが表示されます。**Styles**一覧にはブランドのスタイル(リード段落やハイライト付きフレーズなど)を登録できます。各ロールが使うボタンも選べます。編集者はサイズや色を手作業で設定する代わりに、ワンクリックでブランドの見た目を適用します。フォントはテーマから取得します。詳しくは[カスタムフォント](/hc/documentation/learn-dxpr-builder/customization/custom-fonts)をご覧ください。

## 始める前に

- スタイルの編集には**Administer DXPR Builder configuration**が必要です。
- ツールバーボタンの編集には**Administer dxpr builder profile**が必要です。
- すべてのスタイルには背後のCSSが必要です。`lead`のようなBootstrap 5クラスは、ページがBootstrap 5を読み込む場合に動作します。独自のクラスにはテーマ内のルールが必要です。詳しくは[カスタムCSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)をご覧ください。

## セットアップ

1. 開くのは**DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`)です。
2. 展開するのは**Text Editor**です。**Custom styles**ボックスにはDXPR Builder同梱のスタイルが1行ずつ一覧されています。
3. 追加するのは`Label=element.class`の形式で、スタイルごとに1行です。不要な行は削除します。
4. クリックするのは**Save settings**です。
5. ビルダーでページを開くか、開いている場合は再読み込みして、テキスト内をクリックします。
6. ツールバーの**Styles**をクリックしてスタイルを選びます。

次の行は4つのスタイルを追加します。

```text
Lead=p.lead
Event date=span.text-primary.fw-semibold
Callout=p.border-start.border-primary.border-4.ps-3
Sassy Title=h1.sassy-title

```

各行は3つの部分から成ります。

- 編集者が一覧で見る名前は**label**です。`=`の前に記述します。
- スタイルの適用範囲を決めるのは**element**です。`=`の後に記述します。`p`、`h2`、`blockquote`のようなブロックエレメントは段落や見出し全体にスタイルします。`span`、`mark`、`code`のようなインラインエレメントは選択した単語のみを包みます。
- 各**class**はドットの後に記述します。ドットを増やしてクラスを追加できます(`Callout`の例を参照)。

エレメント名は英数字のみです。クラス名は英数字、ハイフン、アンダースコアです。同梱一覧に戻すには、ボックスを空にして保存します。

## ロールごとのツールバーボタン

1. 開くのは**DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`)で、ロールのプロファイルの横にある**Edit**をクリックします。
2. 展開するのは**Text editor buttons (inline editing)**です。ページ上で編集するテキスト用のボタンにチェックします。
3. 展開するのは**Text editor buttons (modal editing)**です。設定ダイアログ内のテキストボックス用のボタンにチェックします。
4. クリックするのは**Save**です。

インライン編集はText、Alert、Blockquoteエレメントに対応します。カスタムスタイルの表示には両グループで**Font style**にチェックしたままにします。これは**Styles**一覧のプロファイル上の名前です。グループ内のすべてのボタンのチェックを外すと、そのツールバーは組み込みセットに戻ります。どのプロファイルが誰に適用されるかは[ユーザープロファイル](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)で説明しています。

## 表示内容

**Styles**はツールバーにあり、2グループのパネルを開きます。**Block styles**には段落・見出し全体のスタイル、**Text styles**には選択単語用のスタイルが入ります。スタイルを選ぶとボタンにはその名前が表示され、複数該当する場合は**Multiple styles**と表示されます。

エディターはエレメントとそのクラスをページのHTMLに保存するため、訪問者にも同じ見た目が表示されます。ブロックスタイルは自身のエレメントでのみ有効です。`Sassy Title`には**Heading 1**内のカーソルが必要です。

## 設定

36個すべてのボタンが両グループに表示されます。新しいプロファイルでは次にチェックが入った状態で始まります。

| ボタン | マシン名 | インラインのデフォルト | モーダルのデフォルト |
|---|---|:-:|:-:|
| **AI Assistant**、**AI Tone of Voice** | `aiAgentButton`、`aiAgentToneButton` | はい | はい |
| **Bold**、**Italic** | `bold`、`italic` | はい | はい |
| **Underline**、**Strike through** | `underline`、`strikethrough` |  | はい |
| **Superscript**、**Subscript** | `superscript`、`subscript` |  | はい |
| **Remove format** | `removeFormat` | はい | はい |
| **Text color** | `fontColor` | はい | はい |
| **Background color** | `fontBackgroundColor` |  |  |
| **Font size** | `fontSize` | はい | はい |
| **Font family** | `fontFamily` |  |  |
| **HTML block format** | `heading` | はい | はい |
| **Font style**(**Styles**一覧) | `style` | はい | はい |
| **Align left**、**Center**、**Align right**、**Justify** | `alignment:left`、`alignment:center`、`alignment:right`、`alignment:justify` | はい | はい |
| **Insert/Remove Bullet list** | `bulletedList` | はい | はい |
| **Insert/Remove Numbered list** | `numberedList` |  | はい |
| **Outdent**、**Indent** | `outdent`、`indent` |  | はい |
| **Block quote** | `blockQuote` |  | はい |
| **Link**、**Image**、**Table** | `link`、`insertImage`、`insertTable` | はい | はい |
| **Horizontal rule**、**Character map** | `horizontalLine`、`specialCharacters` |  | はい |
| **Source code**、**Show blocks** | `sourceEditing`、`showBlocks` |  | はい |
| **Select all**、**Replace**、**Accessibility help** | `selectAll`、`findAndReplace`、`accessibilityHelp` |  |  |
| **Undo**、**Redo** | `undo`、`redo` | はい | はい |

有効なプロファイルに一致するロールのないユーザーは組み込みツールバーを使います。インラインは**Bold**、**Italic**、**Remove format**、**HTML block format**、**Font style**、両一覧、**Link**、**Image**、**Table**、**Undo**、**Redo**です。モーダルツールバーには下線、取り消し線、スクリプト、配置、インデント、色、サイズのボタンが追加されます。さらに**Block quote**、**Horizontal rule**、**Character map**、**Source code**、**Show blocks**も追加されます。AIオン時は両方に2つのAIボタンが追加されます。

**Font family**はCKEditor標準のウェブセーフフォントを提供します。テーマのフォントではありません。

## スタイルが表示されない場合

- **Styles一覧は同梱スタイルのみ表示されます。**1行が形式を壊しているか、スタイル間に空行があるため、DXPR Builderは一覧全体を無視します。**Text Editor**配下(`/admin/dxpr_studio/dxpr_builder/settings`)で修正して保存します。
- **スタイルがグレーアウトしています。**ブロックスタイルは自身のエレメントでのみ動作します。`h1.sassy-title`には**Heading 1**が必要です。先に見出し一覧でブロックを変更するか、`p`用のスタイルを定義します。
- **ツールバーにStylesボタンがありません。**編集者のプロファイルで**Font style**のチェックが外れています。両方のボタングループ(`/admin/dxpr_studio/dxpr_builder/profile`)でチェックします。
- **スタイルは適用されるがテキストの見た目は同じです。**テーマにクラスのCSSがないか、Bootstrap 5が読み込まれていません。テーマにルールを追加するか、**Sideload Bootstrap files**を**Bootstrap 5**に設定します。場所はGeneral Settingsページの**Bootstrap**配下です。
- **編集者にはスタイルが見えるが訪問者には見えません。** **Apply text format filters to frontend content**は**Text Filters**配下でオンになっており、フィールドのテキストフォーマットは`class`属性を除去します。オプションをオフにするか、クラスを保持するフォーマットをフィールドに与えます。詳しくは[訪問者には異なる表示になる](/hc/documentation/learn-dxpr-builder/troubleshooting/visitors-see-something-else)をご覧ください。

## 次のステップ

- [カスタムCSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)：スタイルクラスの背後にあるテーマルールを書く。
- [ユーティリティクラス](/hc/documentation/learn-dxpr-builder/customization/utility-classes)：**HTML classes**一覧でエレメント全体用のクラスを提供する。
- [ユーザープロファイル](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)：プロファイルが制御するその他のすべて。