画像したい(/layouts/shortcodes/figure.html
)
{{< figure src="サムネイル画像の相対パス" link="オリジナル画像の相対パス" loading="lazy" >}}
本文中に画像を挿入する場合は、ビルトインされているfigureショートコードを使います。 上記サンプルは、次のHTMLに変換されます。
<figure>
<a href="オリジナル画像の相対パス">
<img src="サムネイル画像の相対パス" loading="lazy">
</a>
</figure>
figure
ショートコードは引数を取ることができます。
詳細はfigure.htmlのソースを読むのが一番です。
注釈
画像のパスは相対パスで指定したほうがよいと思います。 その際の相対パスは、ビルド後のディレクトリ構造を想定したパスにします。
たとえば次のようなディレクトリ構造を持っている場合、
|-- static/
| |-- images/members.png
|-- content/
|-- about.ja.md
|-- about.en.md
日本語コンテンツ(content/about.ja.md
)は次のように書き
// $BaseURL/about/index.html から $BaseURL/images/members.png への相対パス
{{< figure src="../images/members.png" >}}
英語コンテンツ(content/about.en.md
)は次のように書く必要があります。
// $BaseURL/en/about/index.html から $BaseURL/images/members.png への相対パス
{{< figure src="../../images/members.png" >}}
サイズしたい
{{< figure
src="画像の相対パス"
width="80%"
loading="lazy"
>}}
<figure>
<img src="画像の相対パス" width="80%" loading="lazy">
</figure>
width
、height
、loading
を使ってimg
要素の属性を指定できます。
画像のサイズは幅か高さのどちらか片方を指定するのがよいです。
大きな画像を使う場合は、遅延ローディングを有効にするとよいと思います。
キャプションしたい
{{< figure
src="サムネイル画像の相対パス"
link="オリジナル画像の相対パス"
loading="lazy"
title="画像のタイトル"
caption="画像のキャプション(Markdown記法OK)"
attr="関連リンク(Markdown記法OK)"
attrlink="関連URL"
>}}
title
、caption
、attr
、attrlink
の引数を追加して、画像キャプション(figcaption
)を表示できます。
上記のサンプルは次のHTMLに変換されます。
<figure>
<a href="オリジナル画像の相対パス">
<img src="サムネイル画像の相対パス" loading="lazy">
</a>
<figcaption>
<h4>画像のタイトル</h4>
画像のキャプション
<a href="関連URL">関連リンクの説明</a>
</figcaption>
</figure>
別ウィンドウしたい
{{<figure
src="画像の相対パス"
link="外部URL"
target="_blank"
rel="noopener"
>}}
target
、rel
を使ってlink
を開く動作を指定できます。
外部URLを開く場合はtarget="_blank" rel="noopener"
をセットで指定し、別ウィンドウ(タブ)で開くようにするとよいです。
link
がない場合はHTMLに変換されません。
<figure>
<a href="外部URL" target="_blank" rel="noopener">
<img src="画像の相対パス">
</a>
</figure>
クラスしたい
{{< figure
src="画像の相対パス"
class="クラス名"
>}}
class
を使ってクラス名を指定できます。
カスタムCSSを適用できます。
<figure class="クラス名">
<img src="画像の相対パス">
</figure>