このブログで使える表現ガイドリンクをコピーしました

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

できることリンクをコピーしました

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

記事の基本設定リンクをコピーしました

記事の先頭には、タイトルや公開日などの情報を書きます。記事を書く人向けの設定です。

.yaml
---
title: "記事タイトル"
date: "2026-03-14"
updated: "2026-03-14"
draft: false
aliases: []
cover: ""
tags: []
description: ""
---
  • title: 記事タイトル
  • date: 公開日
  • updated: 更新日
  • draft: true にすると公開しません
  • aliases: Obsidian の別名リンクに使う名前
  • cover: 記事上部やSNS共有で使う画像
  • tags: 記事一覧で使うタグ
  • description: 記事一覧やSNS共有で使う説明文

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

カバー画像リンクをコピーしました

画像を指定できます。

.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]

コマンド出力リンクをコピーしました

端末の入出力ログは 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}

記事リンクには、リンク先を小さなウィンドウで確認できるボタンも付きます。

プレビューを付けたくないリンクには {: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)

クエリ付き
ハッシュ付き

見出しリンクと目次リンクをコピーしました

記事内の見出しには、見出しへのリンクをコピーするボタンが付きます。ページの目次は大きな見出しから自動で作られます。

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

長い記事では、PC とスマートフォンで読みやすい形の目次が表示されます。

脚注

  • basic

    1行の脚注 ←

  • multi

    1行目
    2行目
    3行目 ←

  • code-sample

    コードを含む脚注です。

    footnote.js
    const enabled = true

    ←