チラシデザイン、動画、wordpressでホームページ制作は横浜の日本一店長のアイシープへ

日本一店長のチラシデザインと動画&wordpress

AMP対策【amp-imgタグの使い方】

221 views
約 3 分
AMP





はじめに



「AMP」には、独自のタグの使用が多いです。

中でも「imgタグ」でなくAMP専用の「amp-imgタグ」を使わなければいけないことでしょう。

そこで、主な使い方を備忘録としてメモしておきます。


amp-imgで画像サイズを指定する場合、layout="fixed"が必要




amp-imgで画像サイズを指定する場合、layout="fixed"が必要になります。


<amp-img alt="○○○○○○○○"
src="https://○○○○○○○○"
width="30"
height="30"
layout="fixed">
</amp-img>


と書かなければいけません。

widthとheightは必須です。

layout="fixed"がないと、画像が横幅いっぱいに広がってしまいますので気をつけましょう。


layout="responsive"は自動的に幅100%で伸縮する




layout="responsive" を指定するだけで、縦横比を保ちながら画面幅に応じて自動的に伸縮表示されます。


<amp-img alt="○○○○○○○○"
src="https://○○○○○○○○"
width="30"
height="30"
layout="responsive">
</amp-img>


widthとheightの数値は比率でしかありません。

ここで言うと、30:30 なので横縦は1:1の比率と言うことになります。

入れた縦横の数字の比率で自動的に幅100%で伸縮するようになります。


amp-accordionamp-imgの組み合わせの注意事項




amp-accordionを使用する際に気をつけなければいけない点がありました。

当ブログの記事にも書きましたが、



抜粋します。



1.amp-accordion要素の直接の子要素は、section要素でなければいけません。
2.section要素は、必ず2つの子要素を持たなければいけません。
3.section要素の1つ目の子要素は開閉ボタン。h1、h2、h3、h4、h5、h6、headerのいずれかの要素でなければいけない。
4.section要素の2つ目の子要素はコンテンツの内容。
5.section要素はいくつでも設置できる。
6.section要素にexpanded属性を付けると、そのコンテンツはデフォルトで開いた状態になる。
7.section要素が1つだけしかないのにexpanded属性を付けると、文法エラーになりアコーディオンは表示されない。
8.開閉状態はsessionStorageに保存される。保存を拒否するにはdisable-session-states属性を付ける。



3の開閉ボタンですが、画像を使用する場合もちろんamp-imgを使用して書き込むのですが、画像のサイズが大きいとうまく作動しないようです。

はっきりとした数値はイマイチ確認できないのですが、widthが640pxだと動きません。

しかし、半分の320pxだと作動するようです。

widthの数値に制限があるようです。

2019年8月までは数値制限がなかったように思われます。

9月に入っていきなりアコーディオンが開かなくなりました。

注意してみてください。












Comment On Facebook