Files
hextra/exampleSite/content/docs/guide/shortcodes/callout.ja.md
Ludovic Fernandez f4d75a4e5b feat(callout): revamp of the callouts (#767)
* feat(callout): revamp of the callouts

* fix: doc

* chore: refactor gh alert

* feat: same colors on callouts and gh alerts

* docs: more relevant examples

* docs: i18n

* docs: update existing callouts
2025-08-21 23:31:16 +01:00

150 lines
4.6 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: コールアウトコンポーネント
linkTitle: コールアウト
aliases:
- callouts
prev: /docs/guide/shortcodes
---
読者に重要な情報を表示するための組み込みコンポーネントです。
<!--more-->
> [!NOTE]
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
> これはMarkdown構文を活用してコールアウトをレンダリングするため、コンテンツの移植性と可読性が向上します。
## 例
{{< callout >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
{{< callout type="info" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
{{< callout type="warning" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
{{< callout type="error" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
{{< callout type="important" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
### デフォルト
{{< callout >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout */>}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
### Info
{{< callout type="info" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
### Warning
{{< callout type="warning" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout type="warning" */>}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
### Error
{{< callout type="error" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
### Important
{{< callout type="important" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout type="important" */>}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
### カスタムアイコン
{{< callout icon="sparkles" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout icon="sparkles" */>}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
{{< callout type="important" icon="sparkles" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout type="important" icon="sparkles" */>}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
### 絵文字
{{< callout emoji="🌐" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
{{< callout type="info" emoji="" >}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{< /callout >}}
```markdown
{{</* callout type="info" emoji="" */>}}
**コールアウト** は注目を集めることを目的とした短いテキストです。
{{</* /callout */>}}
```
## オプション
| パラメータ | 説明 |
|---------|---------------------------------------------|
| `type` | コールアウトのタイプ。(デフォルト、`info``warning``error`) |
| `emoji` | コールアウトの前に表示される絵文字。 |
| `icon` | コールアウトの絵文字 (タイプに関連、またはカスタム絵文字にすることもできます)。 |