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

Blog Admin
Blog Admin

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

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

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

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

備忘録です。

figureの子要素たちへ

WordPress

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

  • figure
    • img
    • figcaption

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

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

可変ブロックにする

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

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

CSSに書いた内容

以下ままです。

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

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

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

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

ご存じですか? ← 存じております

疑問符

こぼれ話です。

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

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

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

まだ足りていないはず

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

Xiaomi Mi Note 10 Lite の動画です。

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

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

この投稿を書いたのは・・・
Blog Admin

ガジェットが大好きで、ほぼ毎月何かしら調達しております。
無駄遣い扱いされたくないのと、何かの役に立つかと思い、記録を書くことにしたのでした。

お出かけのときには、スマホを複数台とタブレットとパソコンを持ち歩きます。
両手首にはスマートウォッチです。
こんなスタイルで生活している中での備忘録を書いています。

「Blog Admin」をフォローしてみる
ブログ記事
「Blog Admin」をフォローしてみる

ご意見やご感想などお聞かせください! コメント機能です。

タイトルとURLをコピーしました