はじめに

Hugoで作成した記事の画像を拡大させたいと思ったので、調査をした。

Janeでfigureショートコードを使用する

下記のページを見ると、 figure というショートコードがあるらしい。
参考: https://ajonathan.com/post/image-preview/

これを使用してみる。

通常の画像

コードは下記。

![IMG_4159.jpeg](/image/tech/tips/use-figure-code-jane/IMG_4159.jpeg)

figure ショートコードを使用する。

< figure src="/image/tech/tips/use-figure-code-jane/IMG_4159.jpeg" title="ラーメン" size="1024x768" >

おまけ: ギャラリー

{{ < gallery dir="/image/tech/tips/use-figure-code-jane/" /> }}

< gallery dir="/image/tech/tips/use-figure-code-jane/" />

ギャラリーを使うとこのようにディレクトリ以下の画像をギャラリー風に表示できる。

参考

• Image Preview | Jane
  https://ajonathan.com/post/image-preview/

おわりに

Hugo+Janeのテーマ内で使用できるショートコードで画像を拡大する方法を学んだ。
以前ブログとして利用していた、Hexoでは標準でlightboxがあったような。
今度は lightbox使えるようにしたいなあ。