Hugo で画像にキャプションを付ける

2023年11月19日 03:45

環境：Hugo（heyo テーマ）

Hugo での新規投稿、画像を含んだ投稿について書いた。

上記リンクでも書いたとおり、僕は画像の大きさを手軽に調整するために HTML で画像を表示させている。

さらに画像を投稿に含めた際は画像の下にキャプションを付けたいことがある。

そういう場合、例えば以下のように書いたとしよう。

<img src="image.jpg" width="80%">
キャプション

すると Hugo で出力すると画像の右側にくっついた状態でキャプションが表示されてしまう。

ではキャプションを付けるための、figure および figucaption を使うとどうなるだろう。

<figure>
<img src="image.jpg" width="80%">
<figcaption>キャプション</figcaption>
</figure>

この場合は hugo server コマンドでプレビューした際はうまくキャプションとして表示されたが、hugo コマンドで出力すると　figure および figucaption が無視された状態になってしまった。

単に画像の下にテキストを置くだけでもいいのでは、と思った。画像のコードのあとに空行を入れれば画像の右側にキャプションがくっつくことがない。

<img src="image.jpg" width="80%">

キャプション

しかし以下のようにさらに画像を連続して表示させた場合、画像１とキャプションとの行間が、画像２とキャプションの行間より微妙に広まってしまう。まるで画像２のキャプションのように見える。

画像１

キャプション

画像２

これを解決する方法は、以下のように <br> タグを使って改行することだ。画像１に寄せてキャプションを付与できた。

<img src="image.jpg" width="80%"><br>
キャプション

Markdown does not render in figure shortcode (#43) · Issues · GitLab Pages examples / hugo · GitLab
https://gitlab.com/pages/hugo/-/issues/43

HTMLで画像下部にキャプションを付ける方法/figureタグ・figcaptionタグの使い方 | すなぎつ
https://sunagitsune.com/htmlfigcaption/

この記事が気に入ったらサポートをしてみませんか？