WordPressでは記事中の画像をツールバーを使って個別に画像の位置を指定することが可能なんですが、設定しなければ左寄せになるので基本中央寄せしかしない場合は面倒ですよね。
そんな時はプラグインを使わなくても、追加CSSを使って画像に対する中央揃え用のスタイル「text-align:center;」を打ち込めば画像中央寄せができていたのですが、WordPress5.8以降＋Cocoonでは、私の環境下の場合ですが自動的に画像中央寄せができなくなってしまいました。
もし同じような方がいらっしゃいましたら、この記事を読めば解決するかもしれません。
SANGOでも本記事記載のコードで画像の中央寄せができることを確認しています。
中央寄せができなくなった原因
具体的な原因はソースコードを解析していないので分かりませんが、恐らくWordPressまたはテーマのバージョンアップによるスタイルシートの仕組みが変わったか、プラグインと干渉しているのではないかと思われます。
だからといって、今更プラグインを外したりWordPressやテーマを元に戻すのは現実的ではありません。
この方法で自動的に画像中央寄せができた
何とかならないか試行錯誤した結果、取り敢えず下記のやり方で自動中央寄せができました。
WordPress管理画面メニューの「外観」→「カスタマイズ」をクリックします。
追加CSSをクリックします。
下記ソースコードを左側の入力欄にコピー&ペーストし公開ボタンを押します。
/* 画像中央寄せ */
.entry-content figure.wp-block-image{
text-align:center;
}
.entry-content figure.wp-block-image img{
margin:0 auto;
}
/* YouTube動画中央寄せ */
.video-container {margin: 0px auto;}これで個別に表示位置を指定していない画像に対し、自動的に画像中央寄せ表示されると思います。（おまけにYouTube動画の中央寄せコードも記述しています）
また、自動中央寄せを行っても、個別で左寄せ・右寄せ指定されていれば、そちらが優先されるようになっています。
最後に
取り敢えず上記のやり方でうまくいきました。
まぁ、今までのやり方で上手くいかなくなったことは、Chrome DevToolsでソースコード解析すれば原因は分かると思うのですが、結果オーライで終わっておきます。
今回はWordPressテーマにCocoonを使用していますが、もし他のテーマを使われていて同じ症状を経験された方は試してみてください。
