この記事は a-blog cms Advent Calendar 2025 の 13日目。

ブロックエディター、面白いです。使えば使うほど、もっと何かできないかと考えてしまいます。
先日の a-blog cms Training Camp 2025 でレイアウトや文字表現についてお話しました。その中で少し話題にしてしまった画像の回り込み（float）について、別の方法を思いつきました。

floatとは

CSSのプロパティの一種。画像を左右に配置して、その周りをテキストや要素が回り込むというもの。昔はこれでカラムレイアウトを作っていましたね。同時に必須だったのが、回り込み解除。clear=”both”を設定した疑似要素も用意したりして。

これまでのa-blog cmsでは、class=”clearHidden” があちこちに存在していたため、エントリー編集でつくるページコンテンツに限界がありました。ver.3.2で float配置がなくなったため、レイアウトの自由度は高くなったと感じます。

float がなくなってできなくなった回り込み。必要かどうかは賛否あるかと思いますが、レイアウトのパターンとして、持っておきたいところです。

ブロックメニューとCSSで回り込みができた

エントリー内の各ユニットはブロック要素として出力されています。ユニット単位では、どうやっても回り込みはできません。ブロックエディターも同様。エディター内で画像とテキストを入力すると、それぞれ幅100%のボックスで表示されるため縦に並びます。

ただ、出力ソースをよく見ると、画像とテキストが並列にならんでいて、できそうな感じがしました。クラスをつけることができれば。

1. 回り込み用のクラスをつくる

ブロックエディター設定 → ブロックメニューにて
画像ブロックを追加し、ラベル「左回り込み」、クラス「float-left」を設定。同様に「右回り込み」も作成する。

◎クラスの場所を確認

画像要素にクラスを付与したときのソースを確認します。

<div class="media-image-block width="100%">
  <figure class="float-left">
    <img src="メディアのパス">
  </figure>
<div>
<p>新しいデザインの潮流を支えるタイプフェイス。言葉の豊かな ....</p>

このようになっています。
float-left が付与される figure の親要素（media-image-block）をインラインブロック化して、サイズを小さくする必要があります。そこで登場するのが、CSS擬似クラス関数 :has() です。

2. CSSを設定する

子要素に .float-left があったら .media-image-block を float する
以下は、回り込ませる画像の親要素サイズを40%にしたとき

.media-image-block:has(.float-left) { // 左回り込み
    display: inline-block;
    width: 40%;
    margin: .25em 1.5em 1.5em 0;
    float: left;
}
.media-image-block:has(.float-right) { // 右回り込み
    display: inline-block;
    width: 40%;
    margin: .25em 0 1.5em 1.5em;
    float: right;
}

これで、ブロックエディターの中で画像の回り込みができるようになりました。

回り込みを解除するブロックも用意

float したら解除。レイアウト崩れの原因だから当たり前のようにclear=”both”をどこかに忍び込ませていましたね。画像の高さよりテキスト量が少ないときは「２カラムに分割」を使えばいいのですが、一応用意しておきます。

水平罫線で解除ブロックをつくる

回り込みの解除に、水平罫線ブロックを使います。
ラベルは「余白」、クラス「clear-both」です。

このまま使うと水平罫線が表示されるのでCSSで調整。

hr.clear-both {
    clear: both;
    border: none;
}

まとめ

いかがでしょうか。
レスポンシブ対応を行えば、けっこう現実的な設定かと思います。

ちょっと難点だったのは、編集画面でブロック左側［＋］［⋮⋮］が操作できないことがあったこと。回り込み表示するように admin-editor.css に追記したところ、float した際の重なりが原因なのか移動もコンテキストメニューも出せませんでした。

まだまだブロックエディターであれこれやってみたいと思います！