【AMP】amp-imgをクリックを無効にする【備忘録】

2019年 8月 15日  2019年 8月 20日

【AMP】amp-imgをクリックを無効にする【備忘録】

AMPで大きなサイズの画像を使ってヘッダーなどを作っていたのですが、

クリックして、ギャラリーモードになってしまう不具合があったのでメモ書きです

auto-lightboxを無効にして対応する

amp-imgはリサイズなどを掛けている場合、クリックでlightboxを表示してくれます。

これはこれで便利なのですが、ヘッダーやアイキャッチやアイコンに使われると、いらっと来ます。

無理やり制御しましょう!

<amp-img class="kadlu-hero-background" src="{{ .Site.Params.mainImage | absURL }}" width="1" height="1"
            alt="TOP image" layout="responsive" data-amp-auto-lightbox-disable ></amp-img>

Hugoコードが入ってしまっているのは勘弁してください。

data-amp-auto-lightbox-disableを付けることで、自動的にギャラリーが追加されるのを制御できます