蚊に悩まされたくないアクアリストへ

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

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

思い切ってWordPressのエディターをClassic EditerからGutenbergに切り替えたら、画像の縦横比がおかしくなりました。

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

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

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

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

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

注意
本記事の内容で生じたエラーなどの責任は一切負いかねます。カスタマイズは自己責任でお願いします。事前にバックアップ等を取っておくことをおすすめします。バックアップは「BackWPupのインストールと設定|WordPressの自動バックアップ」を参考にしてください。

貼り付けるCSS

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

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

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

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

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

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

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

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

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

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

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

最後に

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

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

どのように縦横比を崩さずに画面幅に画像を合わせているのか知っておくと、今後も使えますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です