記事一覧に戻る
このブログで使える表現ガイドのカバー画像

このブログで使える表現ガイド

作成日:2026-02-07
更新日:2026-09-07
markdownobsidiandocumentation

このブログの記事は、Markdown と Obsidian でよく使う書き方をもとに表示されています。
このページでは、記事の中で使える表現と、読者からどう見えるかをまとめます。

できること

  • 見出し、箇条書き、表、引用、チェックリストを書けます。
  • コード、コマンド出力、Mermaid / Pikchr / TikZ 図、数式グラフ、数式、脚注を載せられます。
  • 記事同士のリンクには、リンク先を軽く確認できるプレビューが付きます。
  • YouTube、Spotify、X の投稿を記事内で見やすく表示できます。
  • 画像には代替テキスト、表示サイズ、画像下の説明文を付けられます。

記事の基本設定

各記事には、タイトルや公開日などの情報が設定されています。

.yaml
---
title: "記事タイトル"
date: "2026-03-14"
updated: "2026-03-14"
draft: false
aliases: []
cover: ""
tags: []
description: ""
---
  • title: 記事タイトル
  • date: 公開日。YYYY-MM-DD 形式で指定します
  • updated: 更新日。YYYY-MM-DD 形式で、date より前の日付にはできません
  • draft: true にすると公開しません
  • aliases: Obsidian の別名リンクに使う名前
  • cover: 記事上部やSNS共有で使う画像
  • tags: 記事検索や関連記事の分類に使うタグ
  • description: 記事一覧やSNS共有で使う説明文
  • slug: 指定した場合に公開URL blog/<slug>/ を固定する値

slug を追加すると、URL の blog/<slug>/ 部分を明示できます。

タグ、トピック、シリーズ

複数のタグを指定した検索では、選んだタグをすべて持つ記事だけが表示されます。

トピックページでは、同じテーマの記事を説明文付きの一覧から辿れます。すべてのタグが独立したトピックページになるわけではありません。

シリーズはタグとは別の表示で示され、シリーズ名からトピックページへ、記事末尾から同じシリーズの前後記事へ移動できます。あわせて、共通するタグをもとに選ばれた関連記事も確認できます。

カバー画像

画像を指定できます。

.yaml
cover: assets/my-cover.png

外部画像を使う場合は img: を付けられます。

.yaml
cover: 'img:https://example.com/picture.png'

文字からカバー画像を作ることもできます。

.yaml
cover: 'text:1行目\n2行目'
.yaml
cover:
  lines:
    - 1行目
    - 2行目

文章の基本

太字、斜体、引用、箇条書き、表、チェックリストを使えます。

.md
**太字** / *斜体* / ~~打ち消し~~

> 引用

- 箇条書きA
- 箇条書きB

1. 番号付きA
2. 番号付きB

| 項目 | 状態 |
| --- | --- |
| table | OK |
| list | OK |

- [x] 完了タスク
- [ ] 未完了タスク

表示例:

太字 / 斜体 / 打ち消し

引用

  • 箇条書きA
  • 箇条書きB
  1. 番号付きA
  2. 番号付きB
項目 状態
table OK
list OK
  • 完了タスク
  • 未完了タスク

1行だけの改行も、そのまま改行として表示されます。

.md
1行目
2行目

1行目
2行目

必要な場合は、短いHTMLも使えます。

.md
<mark>highlight</mark> と <kbd>Ctrl</kbd> + <kbd>K</kbd>

highlight と Ctrl + K

コードを書く

文章中の短いコードはバッククォートで囲みます。

.md
`const answer = 42`

const answer = 42

複数行のコードはコードフェンスで書きます。

.md
```ts
const value = 42
```

```text
plain text
```
.ts
const value = 42
.text
plain text

ファイル名を見せたいときは file= または lang:file を使います。

.md
```ts file=src/main.ts
console.log('hello')
```

```md:docs/README.md
# title
```
src/main.ts
console.log('hello')
docs/README.md
# title

コードブロックには、コピー用のボタンと大きく表示するためのボタンが付きます。

Mermaid 図

mermaid のコードフェンスは図として表示されます。図とテキストはボタンで切り替えられます。

.md
```mermaid
flowchart TD
  A[Markdown] --> B[HTML]
  B --> C{表示モード}
  C -->|図で表示| D[Mermaid 図]
  C -->|テキストで表示| E[Mermaid source]
```
.mermaid
flowchart TD
  A[Markdown] --> B[HTML]
  B --> C{表示モード}
  C -->|図で表示| D[Mermaid 図]
  C -->|テキストで表示| E[Mermaid source]

Pikchr 図

構成を細かく指定する技術図には pikchr のコードフェンスを使えます。図と元のテキストはボタンで切り替えられます。

.md
```pikchr
box "Markdown"
arrow
box "Pikchr"
arrow
box "SVG"
```
.pikchr
box "Markdown"
arrow
box "Pikchr"
arrow
box "SVG"

図の表示中は、ホイールやピンチで拡大縮小し、ドラッグで表示位置を動かせます。右上のリセットボタンで全体表示に戻せます。

TikZ 図

LaTeX の TikZ 記法で技術図を描く場合は、tikz のコードフェンスを使います。\usetikzlibrary、\tikzset、\definecolor による設定も記述できます。

.md
```tikz
\usetikzlibrary{positioning}
\node (md) {Markdown};
\node (svg) [right=of md] {SVG};
\draw[->] (md) -- (svg);
```
.tikz
\usetikzlibrary{positioning}
\node (md) {Markdown};
\node (svg) [right=of md] {SVG};
\draw[->] (md) -- (svg);

図はホイールやピンチで拡大縮小し、ドラッグで移動できます。リセットボタンで全体表示に戻し、ボタンで元のテキストへ切り替えられます。ダークモードでは線と文字の色が表示テーマに合わせて変わります。

数式グラフ

関数、点、折れ線、説明テキスト、補助線を同じ座標上に置く場合は mathplot のコードフェンスを使います。内容は YAML 形式で記述し、グラフと元のテキストをボタンで切り替えられます。

.md
```mathplot
x:
  min: -5
  max: 5

y:
  min: -2
  max: 10

grid: true

functions:
- expr: x^2
  label: y = x²

- expr: sin(x)
  label: y = sin(x)

points:
- at: [2, 4]
  label: P
  text: P(2, 4)

- at: [-1, 1]
  label: Q

polylines:
- points:
  - [0, 0]
  - [2, 4]
  - [3, 9]

texts:
- at: [2.3, 4.7]
  text: 極値ではありません

guides:
- x: 2
  text: x = 2

- y: 4
  text: y = 4
```
.mathplot
x:
  min: -5
  max: 5

y:
  min: -2
  max: 10

grid: true

functions:
- expr: x^2
  label: y = x²

- expr: sin(x)
  label: y = sin(x)

points:
- at: [2, 4]
  label: P
  text: P(2, 4)

- at: [-1, 1]
  label: Q

polylines:
- points:
  - [0, 0]
  - [2, 4]
  - [3, 9]

texts:
- at: [2.3, 4.7]
  text: 極値ではありません

guides:
- x: 2
  text: x = 2

- y: 4
  text: y = 4
  • x / y: min、max、任意の軸名 label
  • grid: グリッドを表示する場合は true
  • functions: 数式 expr、任意の label、color、描画範囲 range: [min, max]
  • points: 座標 at: [x, y]、図中の label、カーソルを合わせたときの text、任意の color
  • polylines: 2点以上の points、任意の label と color
  • texts: 座標 at と表示する text、任意の color
  • guides: x または y の補助線と任意の text

グラフ上ではドラッグとホイール、またはタッチ操作で表示範囲を移動・拡大できます。右上のリセットボタンで最初の表示範囲に戻せます。色はライト・ダークテーマに合わせて切り替わります。

コマンド出力

端末の入出力ログは console を使うと、黒背景のターミナル風に表示されます。ANSIカラーも反映できます。

.md
```console file=terminal.log
guest@test:/$ npm run build
\x1b[32m✓ built\x1b[0m
done
```
terminal.log
guest@test:/$ npm run build
✓ built
done

数式

インライン数式とブロック数式を使えます。

.md
インライン: $E = mc^2$

$$
\int_0^1 x^2 dx = \frac{1}{3}
$$

インライン: E=mc2E = mc^2

∫01x2dx=13\int_0^1 x^2 dx = \frac{1}{3}

脚注

補足を本文の下にまとめたいときは脚注を使えます。

.md
短い補足を脚注にできます。[^basic]

複数行の脚注も書けます。[^multi]

コード付きの補足も書けます。[^code-sample]

短い補足を脚注にできます。basic

複数行の脚注も書けます。multi

コード付きの補足も書けます。code-sample

本文では basic や code-sample という脚注名がそのまま表示されます。PCでは脚注名へのホバー、スマートフォンではタップで内容をポップアップ表示できます。ポップアップをドラッグ、タップ、フォーカスなどで一度操作すると固定されます。固定前でも、ポップアップ内の外部リンクは通常のリンクとしてクリックできます。右上の×ボタン、または「脚注へ移動」で閉じられます。脚注一覧の「参照元へ戻る」リンクでは記事プレビューは開きません。コードブロック、強調、数式、リストなども記事本文と同じ装飾で表示されます。

記事へのリンク

ブログ内の記事へは、Obsidian のリンク記法と Markdown の .md リンクの両方でつなげます。

Obsidian 記法

.md
[[hello-world]]
[[hello-world|表示名を指定]]
[[hello-world#ブログ、始めました|見出しへ飛ぶ]]

hello-world
表示名を指定
見出しへ飛ぶ

Markdown .md リンク

.md
[hello-world へ](hello-world.md)
[hello-world 見出しへ](hello-world.md#ブログ始めました)

hello-world へ
hello-world 見出しへ

記事内のリンクは、ページ内の見出しリンクを除いてデフォルトで新しいタブに開きます。同じタブで開きたい場合は {:same-tab} を付けます。

.md
[新しいタブで開く](https://example.com)
[同じタブで開く](https://example.com){:same-tab}
[[hello-world|同じタブで記事へ]]{:same-tab}

記事リンクには、リンク先を小さなウィンドウで確認できるボタンも付きます。PCのブラウザでは、Obsidian 記法や Markdown の .md リンクそのものにカーソルを合わせても同じプレビューを表示できます。プレビューをクリックまたはドラッグして固定していなければ、リンクとプレビューからカーソルを離したときに閉じます。関連記事欄とシリーズ記事末尾の前後リンクは通常のナビゲーションであり、記事プレビューは表示しません。

プレビューを付けたくないリンクには {:no-preview} を使います。

.md
[[hello-world|通常リンク]]
[[hello-world|no preview リンク]]{:no-preview}
[同じタブ・プレビューなし](hello-world.md){:same-tab no-preview}

通常リンク
no preview リンク
同じタブ・プレビューなし

動画・音楽・SNSの埋め込み

YouTube、Spotify、X のリンクは、記事内で見やすい表示にできます。

通常のリンクとして置きたい場合は、そのまま Markdown リンクを書きます。

.md
[動画リンク](https://youtu.be/dQw4w9WgXcQ)

動画リンク

YouTube

.md
[動画を見る](https://www.youtube.com/watch?v=dQw4w9WgXcQ){:inline-window provider=youtube}
[途中から見る](https://www.youtube.com/watch?v=dQw4w9WgXcQ){:inline-window provider=youtube start=43}
[Shortsを開く](https://www.youtube.com/shorts/dQw4w9WgXcQ){:inline-window provider=youtube}
[リンクとポップアップボタンのみ](https://www.youtube.com/watch?v=dQw4w9WgXcQ){:inline-window provider=youtube mode=link}

動画を見るポップアップウィンドウで表示中です埋め込みを読み込み中...
途中から見るポップアップウィンドウで表示中です埋め込みを読み込み中...
Shortsを開くポップアップウィンドウで表示中です埋め込みを読み込み中...
リンクとポップアップボタンのみ

YouTube は通常動画、Shorts、ライブURLに対応しています。mode=link を付けると、本文にはリンクとポップアップボタンだけを置きます。

Spotify

.md
[Spotifyで聴く](https://open.spotify.com/intl-ja/track/2bRx0Wk5tIatZPmlBSVfDA?si=629830dd0ba146ac){:inline-window provider=spotify}
[リンクとポップアップボタンのみ](https://open.spotify.com/intl-ja/track/2bRx0Wk5tIatZPmlBSVfDA?si=629830dd0ba146ac){:inline-window provider=spotify mode=link}

Spotifyで聴くポップアップウィンドウで表示中です埋め込みを読み込み中...
リンクとポップアップボタンのみ

X

X の投稿は、記事本文内に埋め込みとして表示されます。

.md
[X の投稿を埋め込む](https://x.com/kirehash/status/2021113307277688866){:inline-window provider=x}

ポストを読み込み中...X の投稿を埋め込む

画像とファイル

画像は Obsidian の埋め込み記法でも Markdown 記法でも書けます。代替テキストを書いておくと、画像の下に説明文として表示されます。

Obsidian 埋め込み

.md
![[assets/hello_world.png]]
![[assets/hello_world.png|220]]
![[assets/hello_world.png|代替テキスト]]
![[assets/hello_world.png|代替テキスト|220]]
![[assets/hello_world.png|代替テキスト|220x110]]

代替テキスト
代替テキスト
代替テキスト
代替テキスト
代替テキスト
代替テキスト

Markdown 画像

.md
![カバー画像](assets/default-cover.png)
![カバー画像|320](assets/default-cover.png)
![カバー画像|320x180](assets/default-cover.png)
カバー画像
カバー画像
カバー画像
カバー画像
カバー画像
カバー画像

220 は幅、220x110 は幅と高さとして扱われます。代替テキストが空の画像には、画像下の説明文は出ません。

ファイルリンクとHTML画像

画像やPDFなどのファイルへリンクできます。HTML の img や a でもローカルファイルを参照できます。

.md
<img src="assets/hello_world.png" width="240" alt="html image sample">
<a href="assets/default-cover.png">html link sample</a>

[画像を開く](assets/default-cover.png)
html image sample html link sample

画像を開く

クエリ文字列やハッシュ付きのファイルリンクも使えます。

.md
[クエリ付き](assets/default-cover.png?v=1)
[ハッシュ付き](assets/default-cover.png#top)

クエリ付き
ハッシュ付き

見出しリンクと目次

記事内の見出し（レベル1〜3）には、リンクをコピーするボタンが付きます。これらの見出しは目次にも表示されます。

.md
## セクション見出し
### サブ見出し

幅1200px以上では左側の目次、それより狭い画面では開閉できる目次を利用できます。

脚注

  • basic

    1行の脚注 ←

  • multi

    1行目
    2行目
    3行目 ←

  • code-sample

    コードを含む脚注です。

    footnote.js
    const enabled = true

    ←