【ブログカスタマイズ】スマホサイズのサムネイル画像をレスポンシブ対応でPC用に変換するCSS

今回はブログの画像をデバイスごとに最適な大きさに変更するCSSコードになります。

最近のワードプレスのテーマはレスポンシブ対応になっているのでコードを使用しなくても自動で変換する機能が備わっています。あまり使用する機会は少ないと思います。

実際、私のブログではwebpの動く画像を多用しております。そのため、サーバーへの負荷を軽減するために他サーバーからリンクを引用する形でwebp画像を表示しております。

ワードプレスはwebp画像の場合はレスポンシブ対応が不可ということが分かりました。

PC用とスマホ用の画像を二つ用意する

最初、同一の画像をPC、スマホ用を二つ準備し、デバイスごとに表示切り替えをしていました。この場合、どうしても２倍の容量を占有するため非効率となります。

また、動く画像は容量を喰うためサーバーの転送量に大きく影響を与えます。

サーバー内に一つの画像を表示し、レスポンシブ対応をする

次に試したのが一つの画像をデバイスごとに表示切り替えです。一定の効果を得ることができました。使用しているブログサイトでは画像にリンクを貼り付けており、そこから購入ページへジャンプするよう施策を組んでおりました。

容量問題により画像をGIFからwebpに切替をすることにしました。

webpだとデバイスのバージョンによっては非表示になり、ユーザー側にとっては不利益になる可能性があることが示唆されておりました。

実際、私のサイトの訪問者の多くはwebpで問題ない範囲だったため、GIF動画をやめ、webpに切替することにしました。

しかし、ワードプレスの設計上、webpだと諸問題が発生しCSSでの対応をすることになりました。

CSSコードはこちら

私のワードプレスは【swell】を使用しています。

下記、コードをCSSに貼り付けることでお好みのサイズに変更することが可能です。

/* 画像のレスポンシブ対応（スマホとPCでサイズを最適化） */
.wp-block-image img {
width: 100%; /* 画面幅に合わせて拡大縮小 */
max-width: 1200px; /* PCでは最大1200pxまで拡大 */
height: auto; /* アスペクト比を維持 */
display: block;
margin: auto;
}

/* SWELLのブロック画像に適用 */
.wp-block-image.size-large img {
max-width: 100%; /* 親要素に合わせて縮小 */
}

/* スマホサイズに最適化（小さめに表示） */
@media screen and (max-width: 768px) {
.wp-block-image img {
max-width: 600px; /* スマホでは最大600px */
}
}

また、こちらはChatGPTから出力したコードになりますのでご参考にしてみてください。

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>レスポンシブ画像</title>

<style>

.thumbnail {

width: 100%;

max-width: 800px; /* PC用の最大幅 */

height: auto;

display: block; margin: 0 auto;

}

@media screen and (max-width: 768px) {

.thumbnail {

max-width: 400px; /* スマホ用の最大幅 */

}

}

</style>

</head>

<body>

<img src="small-thumbnail.jpg" srcset="small-thumbnail.jpg 400w, large-thumbnail.jpg 800w" sizes="(max-width: 768px) 400px, 800px" class="thumbnail" alt="サムネイル画像">

</body>

</html>

解説

srcset 属性を使って、画面サイズに応じた画像を選択。
- small-thumbnail.jpg 400w: スマホ向け画像
- large-thumbnail.jpg 800w: PC向け画像
sizes 属性で、画面サイズによって画像の幅を指定。
- max-width: 768px の場合は 400px を選択。
- それ以上のサイズでは 800px を選択。
max-width を設定することで、画像が指定の最大サイズを超えないようにする。