Block Editorで画像を中央位置にする方法は、手動で変更する方法は既知だろう。
ここでは、いちいち手動で変更するのを省くのと、編集中の画面と、通常表示でキャプションが崩れたりするのを防ぐ方法です。
他のブログを参考してたどり着いた方法は、
- 記事中の画像を自動で中央寄せする方法 | WordPress (aresei-note.com)
- Wordpress更新前後でキャプション位置やサイズが変化? | だんちゃんの冒険 (dan-chan.com)
下記のCSSを追加することでした。
.wp-block-image figcaption
{
color: #808080;
text-align: center;
font-size: 16px;
}
.entry-content figure.wp-block-image {
width: 100%;
text-align: center;
}
上半分がキャプションのセンタリングで、下半分が画像のセンタリングです。
管理画面でCSSの追加する場所は下図となります。
ただし、コツがあります。
Block Editorで編集中では、
- 画像のセンタリングは変更しないこと。挿入したらそのままの位置となります。左端がデフォルト。
下図が実際の編集画面です。
この画面でセンタリングすると、通常表示位置だとキャプションが崩れてしまうので注意する。
キャプションは、指定位置に入力するだけ(上の図で右端に見える「TSA002型番不明」が指定位置キャプション)。
編集画面中(プレビュー)のキャプションは画像とずれて中央位置にありますが、気にすることはありません。
通常表示では、画像と一緒に自動でセンタリングされています。