今日やったこと

  • Quartzに日記ページを追加する流れを確認
  • 画像の配置・リンク(相対パス)の動作確認
  • Markdownの構造(見出し、箇条書き、引用、コード、コールアウト)をひと通りテスト

ねらい:Quartzで「文章+画像+ちょい装飾」が破綻なく表示されるかを見る。

ちょいメモ

画像の置き場所(例)

  • content/diary/ に日記Markdown
  • content/img/diary/2026-01-14-test/ に画像
  • 日記からは ../img/... の相対パスで参照

(※あなたのQuartz構成で static/ を使っている場合は、画像は static/img/... に置いて、参照は /img/... でもOK)

今日のスナップ

うまくいった / 詰まった

:::note

  • うまくいった:画像2枚、見出し、引用、コードブロックがOK
  • 詰まりがち:画像パス(相対か絶対か)、配置先フォルダ(contentかstaticか)
    :::

コード断片(表示テスト)

# Quartzのビルド例(環境によってコマンドは異なる)
npx quartz build
npx quartz serve
# 画像の基本(相対パス例)
![](../img/diary/2026-01-14-test/cover.png)

明日のTODO

  • draft: true を外して公開テスト
  • OGP(SNSカード)用の画像指定が必要なら設定確認
  • Obsidian互換の ![[xxx.png]] を使う構成なら、その動作も確認

おまけ:チェックリスト

  • Front-matterが効く
  • 画像が表示される
  • 相対リンクが壊れない
  • コードブロックが崩れない