はじめに

「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-accordionとamp-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月に入っていきなりアコーディオンが開かなくなりました。
注意してみてください。