ワードプレス初心者向け|投稿画像の自動調整方法メモ
記事を書いていて「画像の幅がバラバラで見づらい…」ということ、ありませんか?
ここでは、WordPress初心者でもできる画像幅の統一方法を2つ紹介します。
① CSSで本文中の画像幅を自動的に統一(全記事に適用)
DIVER使用の際の手順
1. 管理画面の 外観 → カスタマイズ → 追加CSS を開く
2. 下記コードを追加して保存
※その他ソフトでもCSSページに貼り付けるだけ
.entry-content img {
width: 100%;
height: auto;
}
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記述