Gutenbergの画像の縦横比が崩れる場合のCSS

テーマ自体が更新され続けているものは問題ないでしょうが、更新されていないテーマでは画像のCSSが外れて、縦横比が崩れる場合があります。

画像の横幅だけが画面幅に合わされて縦横比が崩れないように、CSSで修正を行ったので参考までに記載しておきます。

ちなみに、今回僕が修正したテーマは無料テーマの「LION MEDIA」です。

Gutenbergの画像の縦横比が崩れる場合のCSS

画像の修正は、下記に記載しているCSSを追記してもらうだけでOKです。

貼り付けるCSS

/**************************************
 * グーテンベルクの画像幅調整
 * ***********************************/
.content img {
    max-width: 100%;
    height: auto;
}

「.content」のクラス名（記事内容をまとめているクラス名）がテーマによって変わると思うので、別のテーマに貼り付ける場合は注意してください。

キャッシュのクリアを忘れずに

CSSを追記した後は、忘れずにキャッシュのクリアをして確認しましょう。

スーパーリロードをしてもいいですが、こちらの方法が楽ちんでおすすめです。

【CSSのバージョン管理】スーパーリロードなしで変更を反映させる【SANGO】

画像の縦横比が崩れた理由

画像の縦横比が崩れた理由は、これまで<img>タグに付与されていた、「size-full」というクラスが付与されなくなったことです。

これが原因で、「size-full」クラスに設定されていた、今回追記したCSSと同等の内容が反映されなくなり、縦横比が崩れていました。

figureタグが正しく設定されるようになった

少し、今回の内容とは違いますが、CSSを修正するにあたってHTMLを確認していたら分かったことがあります。

これまで画像は<p>タグが付与されていましたが、Gutenbergでブロックの入力となり画像箇所がWordPressで正しく認識できるようになったためか<figure class=”wp-block-image”>が付与されるようになっていました。

HTML的にはより正しくタグが設定できるようになっていますので、少なからずSEOにも好影響なのかなと思います。

最後に

Gutenbergに変更した後に、画像の縦横比が崩れたサイトがあったので、修正のCSSを紹介しました。

テーマを常に最新の状態に保っていると大丈夫だとは思いますが、テーマ画面から更新できないテーマもあるので、上記のCSSを追記しましょう。

• ワードプレスのログインページのURLを変更する
• 【Edit Author Slug】ユーザー名の漏洩を防ぐプラグインの設定【初心者向け】