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

このドキュメントは、ユニットやブロックエディターで提供されるレイアウト機能を閲覧画面で正しく反映するために必要となるCSSをまとめたものです。コード例の .acms-entry は、利用しているテーマの本文ラッパークラスに置き換えてください。

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

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

:where(.acms-entry) :where(.align-left) {
  display: flex;
  justify-content: flex-start;
}

:where(.acms-entry) :where(.align-right) {
  display: flex;
  justify-content: flex-end;
}

:where(.acms-entry) :where(.align-center) {
  display: flex;
  justify-content: center;
}

実装のポイント

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

カラムブロック

ブロックエディターのカラムブロック（1カラム／2カラム／3カラム）では複数列のレイアウトを構築できます。

: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);
}

/* カラム内の要素が横幅を押し広げないようにする */
:where(.acms-entry) :where([data-type='columns']) > [data-type='column'] {
  min-width: 0;
}

実装のポイント

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

• 1カラム（.layout-one-column）は列数の指定がなくても1列で表示されます。

• カラムの中に入れ子のカラムや幅の広い画像があると、カラムが中身の幅に引っ張られて親からはみ出すことがあります。[data-type="column"] に min-width: 0 を指定すると、中身の幅に関わらず均等に分割されます。

グループブロック

Ver. 3.2.36 以降で利用できます。

グループブロックは複数のブロックをまとめるラッパーです。グループ内の先頭・末尾のブロックの余白を打ち消し、背景色を設定したグループには内側の余白を付けます。余白の値は例なので、テーマに合わせて調整してください。グループに指定した独自クラスの見た目はテーマ側で実装してください。

:where(.acms-entry) :where([data-type="group"]) {
  box-sizing: border-box;
}

/* 先頭・末尾のブロックの余白を打ち消す */
:where(.acms-entry) [data-type="group"] > :first-child {
  margin-top: 0;
}

:where(.acms-entry) [data-type="group"] > :last-child {
  margin-bottom: 0;
}

/* 背景色を設定したグループの内側の余白 */
:where(.acms-entry) :where([data-type="group"][style*="background-color"]) {
  padding: 1.5rem;
}

埋め込みブロック

Ver. 3.2.36 以降で利用できます。

埋め込みブロックの配置は、外側の要素に付く .align-*（配置機能のCSS）で figure を寄せて反映します。表示サイズは figure の幅として出力されるため、figure の既定の余白を打ち消します。また、X のように表示幅より狭いウィジェットは、中央・右揃えのときに内側の [data-embed-content] も同じ向きに寄せる必要があります。iframe は親要素からはみ出さないようにします。

:where(.acms-entry) :where([data-type="embedBlock"]) > figure {
  margin: 0;
}

:where(.acms-entry) :where([data-type="embedBlock"]) iframe {
  max-width: 100%;
}

/* 中央・右揃えで、表示幅より狭いウィジェットも寄せる */
:where(.acms-entry) :where([data-type="embedBlock"][data-align="center"], [data-type="embedBlock"][data-align="right"]) [data-embed-content] {
  display: flex;
  flex-direction: column;
}

:where(.acms-entry) :where([data-type="embedBlock"][data-align="center"]) [data-embed-content] {
  align-items: center;
}

:where(.acms-entry) :where([data-type="embedBlock"][data-align="right"]) [data-embed-content] {
  align-items: flex-end;
}

リンクカード

埋め込みHTMLを取得できない、または許可されていない場合は、次の構造のリンクカードとして出力されます。見た目はテーマ側で実装してください。

<div class="embed-block-card acms-embed-link not-editor-style">
  <div class="embed-block-card-image-container acms-embed-link-image-container">
    <img src="..." alt="" loading="lazy" decoding="async">
  </div>
  <div class="embed-block-card-content acms-embed-link-content">
    <a href="..." class="embed-block-card-title acms-embed-link-title">タイトル</a>
    <span class="embed-block-card-provider acms-embed-link-site-name">提供元</span>
    <span class="embed-block-card-description acms-embed-link-description">説明</span>
  </div>
</div>

画像・提供元・説明は、取得できた場合だけ出力されます。