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

2018年05月31日 正午の月齢:16.0  月名:立待月  潮汐:大潮 月齢:16.0[立待月] 潮汐:大潮
3週間前に投稿 | 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;を追加しました。

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

前の記事・次の記事

前の記事
<<
次の記事
>>

この記事のトラックバックURL

https://susu.cc/2018/05/wordpressresponsiveimage.html/trackback

コメントはありません »

[RSS on this post] [TrackBack URI]

コメントをどうぞ