LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5.5 SVGの画像が小さく表示されるのを直す

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

WordPress5.5にアップデートするとSVGの画像が小さく表示される。WordPressではSVGが標準対応ではないので、それの影響でしょうか?

修正方法はかんたんです。ただ量が多いと面倒。

WordPress標準では、SVG画像はメディアライブラリに追加できません。プラグインやPHPフィルターでカスタマイズが必要です。

(ちなみにボクはSafe SVGを使ってる。)

そんなSVG画像ですが、WordPressをバージョン5.5にアップデートすると表示される画像が小さくなります。

原因は、<img>のwidth, height属性値が小さくなるから。HTMLはこんな感じになります。

<div class="wp-block-image">
  <figure class="aligncenter size-full">
    <img loading="lazy" width="77" height="63" src="https://***/wp-content/uploads/2020/**/***.svg" alt="***" class="wp-image-*****">
  </figure>
</div>

SVG画像のサイズがデフォルトで 60~70前後になるらしい。小さすぎます。

この画像のオプション設定ではこうなっています。

WordPress5.5 画像サイズオプション
WordPress5.5 編集画面の画像サイズオプション

画像の寸法は正しいのですが、それが<img>のwidth, height属性に反映されてないみたいです。

編集画面のブロック設定から直す

修正方法はかんたんです。画像ブロックの『画像の寸法』の設定をし直すだけ。サイズを変更しないのなら、100%をオンにします。

(一番これが簡単。)

あとは、幅、高さの値を変えるだけでも直せます。

(同じ値を入れ直しても直る。)

修正方法はこれだけです。

SVG画像の初期設定がおかしい?

動きをみるかぎり、画像の寸法の初期設定がおかしいようです。

画像の寸法カスタムサイズを入れたもの、%指定してあるものは問題ありませんでした。

問題があったのは、寸法の変更をせずにデフォルトサイズで表示していたもの。

画像ブロックで挿入したら、画像寸法の値を<img>のwidth, heightの値に突っ込むところが抜けてるんじゃないかと。

(もしくは、画像アップロード時に設定するものかもしれない。)

画像の寸法の値を変えるとそれは反映されるので、すぐに修正されるんじゃないかと思います。

Safe SVGはまだWP5.5に対応していない。2020年9月13日現在。)

ほかのプラグイン、自分でカスタムしている人も注意しましょう。WordPressがデフォルトでない機能は対応が遅れることがあるので。

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください