AMPのサイドバーで画像が表示されないとき

AMPのsidebarでamp-imgの画像が出ないときの対処法

amp-imgの画像はスクロールして表示範囲に近づいたときに読み込みが起こる遅延ローディング機能を備えているのですが、サイドバーに含まれている画像は上下スクロールを伴わないために表示範囲に入っても表示されないという問題がありました。

AMP-sidebarを使うときの問題点

AMP-sidebarスクリプトはAMPページに簡単にサイドバーを実装できる上にamp-img画像の読み込みに関する問題も解決しているのですが、トグルボタンを<body>直下に置く必要があるなど設置するHTMLの制約が厳しいものでした。

このサイトで以前から使っていたサイドバーのトグルとなるボタンはdisplay:flexで配置した領域にあったため、<body>直下にトグルボタンを設置するというAMP-sidebarの条件をクリアできず、AMP-sidebarが表示できないという問題にぶちあたっていました。

このサイトで使っていたサイドバー

2020年5月時点にこのサイトに設置されていたサイドバーは、AMP対応するためにjavascript（jqueryなども含む）を使わずにHTMLとCSSのみで使えるハンバーガーメニューを使ったものでした。

レスポンシブメニュー

pukiwikiカスタマイズ箇所/2019のカスタマイズに加えて、モバイルブラウザなど幅が狭い場合のみ表示されるレスポンシブメニュー（ハンバーガーメニュー）を設置した。これはモバイルブラウザではサイトバーをdysplay:none;で非表示としているが、そうなるとトップページやサイト内検索などへのリンクが消えてしまうためにサイト内移動が不

AMPサイトはCSSは50kB以内であればほぼ普通に使えるのでサイドバーとしてはこれで問題なく使えます（このリンク先記事で紹介されているサイドバーはデフォルトのz-indexが9999と非常に大きな値ですが、z-indexが100以内に収まるようにしないとAMPキャッシュの表示が崩れるという問題があるためz-indexは低い数字に書き換える必要があります）。

解決策

amp-imgを使わなくてもAMPページで画像を表示するために、CSSでbackground-imageを使うという方法があります。

スタイルシート

.bglogo{

width:32px;

height:32px;

background-size: cover;

background-repeat: no-repeat;

background-image:url(https://example.com/example.jpg);

}

HTML

<div class="bglogo" align="center"></div>

AMP対応に記載したようなAMP対応を進める上で、AMPページで画像を表示するにはamp-imgを使うしかないと思い込みがちですが、背景画像を用いればAMP画像でスクロールを伴わなくても画像を表示させることができるようになるのです。

AMP対応

これまでにpukiwikiカスタマイズ箇所/2019で示したように、自分が使用しない多数のプラグインを犠牲にしてでもPukiwikiの徹底的な軽量化と現代化を図ってきたところですが、当サイトのようにpukiwikiをベースにしているが個人で編集するのみで多人数編集を前提としていない場合は、ここまで来るとGoogleが提唱するAMP（A

この記事に対するコメント

このページには、まだコメントはありません。

更新日：2020-05-03 閲覧数：1178 views.