Hugo Shortcode に関する詳細な説明については、公式ドキュメントを参照してください。
ショートコードを使用すると、シンプルなコードスニペットを使って、動画、ツイート、引用ブロックなどの複雑な要素を記事にすばやく埋め込むことができます。
詳細の折りたたみ (Details)#
前の記事で紹介した折りたたみ効果と機能は似ていますが、これは Hugo がネイティブでサポートしている方法です。
書き方：
{{< details summary="詳細を見るにはクリック" >}}
ここは**隠されている**コンテンツです。
{{< /details >}}効果：
詳細を見るにはクリック
ここは隠されているコンテンツです。
画像の説明 (Figure)#
Figure は、説明文付きの画像を埋め込むために使用されます。標準の Markdown 構文と比較して、キャプション、リンク、タイトルをより便利に追加できます。
書き方：
{{< figure src="https://gohugo.io/img/hugo-logo.png" title="Hugo Logo" caption="これは Hugo の公式アイコンです" alt="Hugo Logo Alt" link="https://gohugo.io" >}}効果：
ソーシャルメディア埋め込み (Instagram)#
Instagram は、記事内に単一の投稿の表示カードを埋め込むために使用されます。
書き方：
{{< instagram C8lDkcbSeqF >}}効果：
QRコード (QR Code)#
QR は、指定されたコンテンツのQRコードを記事内で直接生成して表示するために使用されます。
書き方：
{{< qr >}}
https://blog.aomori446.com
{{< /qr >}}効果：
パラメータ (Param)#
Param を使用して、フロントマターまたはサイト設定のパラメータをコンテンツに挿入します。
書き方：
front matter に以下のパラメータを挿入します：
params:
kimochi: oshienaiそして記事内に挿入します：
今の私の気持ちを当ててみて：{{% param "kimochi" %}}です。効果：
今の私の気持ちを当ててみて：oshienaiです。
内部ページ参照 (ref & relref)#
ref と relref は、サイト内の他のページへのリンクを参照するために使用されます。パスを直接記述するのと比較して、この方法はより安全です。参照したページが存在しない場合、Hugo はビルド時にエラーを出して警告してくれるからです。
ref：絶対パスリンクを生成します。relref：相対パスリンクを生成します（推奨）。
書き方：
[最初のチュートリアルにジャンプ]({{< relref "20260116001-ja.md" >}})効果：
ソーシャルメディア埋め込み (X / Twitter)#
X (旧 Twitter) は、記事内に単一のツイートの表示カードを埋め込むために使用されます。
書き方：
{{< x user="sakuramiko35" id="2004207374274597285" >}}効果：
#さくらみこ新衣装XmasLIVE📷
— さくらみこ🌸1st Album『flower rhapsody』発売中 (@sakuramiko35) December 25, 2025
ハッシュタグでお気に入りショット
みんなみせてくれにぇ₍₍ ꒰ঌ( -᷄ ᴗ -᷅ )໒꒱ ₎₎🎄
本編🎀 https://t.co/rvYqFRIr0y https://t.co/PoFx4dy446 pic.twitter.com/sNEqNjSFUL
動画埋め込み (YouTube)#
YouTube は、YouTube 動画プレーヤーを記事に直接埋め込むために使用されます。
書き方：
{{< youtube U2jl3QIoVws >}}効果：