サイト情報タグ
{{TITLE}}: 独自タグテスト （ページタイトル）{{FULL_TITLE}}: 独自タグテスト - 🍊mikanBox （ページタイトル - サイトタイトル）{{UPDATE_DATE}}: 2026-03-27 （更新日）{{UPDATE_DATE:JP}}: 2026年3月27日 （更新日・日本語）{{UPDATE_DATE:SLASH}}: 2026/3/27 （更新日・/区切り）{{IS_NEW:30}}: new （N日以内 new、それ以外は空）{{DESCRIPTION}}:mikanBox独自タグの動作確認ページ （ページ概要）{{KEYWORDS}}: test, tags （ページのキーワード）{{OGP_IMAGE}}: https://yoshihiko.com/mikanbox/demo/media/mikanBox.jpg （ページのサムネール・OGP画像のURL）{{PAGE_URL}}: https://yoshihiko.com/mikanbox/demo/test_tags （ページのフルURL）{{SITE_URL}}: https://yoshihiko.com/mikanbox/demo （サイトのルートURL）{{SITE_NAME}}: 🍊mikanBox （サイトタイトル）{{SITE_DESCRIPTION}}: AI時代のパーツ組み立て型・超軽量CMS （サイト共通の概要）{{SITE_OGP_IMAGE}}: https://yoshihiko.com/mikanbox/demo/media/mikanBox.jpg （サイト共通のOGP画像のURL）
画像タグ {{IMAGE:imageFileName}}
例：{{IMAGE:mikanBox_plan1.jpg}}：mikanBox_plan1.jpgを表示
ファイル名を指定するのみ、パスは意識しなくてもよい。
コンポーネント埋め込み {{COMPONENT:componentID}}
例：{{COMPONENT:_footer}}}：_footerコンポーネントを埋め込み
CSSを含めて読み込み、スコープ化されていて、他に影響を与えない。
ナビゲーション（リスト形式のファイル一覧）NAV_LINKS
全ページ {{NAV_LINKS:all}}
ページリストを「表示順」の順に表示、0より小さいものは表示しない。
現在のページには .active のclassが着くので、消したり、強調したりできる。黄色の背景で強調。
カテゴリ指定のないページのリンクのみ {{NAV_LINKS}}
カテゴリ絞り込み {{NAV_LINKS:category}}
例：{{NAV_LINKS:coffee}}：coffeeカテゴリのみ
カード形式のファイル一覧 NAV_CARDS
全ページ {{NAV_CARDS:all}}
「表示順」の順、0より小さいものは表示しない。
現在のページには .active のclassが着くので、消したり、強調したりできる。オレンジの枠で強調。
カテゴリ絞り込み {{NAV_CARDS:category}}
例：{{NAV_CARDS:gallery_item}}：coffeeカテゴリのみ
デザイン指定 {{NAV_CARDS:category:componentID}}
指定したデザインでカードを表示
「商品」カテゴリのページを card_template コンポーネントで一覧表示。
カード内の CATCH・PRICE・BADGE は各ページの DATAブロックから取得:
NAV_CARDS のコンポーネント内で使えるタグ
{{TITLE}}: 独自タグテスト （ページタイトル）{{UPDATE_DATE}}: 2026-03-27 （更新日）{{UPDATE_DATE:JP}}: 2026年3月27日 （更新日・日本語）{{UPDATE_DATE:SLASH}}: 2026/3/27 （更新日・/区切り）{{IS_NEW:30}}: new （N日以内 new、それ以外は空）{{DESCRIPTION}}:mikanBox独自タグの動作確認ページ （ページ概要）{{OGP_IMAGE}}: https://yoshihiko.com/mikanbox/demo/media/mikanBox.jpg （ページのサムネール・OGP画像のURL）{{PAGE_URL}}: https://yoshihiko.com/mikanbox/demo/test_tags （ページのフルURL）{{IS_ACTIVE}}: {{IS_ACTIVE}} （今見ているページかどうか）{{POST_MD::key}}}: } （埋め込まれたデータの表示）{{POST_MD::#rowID:key}}: （埋め込まれた表形式のデータの表示）
例：{{NAV_CARDS:gallery_item:sample_card_data}}
他ページのMarkdownの埋め込み {{POST_MD:pageID}}
例：{{POST_MD:coffee/coffee_gallery1}}
↓この下の行から
↑この上の行まで
外部サイトのページのMarkdownの埋め込み {{EXT_MD:url}}
GitHubのデータなどを埋め込んで表示することができる。
セキュリティ上、JavaScriptは機能しない。
{{EXT_MD:https://raw.githubusercontent.com/yoshihik0/testData/main/md-test.md}}
↓この下の行から
GitHub の MarkDown
この部分は GitHub 上の MarkDown ファイルのデータです。
GitHub でデータを更新すると、ここの文章も更新されます。
GitHub は AI とも相性がいいので、AI を活用した運用も行えます。
↑この上の行まで
データの定義 {{DATA:key}}値{{/DATA}}
WordPressのカスタムフィールドのように、項目名をもったデータを定義できる
{{DATA:key}}値{{/DATA}} : データ定義（表示）
{{DATA:key:GHOST}}値{{/DATA}} : データ定義（非表示）
例：
Programming PHP
著者: 山田太郎
価格: ¥2800
著者: {{DATA:AUTHOR}}山田太郎{{/DATA}}
{{DATA:ISBN:GHOST}}978-1234567890{{/DATA}}
という形式でデータを定義。
ISBNはGHOSTなので非表示。
定義されたデータの表示
ページ内のデータを表示 {{POST_MD::key}}
例：
{{POST_MD::BOOK_TITLE}}
{{POST_MD::AUTHOR}}
{{{POST_MD::ISBN}}
- タイトル: Programming PHP
- 著者: 山田太郎
- ISBN: 978-1234567890
他ページのデータを表示 {{POST_MD:pageID:key}}
例：
{{POST_MD:coffee/coffee_gallery1:book}}
{{POST_MD:coffee/coffee_gallery1:author}}
外部サイトのデータを表示 {{EXT_MD:url:key}}
記述例：
{{EXT_MD:https://raw.githubusercontent.com/yoshihik0/testData/main/data-test.md:BOOK}}
{{EXT_MD:https://raw.githubusercontent.com/yoshihik0/testData/main/data-test.md:AUTHOR}}
- BOOK: 坊ちゃん
- AUTHOR: 夏目漱石
データベースの定義 {{DATAROW:rowID}} {{DATA:key}}値{{/DATA}} {{/DATAROW}}
{{DATAROW:menu1}} ：menu1というエクセルでいえば行
{{DATA:ITEM}}商品A{{/DATA}} ：ITEM=商品A と定義
{{DATA:PRICE}}1000{{/DATA}} ：PRICE=1000 と定義
{{/DATAROW}}
{{DATAROW:menu2}} ：menu2というエクセルでいえば行
{{DATA:ITEM}}商品B{{/DATA}} ：ITEM=商品A と定義
{{DATA:PRICE}}500{{/DATA}} ：PRICE=500 と定義
{{/DATAROW}}
データベースのデータを表示
ページ内のデータベースのデータを表示 {{POST_MD::#rowID:key}}
{{POST_MD::#menu1:ITEM}} : 商品A
{{POST_MD::#menu1:PRICE}} : 1000
{{POST_MD::#menu2:ITEM}} : 商品B
{{POST_MD::#menu2:QTY}} : 500
他ページのデータベースのデータを表示 {{POST_MD:pageID#rowID:key}}
{{POST_MD:coffee/coffee_gallery1#test:author}} :
{{POST_MD:coffee/coffee_gallery2#test:author}} :
{{POST_MD:coffee/coffee_gallery3#test:author}} :
外部サイトのデータベースのデータを表示 {{EXT_MD:url#rowID:key}}
記述例：
{{EXT_MD:https://raw.githubusercontent.com/yoshihik0/testData/main/db-test.md#alpha:NAME}}
外部ファイルのDATAROW:alphaのデータ:
- 商品名: alpha
- 価格: ¥2,980
- キャッチ: シンプルで使いやすい定番品
外部ファイルのDATAROW:betaのデータ:
- 商品名: beta
- 価格: ¥5,800
- キャッチ:
CSSスコープテスト
この下のコンポーネントのCSSが、ページ全体のh2やリストに影響しないことを確認:
コンポーネント内の見出し
このp.noteのスタイルはこのコンポーネント内だけに適用されるはずです。
- リスト項目1
- リスト項目2
上のコンポーネントの外のh2（色が変わっていないはず）
通常の段落（背景色がないはず）