- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2021-11-29T07:52:40+09:00;2020-05-03T21:32:54+09:00","default:tgoto","tgoto")
&tag(pukiwiki);#author("2020-05-04T09:46:46+09:00;2020-05-03T21:32:54+09:00","default:tgoto","tgoto")
#ref(https://oncologynote.com/img/d310f6b14d-small.jpg,nolink)
#author("2023-01-09T18:00:51+09:00;2020-05-03T21:32:54+09:00","","")
#ref(https://oncologynote.jp/img/d310f6b14d-small.jpg,nolink)
*AMPのsidebarでamp-imgの画像が出ないときの対処法 [#u36d7041]
*AMPのsidebarでamp-imgの画像が出ないときの対処法 [#h7851ed0]
amp-imgの画像はスクロールして表示範囲に近づいたときに読み込みが起こる遅延ローディング機能を備えているのですが、サイドバーに含まれている画像は上下スクロールを伴わないために表示範囲に入っても表示されないという問題がありました。
**AMP-sidebarを使うときの問題点 [#k1b7cf21]
**AMP-sidebarを使うときの問題点 [#c5324ef4]
AMP-sidebarスクリプトはAMPページに簡単にサイドバーを実装できる上にamp-img画像の読み込みに関する問題も解決しているのですが、トグルボタンを<body>直下に置く必要があるなど設置するHTMLの制約が厳しいものでした。
このサイトで以前から使っていたサイドバーのトグルとなるボタンはdisplay:flexで配置した領域にあったため、<body>直下にトグルボタンを設置するというAMP-sidebarの条件をクリアできず、AMP-sidebarが表示できないという問題にぶちあたっていました。
**このサイトで使っていたサイドバー [#z28183be]
**このサイトで使っていたサイドバー [#h9921ba8]
2020年5月時点にこのサイトに設置されていたサイドバーは、AMP対応するためにjavascript（jqueryなども含む）を使わずにHTMLとCSSのみで使えるハンバーガーメニューを使ったものでした。
#ogpi(https://oncologynote.com/?14f584878f)
#ogpi(https://oncologynote.jp/?14f584878f)
AMPサイトはCSSは50kB以内であればほぼ普通に使えるのでサイドバーとしてはこれで問題なく使えます（このリンク先記事で紹介されているサイドバーはデフォルトのz-indexが9999と非常に大きな値ですが、z-indexが100以内に収まるようにしないとAMPキャッシュの表示が崩れるという問題があるためz-indexは低い数字に書き換える必要があります）。
*解決策 [#ga5042ae]
*解決策 [#hd8df2bf]
amp-imgを使わなくてもAMPページで画像を表示するために、CSSでbackground-imageを使うという方法があります。
**スタイルシート [#web6b875]
**スタイルシート [#k56b468b]
> .bglogo{
> width:32px;
> height:32px;
> background-size: cover;
> background-repeat: no-repeat;
> background-image:url(https://example.com/example.jpg);
> }
**HTML [#j128383c]
**HTML [#hc764dac]
> <div class="bglogo" align="center"></div>
[[AMP対応>pukiwikiカスタマイズ箇所/AMP対応]]に記載したようなAMP対応を進める上で、AMPページで画像を表示するにはamp-imgを使うしかないと思い込みがちですが、背景画像を用いればAMP画像でスクロールを伴わなくても画像を表示させることができるようになるのです。
#ogpi(https://oncologynote.com/?78d3e6b858)
#ogpi(https://oncologynote.jp/?78d3e6b858)
#pcomment