WordPressで投稿内に挿入した画像にwidthとheightを自動追加してくれるプラグイン「Image Dimensioning」

WordPressで投稿内に挿入した画像にwidthとheightを自動追加してくれるプラグイン「Image Dimensioning」

WordPressで投稿内に挿入した画像にwidthとheightを自動追加してくれるプラグイン「Image Dimensioning」

Image Dimensioningは、投稿内に挿入した画像にwidthとheightを自動追加してくれるWordPressプラグインです。

デフォルトの状態だと、画像ブロックやギャラリーブロックで追加した画像にはwidthとheightが指定されません。Image Dimensioningを導入することで、widthやheightが入らないブロックでも自動追加してくれます。

Image Dimensioningのインストール

※Image Dimensioningは公式ディレクトリに登録されているプラグインではありません。制作者であるXakuro Blogさんで配布されているので、プラグインファイルをダウンロードして使用します。

Xakuro Blogの配布ページにアクセスして、プラグインファイルをダウンロードします。

Image Dimensioningのダウンロード

WordPress管理画面で[プラグイン] – [新規追加]にアクセスし、[プラグインのアップロード]をクリックします。

プラグインのアップロード

ダウンロードしたZipファイルを選択し、[今すぐインストール]をクリックします。

Image Dimensioningのインストール

[プラグインを有効化]をクリックすると、Image Dimensioningが有効になります。

プラグインを有効化

Image Dimensioningの設定

Image Dimensioningに設定画面は存在しません。プラグインを有効化するだけでOKです。

Image Dimensioningをインストールする前の画像ブロックのソースは以下の通りで、widthとheightは入っていません。

<figure class="wp-block-image size-large">
  <img src="http://example.com/wp-content/uploads/2020/07/example.jpg" alt="" class="wp-image-186" srcset="http://example.com/wp-content/uploads/2020/07/example.jpg 800w, http://example.com/wp-content/uploads/2020/07/example-300x200.jpg 300w, http://example.com/wp-content/uploads/2020/07/example-768x512.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">
</figure>

Image Dimensioningを導入すると、以下のようにwidthとheightが自動で指定されます。

<figure class="wp-block-image size-large">
  <img width="800" height="533" src="http://example.com/wp-content/uploads/2020/07/example.jpg" alt="" class="wp-image-186" srcset="http://example.com/wp-content/uploads/2020/07/example.jpg 800w, http://example.com/wp-content/uploads/2020/07/example-300x200.jpg 300w, http://example.com/wp-content/uploads/2020/07/example-768x512.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">
</figure>

画像ブロックでは「画像の寸法」で横幅の%を指定すればwidthとheightは追加される

Image Dimensioningをインストールしていなくても、画像ブロックの場合は「画像の寸法」で%を指定すればwidthとheightは追加されます。(横幅何%で画像を表示するかの設定です)

画像ブロックを選択した状態で、右側に表示される画像の寸法で25%/50%/75%/100%のいずれかを選択します。

画像の寸法の選択

すると、画像ブロックのソースは、以下のようにwidth/heightが指定された状態で出力されます。

<figure class="wp-block-image size-large is-resized">
  <img src="http://example.com/wp-content/uploads/2020/07/example.jpg" alt="" class="wp-image-186" width="800" height="533" srcset="http://example.com/wp-content/uploads/2020/07/example.jpg 800w, http://example.com/wp-content/uploads/2020/07/example-300x200.jpg 300w, http://example.com/wp-content/uploads/2020/07/example-768x512.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">
</figure>

あとがき

img要素にwidthとheightを指定することで、ページを開いた時に画像が表示される領域が予め確保されます。これにより、画像が読み込まれた際に、下のテキストが押しやられてガタつくことがなくなります。

そのためにも、img要素にはwidthとheightを指定した方が良いということですね。

詳しい解説は、「【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい」がとてもわかりやすいのでご参照ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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