ショートコード

Mon, 26 Jan 2026 00:00:00 +0000

Stack テーマには、コンテンツを強化するためのカスタムショートコードがいくつか用意されています。

引用 (Quote)

quote ショートコードを使用すると、著者、出典、URL を含む引用を表示できます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
― 有名な人, 彼らが書いた本

使い方

1
2
3

{{< quote author="著者名" source="出典タイトル" url="https://example.com" >}}
ここに引用内容を入力します。
{{< /quote >}}

ビデオ (Video)

video ショートコードを使用すると、セルフホストまたはリモートのビデオファイルを埋め込むことができます。

Your browser doesn't support HTML5 video. Here is a link to the video instead.

使い方

`1`	`{{< video src="https://example.com/video.mp4" >}}`

Bilibili

Bilibili からビデオを埋め込みます。av および bv ID の両方をサポートしています。

使い方

`1`	`{{< bilibili "BV1634y1t7xR" >}}`

YouTube

Hugo 内蔵の YouTube ショートコードです。

使い方

`1`	`{{< youtube ZJthWmvUzzc >}}`

騰訊視頻 (Tencent Video)

Tencent Video からビデオを埋め込みます。

使い方

`1`	`{{< tencent "u00306ng962" >}}`

GitLab Snippet

GitLab からスニペットを埋め込みます。

使い方

`1`	`{{< gitlab 2349278 >}}`

図表 (Diagrams)

Stack は Mermaid 図表を標準でサポートしています。

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

使い方

Mermaid コードを、言語を mermaid に設定したコードブロックで囲みます。

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

写真ギャラリー

Mon, 26 Jan 2026 00:00:00 +0000

Stack テーマには、写真ギャラリー機能が内蔵されています。複数の画像を並べて配置するだけで、美しいギャラリーを作成できます。

ギャラリーの例

仕組み

ギャラリーは Photoswipe と独自の内部スクリプトによって動作します。画像の縦横比に基づいて、最適なレイアウトが自動的に計算されます。

ギャラリーを作成するには、同じ行（または同じ段落）に複数の画像を配置するだけです。

構文

1
2
3

![画像 1](image1.jpg)  ![画像 2](image2.jpg) 

![画像 3](image3.jpg)  ![画像 4](image4.jpg)

注意: Markdown で画像が同じ行に保持されるように、画像の間には 2 つのスペースを入れる必要があります。

ギャラリーの構文は Typlog にインスパイアされています。

ドキュメント on Hugo Theme Stack