Chinese (Simplified)Chinese (Traditional)EnglishJapaneseKorean

Peanuts Blog[かぎや盛岡べん別館]

コロナ禍は厳しい…その時々の気づきを書き綴ります。55歳過ぎての、定年前のシルバー起業。 このままでは楽しくないと… 横浜市の支援と信用保証、銀行融資を活用して、必要な国家資格などを取得。生業としてこれからの働き方改革を自分自身に適用しました。

WP 自動で画像とキャプションを中央位置へ WordPress Block Editor

Block Editorで画像を中央位置にする方法は、手動で変更する方法は既知だろう。

ここでは、いちいち手動で変更するのを省くのと、編集中の画面と、通常表示でキャプションが崩れたりするのを防ぐ方法です。

他のブログを参考してたどり着いた方法は、

下記の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の追加する場所は下図となります。

f:id:SnackRed:20210610230747p:plain

管理画面での「追加CSS」リアルタイム変更画面

ただし、コツがあります。

Block Editorで編集中では、

  • 画像のセンタリングは変更しないこと。挿入したらそのままの位置となります。左端がデフォルト。

下図が実際の編集画面です。

f:id:SnackRed:20210610231506p:plain

編集画面(プレビュー)では画像位置はデフォルト左端とする

この画面でセンタリングすると、通常表示位置だとキャプションが崩れてしまうので注意する。

 

キャプションは、指定位置に入力するだけ(上の図で右端に見える「TSA002型番不明」が指定位置キャプション)。

編集画面中(プレビュー)のキャプションは画像とずれて中央位置にありますが、気にすることはありません。

通常表示では、画像と一緒に自動でセンタリングされています。