テキストエディターにブランドスタイルとボタンを追加する.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

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

始める前に

  • スタイルの編集にはAdminister DXPR Builder configurationが必要です。
  • ツールバーボタンの編集にはAdminister dxpr builder profileが必要です。
  • すべてのスタイルには背後のCSSが必要です。leadのようなBootstrap 5クラスは、ページがBootstrap 5を読み込む場合に動作します。独自のクラスにはテーマ内のルールが必要です。詳しくはカスタム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つのスタイルを追加します。

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一覧のプロファイル上の名前です。グループ内のすべてのボタンのチェックを外すと、そのツールバーは組み込みセットに戻ります。どのプロファイルが誰に適用されるかはユーザープロファイルで説明しています。

表示内容

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

StylesボタンにLeadと表示されたTextエレメントのテキストツールバー。キャレットのある段落の上に表示され、その段落は通常段落の上の大きなLeadスタイルになっています

エディターはエレメントとそのクラスをページの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属性を除去します。オプションをオフにするか、クラスを保持するフォーマットをフィールドに与えます。詳しくは訪問者には異なる表示になるをご覧ください。

次のステップ