PC・タブレット・スマホでレスポンシブに自動的に画像を切り替える方法

PC・タブレット・スマホで自動的に画像を切り替えるレスポンシブ用の画像タグのテンプレートを紹介します。投稿本文で簡単に使えるので、複数のデバイスで最適なサイズの画像を表示可能です。

1 実装のポイント

• WordPress が生成するリサイズ画像を利用して自動で切り替え可能
• 投稿本文に直接貼れるタグなので複雑なJSは不要
• テーマごとのCSS調整も可能

2 投稿本文用レスポンシブ画像タグ（サンプル）

<img 
  src="https://example.com/wp-content/uploads/2025/09/sample-1000x667.jpg" 
  srcset="
    https://example.com/wp-content/uploads/2025/09/sample-300x200.jpg 300w,
    https://example.com/wp-content/uploads/2025/09/sample-768x512.jpg 768w,
    https://example.com/wp-content/uploads/2025/09/sample-1000x667.jpg 1000w
  "
  sizes="(max-width: 767px) 100vw, (max-width: 1024px) 80vw, 1000px"
  alt="サンプル画像">
    

3 汎用CSS

/* レスポンシブ画像の基本スタイル */
img {
    max-width: 100%;  /* 親要素の幅を超えないように制限 */
    height: auto;     /* 画像の縦横比を維持して高さを自動調整 */
}
    

4 代用プラグイン

特に不要です。WordPress 本体の srcset 機能で自動切替が可能です。

5 まとめ

投稿本文用レスポンシブ画像タグを使えば、PC・タブレット・スマホそれぞれで最適なサイズの画像を表示できます。JS を書く必要もなく、WordPress が自動生成するリサイズ画像を活用できるため、複数デバイス対応が非常に簡単です。