ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

amp-imgのlayout="responsive"で画像表示がうまくいかないときに疑うべきところ

既存のhtmlをamp化したときにレイアウトが崩れる場合がよくあります。今回は私自身がamp対応時にはまった画像のレスポンシブ化についてメモしておきます。

html5とamp htmlにおける画像の違い

html5で画像を表示するときは

<img src="" alt="">

imgタグで囲い、altを指定して、大きさはwidthやcssで設定します。私はサイトをレスポンシブ化するために、cssで画像の幅を決めるようにデザインしております。

さて、この画像をamp htmlに対応させるときにまずやることは

<img → <amp-img

imgタグでなく、amp-imgタグで囲うようにします。これは色んなサイトで解説されているので、簡単なはずです。

あとはamp-imgで横と縦の幅を設定するためにwidthとheightが必須ですね。デザインに関しては初期設定ではlayout="fixed"となっているので、widthとheightの値がそのまま使用されます。

しかし私のように「ampはスマホページ専用だし、とにかく記事中の画像はlayout="responsive"で簡潔に対応させたい」と思っていると、失敗することがあります。

「画像を正方形にしたのに、実際にampページを確認すると縦長になってる!」みたいになります。というか私の場合そうなりました。

AMPテストでもとくにエラーはないのに...って原因不明になるんですよ。てかなりました。

じゃぁこの原因は何なのか?と言うと「</amp-img>」がないだけです。

html5ではimgタグを「/」で閉じる必要はありません。しかしamp-htmlになると画像は「/」で閉じる必要があるのです。

layout="responsive"がうまくいかない場合は「</amp-img>」の存在を疑ってみてください。

あとがき

ちなみに「</amp-img>」の存在を知るのに4時間ほどかかりました。いや~知らないって恐ろしいですね...

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです