ユニット機能利用時に閲覧側で必要になるCSS

このドキュメントは、ユニットやブロックエディターで提供されるレイアウト機能を閲覧画面で正しく反映するために必要となるCSSをまとめたものです。

配置機能（左／中央／右）

メディアや地図など一部のユニットやブロックエディターの一部のブロックでは、配置を選択できます。
配置のレイアウトを閲覧画面で反映させるために、以下のCSSを適用してください。

.align-left {
  display: flex;
  justify-content: flex-start;
}

.align-right {
  display: flex;
  justify-content: flex-end;
}

.align-center {
  display: flex;
  justify-content: center;
}

実装のポイント

• 配置用の .align-* クラスはフレックスレイアウトで動作します。子要素の幅が100%の場合、寄せの効果が分かりにくいことがあります。

カラムブロック（2カラム／3カラム）

ブロックエディターのカラムブロックでは複数列のレイアウトを構築できます。.acms-entry は任意の本文用クラスに置き換えて使用してください。

:where(.acms-entry) :where([data-type='columns']) {
  display: grid;
  grid-auto-flow: column;
  box-sizing: border-box;
  gap: 1rem; 
}

/* 2カラム */
:where(.acms-entry) :where([data-type='columns']).layout-two-column {
  grid-template-columns: repeat(2, 1fr);
}

/* 3カラム */
:where(.acms-entry) :where([data-type='columns']).layout-three-column {
  grid-template-columns: repeat(3, 1fr);
}

実装のポイント

• .acms-entry は利用しているテーマの本文ラッパークラスに変更してください。

• gap の値を変更することでカラム間の余白を調整できます。