横浜のチラシデザインと動画制作編集屋さん | 日本一店長のアイシープ

日本一店長のチラシデザインと動画編集&ホームページ制作

【最新版】AMP対策

3188 views
約3分

はじめに


「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