satokibi6 https://blog.hatena.ne.jp/satokibi6/ BTOイノベーション https://www.btoinov.com/ 今回はブログの画像をデバイスごとに最適な大きさに変更するCSSコードになります。 最近のワードプレスのテーマはレスポンシブ対応になっているのでコードを使用しなくても自動で変換する機能が備わっています。あまり使用する機会は少ないと思います。 実際、私のブログではwebpの動く画像を多用しております。そのため、サーバーへの負荷を軽減するために他サーバーからリンクを引用する形でwebp画像を表示しております。 ワードプレスはwebp画像の場合はレスポンシブ対応が不可ということが分かりました。 PC用とスマホ用の画像を二つ用意する 最初、同一の画像をPC、スマホ用を二つ準備し、デバイスごとに表示切り替… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fwww.btoinov.com%2Fentry%2Fthmubnail_css" title="【ブログ カスタマイズ】スマホサイズのサムネイル画像をレスポンシブ対応でPC用に変換するCSS - BTOイノベーション" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2025-03-02 15:51:06 rich https://www.btoinov.com/entry/thmubnail_css 1.0 100%