コンポーネント

アラート

● 利用可能 GitHub のアラートが、言語に合った見出し付きのコールアウトになります。種類は note、tip、important、warning、caution の 5 つです。スクリーンリーダーはノート（role="note"）として読み上げます。

> [!NOTE]
> 流し読みでも知っておくべき有用な情報です。

> [!TIP]
> より良く、より簡単に進めるための助言です。

> [!IMPORTANT]
> 目的を達成するために知っておくべき重要な情報です。

> [!WARNING]
> 問題を避けるためにすぐ注意が必要な緊急の情報です。

> [!CAUTION]
> 特定の操作のリスクや悪い結果について注意を促します。

表示結果

注記

流し読みでも知っておくべき有用な情報です。

ヒント

より良く、より簡単に進めるための助言です。

重要

目的を達成するために知っておくべき重要な情報です。

警告

問題を避けるためにすぐ注意が必要な緊急の情報です。

注意

特定の操作のリスクや悪い結果について注意を促します。

内容のあるアラート

アラートにはリストやコードも入れられます。マーカーの行にはほかの文字を書かないでください。

> [!TIP]
> 公開する前に:
>
> - `modootoday-check` を実行する
> - `bundle exec jekyll serve` でプレビューする

表示結果

ヒント

公開する前に:

• modootoday-check を実行する
• bundle exec jekyll serve でプレビューする

バッジ

● 利用可能 決まった接頭辞のコードスパンがバッジになります。status（available、partial、planned）と tag があります。ステータス記号はスクリーンリーダーから隠し、名前を読み上げます。

`status:available` `status:partial` `status:planned`

`tag:beta`

表示結果

● 利用可能 ◐ 一部実装 ○ 予定

beta

キーボードキー

● 利用可能 kbd とコロンで始まるコードスパンがキーボードキーになります。キーは空白なしの + でつなぎます。

`kbd:Ctrl+K` か `kbd:/` で検索を開きます。

表示結果

Ctrl+K か / で検索を開きます。

図

● 利用可能 画像だけの段落のあとに強調だけの段落が続くと、キャプション付きの図になります。代替テキストは必須です。

![左の Markdown ソースが右のスタイル付きページになる](../../assets/images/sample.svg)

*左が Markdown、右が表示結果です。*

表示結果

表

● 利用可能 GFM の表は、狭い画面ではページからはみ出さず横にスクロールします。

| キー | 既定値 | 説明 |
|---|---|---|
| `color_scheme` | `auto` | OS に合わせるか、ライトかダークに固定する |
| `badges` | `true` | ステータスのコードスパンをバッジに変換する |

表示結果

コードブロック

● 利用可能 フェンスのコードブロックは構文が色分けされ、1 行目の末尾にコピーボタンが付きます。長い行はスクロールし、キーボードでもブロックに移動できます。

```ruby
Jekyll::Hooks.register :site, :post_write do |site|
  puts "Built #{site.pages.size} pages"
end
```

表示結果

Jekyll::Hooks.register :site, :post_write do |site|
  puts "Built #{site.pages.size} pages"
end

コードのタイトルと diff

● 利用可能 フェンスのコードブロックの直前に、file とコロンで始まるコードスパンだけの行を置くと、ブロックのタイトルバーになります。diff ブロックは追加行と削除行に色を付け、プラスとマイナスの記号を残します。

`file:_config.yml`

```yaml
theme: jekyll-theme-modootoday
```

```diff
- remote_theme: old/theme
+ theme: jekyll-theme-modootoday
```

表示結果

theme: jekyll-theme-modootoday

- remote_theme: old/theme
+ theme: jekyll-theme-modootoday

進捗

● 利用可能 progress とコロンのあとに 0 から 100 の整数が続くコードスパンは、値をテキストでも示すラベル付きの進捗バーになります。

翻訳 `progress:60`

表示結果

翻訳 60% 60%

埋め込み

● 利用可能 embed とコロン、https の URL、任意のタイトルからなるコードスパンだけの段落は、遅延読み込みされる 16:9 のフレームになり、読み込み中も領域を確保します。

`embed:https://modootoday.github.io/jekyll-theme-modootoday/assets/images/sample.svg サンプルページの図`

表示結果

読み込み表示とスケルトン

● 利用可能 loading または skeleton とコロンで始まるコードスパンは、スピナー、細い上部バー、プレースホルダー（text、card、image、avatar、row）になります。それぞれ role="status" とスクリーンリーダー向けの読み込みラベルが付き、利用者が視差効果を減らす設定にしていると動きません。スタイルは別のスタイルシートにあり、使うページだけが読み込みます。

`loading:spinner`

`skeleton:avatar`
`skeleton:text`
`skeleton:card`

表示結果

読み込み中…

読み込み中… 読み込み中… 読み込み中…

リスト

● 利用可能 _config.yml に modootoday.lists を書くと、通常のセクションとページに 2 つのリストスタイルが適用されます。link_chips: true は、すべての項目がリンク 1 つだけのリストをチップの行にし、titled_items: true は太字のタイトルとコロンで始まる項目にタイトルと区切りを付けます。hero: {checks: true} は、上のようにヒーローの最初のリストをチェックマークの行にします。コンポーネントのセクションのリストは元のスタイルのままです。

• インストール
• 設定
• アクセシビリティ

タイトル付きの項目:

• チップ: リンクだけのリスト
• タイトル付き項目: 太字のタイトル、コロン、続いてテキスト

ナビゲーション

● 利用可能 ヘッダーのメニューは _data/nav/main.yml から作られます。items: がある項目は広い画面でドロップダウンのグループになり、狭い画面ではメニューボタンが出ます。開いたメニューは Esc で閉じます。このページのヘッダーがその表示結果です。

- {title: Install, url: /install/}
- {title: Components, url: /components/}
- title: More
  items:
    - {title: Public API, url: /api/}

言語切り替え

● 利用可能 languages: と language_switcher: header を設定すると、ヘッダーに言語一覧を開く地球儀ボタンが出ます。言語が増えても幅は変わりません。言語名はそれぞれの言語で書かれ、現在の言語には aria-current が付きます。一覧は Esc で閉じます。このページのヘッダーの地球儀がその表示結果です。

modootoday:
  languages: [en, ko, ja]
  language_switcher: header

テーマ切り替え

● 利用可能 ヘッダーのボタンでライトとダークを切り替え、選んだ設定を記憶します。どちらかに固定するには color_scheme を使います。このページのヘッダーのボタンがその表示結果です。

modootoday:
  color_scheme: auto   # auto | light | dark

アイコンとロゴ

● 利用可能 テーマのアイコン(地球儀、太陽と月、検索、アラートの種類、コピー、編集、前後、外部リンク、パンくずの矢印)は currentColor のインライン SVG なので、ライト・ダークに追従し、追加のリクエストもありません。アイコンはスクリーンリーダーから隠し、アイコンだけのボタンには個別の名前を付けます。向きのある矢印は右から左へ書くページで反転します。logo を設定するとサイト名の前に modootoday マーク(または独自の画像)が表示され、favicon を設定すると同じ形のブラウザーアイコンが付きます。このページのヘッダーとフッターがその結果です。

modootoday:
  logo: brand        # brand | /assets/img/logo.svg
  favicon: brand     # brand | /favicon.ico

検索

● 利用可能 search.json ファイルを使うクライアント検索がヘッダーに入ります（role="search"）。Ctrl+K か / で検索欄に移動します。サイトのルートに search.json を置くと有効になります。このサイトのファイルをコピーしてください。このページのヘッダーの検索欄がその表示結果です。

パンくずリストと目次

● 利用可能 ドキュメントページには、URL から作るパンくずリストと、##・### 見出しから作る目次が付きます。目次は広い画面では横に、狭い画面では折りたたみの箱に表示されます。レイアウトが付けるので、書くソースはありません。無効にするには components から breadcrumb か toc を外します。このページの上部と横がその表示結果です。

modootoday:
  components: [callout, badge, hero, cta, card, tabs, code-copy, nav, pagination, theme-toggle]

前後のページ

● 利用可能 ナビゲーションにあるページには、ナビゲーションの順に前後のページへのリンクが付きます。隠すには front matter に pagination: false と書きます。このページの下部がその表示結果です。

---
title: Components
pagination: false
---

投稿とアーカイブ

● 利用可能 layout: post は日付、著者、タグを表示します（p.mt-post-meta）。

---
layout: post
title: Hello
date: 2026-10-30
author: Won
tags: [release]
---

ステータスの凡例