ワードプレス初心者向け|投稿画像の自動調整方法メモ

記事を書いていて「画像の幅がバラバラで見づらい…」ということ、ありませんか?
ここでは、WordPress初心者でもできる画像幅の統一方法を2つ紹介します。


① CSSで本文中の画像幅を自動的に統一(全記事に適用)

DIVER使用の際の手順
1. 管理画面の 外観 → カスタマイズ → 追加CSS を開く
2. 下記コードを追加して保存

※その他ソフトでもCSSページに貼り付けるだけ

.entry-content img {
  width: 100%;
  height: auto;
}

これで本文中の画像がすべて記事幅いっぱい(最大横幅100%)に統一されます。

メリット
・既存記事も含めて一括で適用
・更新の手間がない

デメリット
・すべての画像に適用されるため、部分的に幅を変えたい場合は別のCSS指定が必要


② HTMLタグで個別に幅を指定(記事単位)

記事編集時に、画像タグを以下のように記述します。

横幅を記事幅いっぱいにする場合

<img src="画像URL" alt="説明文" style="width:100%; height:auto;">

ピクセル数で固定する場合

<img src="画像URL" alt="説明文" width="800" height="533">

メリット
・記事や画像ごとに細かく調整できる

デメリット
・過去記事すべてを修正するには手間がかかる


💡 まとめ
・全部まとめて統一したいならCSS一括適用
・画像ごとに調整したいならHTML記述

 

おすすめの記事