WordPressに実装されているはずのレスポンシブイメージが機能しないのでもう一度確認してみた。

2018年05月31日 21時00分 正午の月齢:16.0  月名:立待月  潮汐:大潮 月齢: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;」を追加しました。

これで正しく表示されるようになりました。しばらくご無沙汰だと新技術についていくのが大変ですね。

コメントはありません

ごめんなさい、コメントフォームは閉鎖しています。

Translate »