CSSで兄弟要素の幅に合わせる（WordPressで画像の真下に中央揃えでキャプションを入れたい！）

Blog Admin

画像は左揃えにして、そのブロック内でキャプションを中央揃えにするレイアウトになっているはずです。
CSSを書き足しました。

WordPress
画像のキャプション位置の調整

WordPressの仕様が変わったのか、テーマの仕様が変わったのか。
figureのタグ構成が変わったのでしょうか。cssの内容が変わったのでしょうか。
画像に対してキャプションの位置が揃わなくなってしまいました。

暫定措置で、width: 300px; とかいった逃げを打っていたのですが、幅が変わっても対応できるようにcssを清書しました。
ひとつ利口になりました。

備忘録です。

figureの子要素たちへ

タグ構造では、以下のようになっています。

画像とキャプションは同じ親を持つ兄弟です。
imgの幅に合わせて、figcaptionの幅を決めてほしいわけです。

兄弟の幅は参照できませんので、親を可変幅にします。
子どもたちの幅をそれぞれで意識して、よきに計らうように、という設定です。
ブロック要素をきれに組んでいれば、しっかりハマりますね。

インライン要素にしつつ、可変にします。
可変方向は下向きで。

日本語で書くと上記のとおりで、そのままcssに書き表すことができます。

以下ままです。

figure.size-medium, figure.wp-block-embed-twitter {
    display: inline-flex;
    flex-direction: column;
}

flexを指定できるようになったのは、レベルアップだと思います！

画像に関しては、サイズ「中」しか使わないので、上記のクラス名を指定しました。
Twitterの埋め込みも対象となるように、クラス名を併記しております。YouTubeは全幅表示なので問題ないはずです。

実はクラス指定でなくてもよいのではないかとも思っておりますが、影響範囲を読み切れなかったので、見えているところからという考え方です。

こぼれ話です。

テーマエディターでstyle.cssを直接編集しようとすると、「CSSエディター」を使うように推奨メッセージが表示されます。
反映状況を見たながら編集できるメリットははありますが、ChromeのF12に慣れてしまっているので。。ｗ

ここで CSS を変更する必要はありません ? 付随の CSS エディターで、編集とライブプレビューを行うことができます。

もちろん知っていますよ。知ってはいるものの、反映状況を確認しながらの編集は不要なのです。
あらかじめChromeの機能で確認できているので、済んだ状態のものを反映するだけです。

対象にしなければならないクラス名はまだあるはずです。
YouTubeなどの埋め込み関係が心配です。YouTubeは全幅なので大丈夫なのですが。。

Xiaomi Mi Note 10 Lite の動画です。

HTMLとかCSSとかは、関係する場所があちこちにあって調査が大変です。
解析ツールをうまく使って乗り切りましょう。
やるしかないことです。

ある程度の知識のある方にとっては、楽に使えるものなのでしょう。
そのレベルまで至りたいものです。