Quarto のメリット④:ブログ・Web サイト機能(listing / search / sitemap / OG 対応)

記事一覧・検索・サイトマップ・OG 画像など、ブログ運営に必要な機能が標準装備されていることを解説します。
blog
Published

August 2, 2026

ブログ運営に必要な機能が「標準装備」

Quarto の website プロジェクトは、ブログとして必要な機能を最初から持っています。この CMS はそれらをそのまま使っています。

このサイトで動いている機能

機能 説明 設定場所
記事一覧(listing) グリッド表示・日付降順・カテゴリフィルタ index.qmdlisting
サイト内検索 全記事を全文検索 _quarto.ymlsearch: true
サイトマップ sitemap.xml 自動生成(SEO) 自動
OG / Twitter カード リンク共有時の見た目 open-graph: true
RSS 相当のフィード 記事一覧に index.xml を自動生成 自動
目次(TOC) 記事内に見出しナビ toc: true
レスポンシブ スマホでも見やすいナビゲーション 標準

listing の設定例(このサイトのホーム)

---
title: "Quarto Issues CMS"
listing:
  contents: posts
  sort: "date desc"
  type: grid
  filter-ui: true
  categories: true
  feed: true   # index.xml を自動生成
---
  • contents: postsposts/ 配下の記事を自動収集
  • sort: "date desc" → 新しい順
  • filter-ui: true + categories: true → カテゴリで絞り込み

検索はどう動く?

quarto render すると search.json が生成され、記事本文の全文が検索対象になります。追加のサービス(Algolia 等)は不要です。

テーマで見た目を変更

_quarto.ymlformat.html.theme を変えるだけで、全体の配色が変わります。

format:
  html:
    theme: cosmo   # bootswatch のテーマ名(cosmo, flatly, journal ...)
    css: styles.css

この CMS はさらに styles.cssneo brutalism 風のカスタムスタイル(太いボーダー・強いシャドウ)を適用しています。

まとめ

  • ブログに必要な「一覧・検索・SEO・共有」が Quarto 標準機能
  • 見た目はテーマ + CSS で柔軟にカスタマイズ可能
  • この CMS はそれらをほぼ「設定だけで」利用しています