《SWELL》グループ化したボックス装飾内で画像を左寄せにすると囲み枠からはみ出してしまうを解決

ワードプレステーマ《SWELL》において、複数のブロック全体に「メモ」や「アラート」などボックス装飾（囲み枠系スタイル）を適用するにはそれらをグループ化する必要があります。

参考記事

《SWELL》グループ機能を使ったボックス装飾 《SWELL》のグループ機能を使えばボックス装飾内で改段落や画像挿入もできます。

このとき、グループ内の＜画像＞ブロックが最後でなおかつ画像を左寄せにした場合に限ってですが、編集画面上は画像がボックス装飾の枠外に表示されてしまいます。
ただしブラウザ上では正常に表示されるので、これまではそういうもんかと思って見過ごしてきました。

しかしながらやはり見た目に気持ち悪いのでちゃんと原因を見つけて解決したいと思って調べたら、数行のスタイルで解決できることがわかりました。

症状

実際にはどんな症状かがわかりにくいと思うのでサンプルをご覧ください。

こちらは＜段落＞ブロック、その次に＜画像＞ブロックを挿入→両ブロックを選択してグループ化した後に「チェック」スタイルをかましたサンプルです。

次に画像を『配置』から「左寄せ」にしてみます。すると画像が装飾枠から外れて表示されてしまいます。
（CSSに詳しい方なら想像つくかと思いますが、忌まわしきfloatのデザイン崩れみたいな感じです）

あくまで編集画面上だけの問題であって、ブラウザでは正常に表示されます。

ただし＜画像＞ブロックの後に何らかのブロックが足された場合は正常に表示されます。

解決策

ブラウザ上では正常に表示されるので放っておいても問題ないっちゃ問題ないんですが、どうにも気持ち悪いです。

そこで管理画面の外観→カスタマイズ→『追加CSS』に以下のスタイルを加筆します。
（ワードプレス7.0からはここに加筆したスタイルの一部は編集画面にも適用されます）

.wp-block-group[class*="is-style-"],
.wp-block-group.has-border {
	display: flow-root;
}

これで＜画像＞ブロックが最後でもちゃんと枠内に収まって表示されるようになります。

上の設定は『ボーダー設定』の各装飾、『スタイル』の各装飾すべてに適用されます。

子テーマの『style.css』では作動しません。

なお前述の『追加CSS』には追加したくないという場合は編集画面専用スタイルに加筆することになります。

編集画面へ反映させるeditor-styleの作成方法

手順

専用ファイルの作成

子テーマフォルダswell_child内にeditor-style.cssという名称のファイル（編集画面専用のスタイルシート）を作成します。
（文字コードはUTF-8）

editor-style.cssを開き、先頭に@charset "utf-8";とコピー＆ペーストして保存します。
そのあとにあなた専用の独自スタイルを書き込んでいきます。

※一度作成したあとは管理画面の【外観】→【テーマファイルエディター】の「editor-style.css」からも追記できます。

レンタルサーバーのファイルマネージャー等を開いてテーマフォルダswell→build→css→editorとたどって中にあるeditor_style.cssを開いてそこに直接書き込んでもOK。
（下はエックスサーバーの例ですがフォルダ構成はどこも同じです）

手順

functions.phpへの追記

このままでは編集画面に反映されないので、レンタルサーバーのファイルマネージャー等で子テーマ内のfunctions.phpを開きます。

以下をコピー＆ペーストします。

/*編集画面に独自スタイル反映*/
function add_block_editor_styles() {
	wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/editor-style.css' );
}
add_action( 'enqueue_block_editor_assets', 'add_block_editor_styles' );

管理画面の【外観】→【テーマファイルエディター】からも編集できます。

これで編集画面に独自スタイルが適用されるようになります。

見出しまで戻る

【ワードプレス 7.0.2＆SWELL 2.17で動作検証済】