このサイト独自のMD記法について

このサイトで記事を書く際に使用する独自の記法をご紹介。これであなたもこのサイトの著者の一人に！！

公開: 2026/09/08 00:10

きさな🍭

雑記

IVECOLOR の独自記法

IVECOLOR の独自記法

このサイトの本文は Markdown だが、標準の CommonMark／GFM には無い書き方がいくつかある。
ここでは独自の部分だけをまとめる。太字・リスト・表・脚注・コードブロックなど、
どこでも通じる記法の説明はしない。

1. マーカー `==text==`

== で囲むと <mark> になる。

最新アルバム ==STRATEGY== が出た。

中に強調を入れてもよい（==**太字**を含むマーク==）。
インラインコードやコードブロックの中では変換されない（`==code==` はそのまま）。
a == b のように前後に空白があるだけの式は変換されない。

2. 改行がそのまま反映される

行末にスペース2つを置かなくても、改行はそのまま改行として出る。

この行のあとで改行すると
次の行は改行されたまま出る。

段落を分けたいときは、これまでどおり空行を1つ入れる。

3. 日本語の約物に隣り合う強調

CommonMark では あ**「い」**う や **IVE（アイヴ）**の のように、
括弧・句読点と ** が隣り合うと強調が成立しない。このサイトでは成立する。
== のマーカーも同じ。日本語の文中で、記号の前後にわざわざ空白を入れる必要はない。

4. メディア参照 `/m/{id}`

アップロードした画像・動画・音声は、URL ではなく /m/{id} の1形だけで書く。
拡張子もサイズも書かない。配信URLは公開時に自動で埋められる。

![](/m/abcdefghijklmn)

メディア管理画面の「記法をコピー」で、この形が手に入る。
代替テキストを空にしておくと、メディアに登録した名前（または alt）が自動で入る。
自分で書きたいときは ![好きな説明](/m/abcdefghijklmn) と書けばそちらが優先される。
存在しない id を書くと、その場所に [存在しない画像] と表示される
（削除された／非公開になった／打ち間違えた場合）。

画像が単独行にあるとき

段落に画像1枚だけを置くと、figure になり、代替テキストがキャプションとして下に出る。

![ライブ会場の外観](/m/abcdefghijklmn)

文章の途中に混ぜて書いた画像はキャプションが付かず、行の中にそのまま入る。

複数枚を横に並べる `:::gallery`

:::gallery
![1枚目](/m/aaaaaaaaaaaaaa)
![2枚目](/m/bbbbbbbbbbbbbb)
![3枚目](/m/cccccccccccccc)
:::

中の画像を、それぞれキャプション付きの figure にして横スライダーに並べる。
拾うのは画像だけ。 中に書いた文章や見出しは表示されないので入れない。

5. 自前配信の動画・音声

外部サービスの埋め込みとは別物で、iframe を挟まずに <video> / <audio> を置く。

::video{src=/m/abcdefghijklmn}
::audio{src=/m/xxxxxxxxxxxxxx}

src= のかわりに id= / media= と書いてもよい。

オプション

書き方	効果
`poster=/m/…`	動画の再生前に出す静止画（動画のみ）
`loop`	繰り返し再生
`muted`	音を消して始める（動画のみ）
`autoplay`	自動再生（動画のみ）。自動的に `muted` も立つ（そうしないとブラウザが無視するため）
`caption="…"`	プレイヤーの下に出す説明

::video{src=/m/abcdefghijklmn poster=/m/yyyyyyyyyyyyyy loop caption="第1回の音源"}

caption を書かなければ、メディアに登録した名前が自動で入る。 何も出したくないときは caption=""。
再生コントロールは常に付く。読み込みは metadata だけで、開いただけで実体は落ちない。
画像を ::video に渡してもチェックはしない。書く側で種類を間違えないこと。
指定が無い／解決できないときは、[video 設定エラー: メディアの指定が無い]
[存在しない動画] [存在しない音声] [存在しないポスター画像] と表示される。

6. URL を1行だけ書くと埋め込みになる

段落に URL だけを置くと、対応サービスは埋め込みに変わる。
他のプラットフォームにコピペしても壊れないので、こちらを第一候補にする。

https://youtu.be/9qkpcLK422o

https://x.com/jack/status/20

https://www.tiktok.com/@user/video/1234567890123456789

https://www.instagram.com/p/Cxxxxxxxxxx/

対応しているのは次の形。

サービス	対応する URL
YouTube	`youtube.com/watch?v=…` / `youtu.be/…` / `youtube.com/shorts/…`
X	`x.com/{user}/status/{id}` / `twitter.com/…`
TikTok	`tiktok.com/@{user}/video/{id}`
Instagram	`instagram.com/p/{code}` / `instagram.com/reel/{code}`

判定できない URL は、ふつうのリンクのまま残る。

自サイトの記事URL → 記事カード

https://ivecolor.com/posts/sample-post-2

サムネイル・タイトル・公開日時が入ったカードになる。
存在しない記事を指すと [存在しない記事] と表示される。

7. 埋め込みディレクティブ

URL 単独行で書けない場合（行の中に置きたい、id しか手元に無い、など）はこちら。

::youtube{id="9qkpcLK422o"}
::x{id="20"}
::tiktok{id="1234567890123456789"}
::instagram{id="Cxxxxxxxxxx"}
::post{slug="sample-post-3"}

::x は ::twitter、::instagram は ::ig と書いてもよい。
::post は記事の slug を渡す（slug= のかわりに id= でも可）。
生の HTML は書けない。 <iframe> を貼っても出力されないので、必ずこの記法を使う。

8. `:::yt-sync` — 動画の再生位置に合わせて本文を切り替える

YouTube の動画を埋め込み、再生時間に合わせて下の文章を差し替えるウィジェット。

:::yt-sync{video="9qkpcLK422o"}
::cue{at="0"}

### はじめに

動画の冒頭で表示される内容。

::cue{at="1:20"}

### サビについて

1分20秒以降はこちらに切り替わる。

:::

video= に YouTube の動画IDを入れる（URL ではなく ID）。
::cue{at="…"} で区切る。次の cue までが、そのブロックの中身。
at は 90（秒）／1:30（分
）／01:02:03（時:分
）のどれでもよい。
書く順番はばらばらでもよい。時間順に並べ直される。
最初の ::cue より前に書いたものは表示されない。
中身は素の Markdown なので、見出しも画像も表も使える。
中の見出しは目次には出ない（ウィジェット内部の話なので）。
video が無いと [yt-sync 設定エラー: video が無い]、
cue が1つも無いと [yt-sync 設定エラー: cue が無い] と表示される。

9. 書けないもの・気をつけること

事項	挙動
生 HTML	出力されない。埋め込みはディレクティブで書く
`_text_` の下線	廃止。標準どおり斜体になる
`"text"` の `<q>`	廃止。引用符はそのまま文字として出る
`^text` の上付き	廃止
`--` や `"…"` の自動変換	しない。em dash が要るときは `—` を直接入力する
見出しの id	見出しテキストから自動生成される（`#toc_0` のような旧形式ではない）

早見表

記法	用途
`==text==`	マーカー（`<mark>`）
`![](/m/{id})`	画像。単独行なら figure + キャプション
`:::gallery … :::`	画像を横に並べる
`::video{src=/m/{id}}`	自前配信の動画
`::audio{src=/m/{id}}`	自前配信の音声
URL 単独行	YouTube / X / TikTok / Instagram / 自サイト記事の埋め込み
`::youtube{id="…"}` ほか	同上をディレクティブで
`::post{slug="…"}`	記事カード
`:::yt-sync{video="…"}` + `::cue{at="…"}`	動画と同期して本文を切り替える