WordPressに実装されているはずのレスポンシブイメージが機能しないのでもう一度確認してみた。
2018年05月31日 21時00分 月齢:16.0[立待月] 潮汐:大潮
(最終更新日:2019年09月17日)
6年前に投稿 | WordPress | コメントはありません
3分ぐらいで読めます。
この記事は情報が古い場合があります。
先日、プラグインに頼らずにスマートフォンで最適に表示できるようにCSSをいじっていたのですが、環境によっては幅600pxの画像がそのまま表示されてサイトのボックス幅よりはみ出していることが確認できました。
その前に、軽くレスポンシブイメージの説明を。レスポンシブイメージとは、閲覧側の画面サイズに対して最適な画像のサイズと見せ方を選べる方法です。画面幅に合わせて最適な大きさの画像を表示させることができます。
WordPress4.4からsrcsetとsizesを使ったレスポンシブイメージが実装されているようです。何かしないと機能しないのかな。プラグインを入れたり、functions.phpに記述したりが必要だったときもあったようですが…
さっそくいろいろと探りを入れてみました。
まずは画像のソース。
<img class="size-large wp-image-12886 aligncenter" src="https://susu.cc/wp-content/uploads/2018/05/nanowallet-600x330.jpg" alt="nano wallet download" width="600" height="330" srcset="https://susu.cc/wp-content/uploads/2018/05/nanowallet-600x330.jpg 600w, https://susu.cc/wp-content/uploads/2018/05/nanowallet-150x83.jpg 150w, https://susu.cc/wp-content/uploads/2018/05/nanowallet-300x165.jpg 300w, https://susu.cc/wp-content/uploads/2018/05/nanowallet-768x423.jpg 768w, https://susu.cc/wp-content/uploads/2018/05/nanowallet.jpg 1143w" sizes="(max-width: 600px) 100vw, 600px" />
という感じで、レスポンシブイメージとしての記述は問題なし。それじゃあいったい何なのだろうか。2つほど抜けているところがあったようです。
まずはheader.phpのhead内に
<meta name="viewport" content="width=device-width,initial-scale=1">
を入れました。スタイルシートの指定よりも前に記述しておきます。
次にCSS。
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
max-width: 100%;
height: auto;
}
「max-width: 100%;
」と「height: auto;
」を追加しました。
これで正しく表示されるようになりました。しばらくご無沙汰だと新技術についていくのが大変ですね。
古い記事・新しい記事
- 古い記事 [2018年05月27日]
- ← WordPressをPHP7.1に対応させるために古いプラグインをあきらめた。
- 新しい記事 [2018年06月01日]
- → WordPressでアイキャッチ画像を表示させるためプラグインを入れてテーマをいじってみた。
他にも「WordPress」カテゴリの記事はいかがですか。
- WordPress2.8.3にしておきました。
- 画像遅延読み込みプラグイン「Lazy Loader」を入れてみた。
- WordPress 前の記事と次の記事を表示させる。
- WordPressのテーマを小変更。
- WordPressの文字コードをutf8からutf8mb4に変換した。
- WordPressで、更新日の表示を予約投稿に対応させる。
- WordPress WP-PageNaviプラグインの最適化
- WordPressのテーマファイル「white-album」
- WordPressでアイキャッチ画像を表示させるためプラグインを入れてテーマをいじってみた。
- WordPressとエックスサーバーの負荷限界