煤式自動連結器

先日、プラグインに頼らずにスマートフォンで最適に表示できるように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;」を追加しました。

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