いつの時点からか分からないのですが、最近、サイトの画像ブロックで設定した画像キャプションの文章が全て左寄せになっているのに気が付きました。
CSSコードを追加して対策してあるので、今日はそのお話。
画像のキャプションがなぜか左寄せになる
私の運営するWordpressサイトでは、Cocoonテーマを使わせていただいています。
ここ数日の間で気付いたのですが、記事を書いて公開した後で実際のページを見ると、画像のキャプションの部分が左寄せで表示されているんですよね。
記事を書いている間、投稿編集画面ではちゃんと中央寄せで表示されてるんですよ。
なのに公開済みの記事のページを見ると、なぜか全部左寄せに。
いつからこうなってたの…？
思いつく点を幾つかいじってみたのですが解決しなかったので、状況をちょっとメモしておきます。
画像キャプション左寄せ現象が発生したとき、私の手元の環境はこんな感じでした。
もし似たような状況で画像キャプションが左寄せになってしまいお困りの方がいらっしゃれば、次項で記載するCSSコードを使っていただくと、今まで通り中央寄せで表示させることができるかもしれません。
対策用のCSSコードを追加
何が原因かはまだハッキリ特定できていないけど、Cocoonフォーラムに投稿されていた画像キャプションのCSS反映不具合の件は、最近のCocoonアップデートで既に解決済みの様子。
…にも関わらず、解決したというバージョンより新しいバージョンに更新済みの私の環境で直ってないということは、また別の要因によって起きている現象だと思うんですよね、きっと。
私のサイトの場合は十中八九、Cocoon側の不具合じゃなく自分で書いたカスタム用の他のCSSコードが邪魔をしてるとかそんな事だろうと思うんですよね。
ひとまずキャプションの部分が中央寄せで表示されていれば今までと同じ見た目に戻るワケなので、『画像キャプションを中央寄せで表示させる』という指示のCSSコードを追加しておくことにしました。
/* 画像キャプションを中央寄せにする処理 */
.wp-block-image figcaption {
text-align: center;
}※クリックで全文選択されます。
私の環境では、上記のCSSコードを追加した結果、画像キャプションを今まで通り中央寄せにすることができています。
私と同じくWordpressサイトの画像キャプション左寄せ現象にお困りの方は、上記CSSコードをコピーして、ご自身のWordpressサイトのカスタムCSSを書くところに貼り付けてお使いください。
当初は応急処置として追加したコードでしたが、なんか、もうこのまま使い続けてても差し支えない気がしてきたので「応急処置」の但し書きは消しておくことにします。
まとめ
Cocoonを適用中のサイトで気付いた現象でしたが、Cocoon以外のテーマを使っているサイトでも有効な対処方法かと思います。
ご紹介したCSSコードが画像キャプション左寄せ現象解決のお役に立てば幸いです。
