CSSアーキテクチャ.
ビルダーのコンテンツはBootstrap 5のマークアップに少量のaz-
クラスを加えたものです。公開ページに現れるクラスと、エディターの実行中にのみ存在するクラスを把握すれば、テーマCSSの
適用対象がわかります。
公開ページのクラス
レイアウト
| マークアップ | クラス |
|---|---|
| セクション | az-sectionの内側にはcontainerまたはcontainer-fluidが入ります |
| ロー | Bootstrapのrow |
| カラム | ブレークポイントごとのBootstrapcol-*クラス |
| コンテンツエレメント | エレメントタイプごとのクラス(例: az-text、az-image、az-images-carousel)。Social Linksはst-socialを使います。多くはaz-elementも持ちますが、ButtonとImageは持ちません |
古いバージョンで保存されたコンテンツにはaz-rowや
az-columnが残っている場合があります。エディターはこれらを認識し、ローやカラムの次回保存時には除外します。
モディファイア
| クラス | 設定元 |
|---|---|
az-row--equal-height |
Equal-height columnsをローに設定した場合のクラスです。設定がない場合、ローにはalign-items-start |
az-row--reverse-horizontal |
Mirror rowをローに設定 |
az-util-vertical-centering |
Vertical centeringをセクションまたはカラムに設定 |
Bootstrapグリッド
カラムにはBootstrapのグリッドクラスを使います。
| クラス | 幅 |
|---|---|
col |
ローを均等に分割 |
col-6 |
50% |
col-md-4 |
768px以上で幅33% |
col-lg-3 |
992px以上で幅25% |
カスタムCSSの記述
- ビルダー固有のルールは
.az-sectionまたはタイプ クラス(例:.az-text、.az-button)を対象にします。.az-elementはButtonとImageには適用されません。 - Bootstrapのグリッドクラスは上書きしません。エディターはこれらを通じてカラム幅を設定します。
- 個別のスタイリングには、エレメントのHTML classes フィールドにクラスを追加して、そのクラスにスタイルを適用します。
エディター専用クラス
これらのクラスはエディターの実行中にのみ存在するため、 公開ページが一致することはありません。
| クラス | 適用箇所 |
|---|---|
dxpr-builder-ui |
エディターUIのすべての要素(コントロールバー、メニュー、ダイアログ) |
controls |
エレメントのコントロールバー |
dxpr-editor |
Preview以外のすべてのビューモードでのフィールドコンテナー |
az-ctnr |
エディター起動後のフィールドコンテナー |
az-sortable-placeholder |
エレメントのドラッグ中のドロッププレースホルダー |
エディター自体のスタイルはdxpr_builder/css/dxpr_builder_backend.cssにあり、
dxpr_builder/sass/dxpr_builder_backend.scssからビルドされます。
Bootstrapバージョン
ビルダーはBootstrap 5のマークアップを出力します。テーマがBootstrap 5を読み込まない場合は、Sideload Bootstrap filesをBootstrap 5に設定します。場所は DXPR Studio > DXPR Builder > General SettingsのBootstrap配下です。None (theme provides Bootstrap)はテーマ側での読み込みを前提とします。