デモ: ワイドレイアウト

全幅コンテンツバンドのためのwideフロントマターオプションのライブデモンストレーション。

このページはwide: trueフロントマターオプションのデモです。サイドバーが非表示になり、通常の読書幅にコンテンツを中央揃えする代わりに、wideによってコンテンツバンドがビューポートの大部分に広がります。

何が起きているか

コンテンツバンドがビューポートを埋めるように広がっています。使用しているフロントマターは以下の通りです：

---
title: "デモ: ワイドレイアウト"
hide_sidebar: true
wide: true
---

サイドバー非表示との比較

サイドバー非表示のデモも同じくサイドバーを非表示にしますが、コンテンツは固定幅の読書カラムに中央揃えされたままです。ここでの唯一の違いはwide: trueを加えている点で、これによりその上限がなくなり、コンテンツが利用可能な幅いっぱいに広がります。ブラウザの幅を広げて、2つのページを並べて比較してみてください。

使用場面

グリッド中心のページやダッシュボード的なページ（たとえば複数カラムのカードグリッドを持つランディングページや概要ページなど）、コンテンツを全幅に広げたほうが読みやすい場合にwide: trueを使用します。hide_sidebarと自然に組み合わせられ、サイトのトップページでも使われているレイアウトです。

通常の本文には、上限のある標準の読書カラムのほうが読みやすいため、wideはコンテンツが幅の広さから本当に恩恵を受ける場合にのみ使用してください。

詳しくはフロントマターリファレンスをご覧ください。

関連ページ

• サイドバー非表示 — 左側のサイドバーを非表示にし、コンテンツは中央揃えのまま

• 目次非表示 — 右側の目次を非表示にします

• サイドバー＆目次非表示 — 両方のパネルを非表示にします