HUGOとフルAMPで究極のブログ爆速化 その4~Lightboxの設置~

Share on:

この記事は約2 分で読めます。

目次

今回はHUGOブログAMPページでLightbox機能を実装してみたいと思います。

Lightboxとは上の画像をクリックしたときのように、対象がズームアップして表示される機能です。

本HUGOブログはAMP公式テーマ一覧からテンプレートを選びカスタマイズして使っています。

LightboxもAMP公式のAMPコンポーネントを利用して実装します。

AMPコンポーネントの読み込み

AMPページではJavascriptやjQueryが使えません。

そこでLightboxを実装するためにAMPが用意してくれているAMPコンポーネントを読み込みます。

Lightbox系のAMPコンポーネントはいくつかあります。

それぞれ仕様や用途がありますので詳しくはリンクをたどって確認してください。

今回は、単に画像を大きく表示させたいだけですので、3番目のamp-lightbox-galleryを使います。

早速、amp-lightbox-galleryコンポーネントを<head>~</head>に貼り付けます。

1<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>

amp-imgタグへの実装

AMPコンポーネントを記述したらあとは対象の画像の<img>タグに一言lightboxを加えるだけです。

1<img src="/images/hugo-amp-theme-no4.jpg" width="720" height="480">

(上の画像の例です)

このようにamp-lightbox-galleryコンポーネントが一番カンタンにLightboxを実装できるのではないでしょうか?

是非お試しください。