ブロックテーマのレイアウト、なんとなく触っているけど「なぜこうなるの？」と思ったことはありませんか？
実は、ブロックテーマのレイアウトは たった3つの「幅」 で決まっています。
📐 ブロックテーマの「3つの幅」
- 本文幅（contentSize） ― 普通のブロックが収まる幅
- 幅広幅（wideSize） ― 画像などをちょっと広く見せる幅
- 全幅（alignfull） ― 画面いっぱいに広げる幅
言葉で説明するより、動かして体感するのがいちばん早いです。さっそく触ってみましょう！
まず触ってみよう！レイアウトシミュレーター
下のシミュレーターでスライダーを動かすと、幅の変化がリアルタイムで確認できます。
大きい画面で試したい方はこちら（シミュレーターを別タブで開く）
🖱️ こんなことができます
- 本文幅・幅広幅をスライダーで調整
- 全幅ブロックの表示を切り替え
- ブロック間の余白（blockGap）を調整
- サイドバーのあり・なしを切り替え
- PC・スマホの見え方を並べて比較
「本文幅 contentSize」って何？
ブロックエディターで文章や見出しを置いたとき、自動的に真ん中に収まる幅、それが 本文幅（contentSize） です。
新聞や雑誌のページをイメージするとわかりやすいです。
📰 新聞で考えると…
新聞は左右に余白があって、記事は真ん中の決まった幅に収まっていますよね。
ブロックテーマの「本文幅」もまったく同じ考え方です。
画面が広くても、本文がずーっと端まで伸びると読みにくくなります。適切な本文幅を決めることで、読みやすさが保たれます。
シミュレーターで確かめてみよう
- 「本文幅（contentSize）」のスライダーを左右に動かす
- 本文エリア（グレーの部分）が広くなったり狭くなったりする
- 左右の余白が連動して変化するのを確認
💡 ポイント
一般的な読みやすい本文幅は 600px〜800px くらいと言われています。
広すぎると1行が長くなって読みにくく、狭すぎると窮屈な印象になります。
「幅広ブロック wideSize」は何のためにある？
本文幅よりひとまわり広く表示できる幅、それが 幅広幅（wideSize） です。
文章は本文幅に収めつつ、画像や表だけ「もう少し大きく見せたい」というときに使います。
🖼️ 写真集で考えると…
本の本文は普通の幅で読む。でも見開きの写真だけは左右いっぱいに広がっている。
「幅広ブロック」はまさにその「見開き写真」のポジションです。
シミュレーターで確かめてみよう
- 「 幅広ブロック（wideSize）」のスライダーを動かす
- 本文エリアより広くなることを確認
- 本文幅（グレー）はそのまま変わらないことを確認
💡 ポイント
wideSizeはcontentSizeより大きい値を設定します。
例えば本文幅が700pxなら、幅広幅は900px〜1000pxくらいが自然です。
小さすぎると本文幅と区別がつかなくなるので注意です。
⚠️ サイドバーがある場合は注意
2カラムレイアウト（サイドバーあり）のテーマでは、
本文エリアがすでに狭いため、幅広ブロックがうまく機能しないことがあります。
幅広ブロックは、サイドバーなしの1カラムレイアウトで真価を発揮します。
画面いっぱいに広げる ― 全幅ブロック（alignfull）
本文幅・幅広幅に続いて、3つ目の幅が 全幅（alignfull） です。
その名の通り、画面の端から端までブロックを広げます。
🎬 映画館のスクリーンで考えると…
普通の部屋のテレビは「本文幅」。
ちょっと大きめのプロジェクターが「幅広幅」。
そして映画館のスクリーンが 「全幅（alignfull）」 です。
余白ゼロ、画面いっぱいの迫力ある表示です。
シミュレーターで確かめてみよう
- 「全幅ブロック」の表示切り替えをオンにする
- 本文幅・幅広幅のスライダーを動かしても全幅は変わらないことを確認
💡 ポイント
全幅ブロックは使いすぎに注意です。
インパクトがある分、多用すると落ち着きのないページになります。
「ここぞ！」という場所に絞って使うのがコツです。
⚠️ テーマが対応していないと使えない
全幅表示はテーマ側が対応していないと機能しない場合がある。
ブロックの間隔も調整できる ― blockGap
幅の話が続きましたが、レイアウトで大事なのは幅だけではありません。
ブロックとブロックの「間隔」も、読みやすさに大きく影響します。
📚 本棚で考えると…
本がぎゅうぎゅうに詰まった本棚は、どれがどの本かわかりにくい。
少し隙間があるだけで、ぐっと見やすくなりますよね。
ブロックの間隔（blockGap）も、「詰めすぎず、空けすぎず」が大切です。
余白が変わると印象はこんなに違う
余白が狭すぎると…
息苦しくて読む気が失せる😞
余白が適切だと…
読みやすくてすっきり😊
シミュレーターで確かめてみよう
- 「ブロック間余白（blockGap）」スライダーを左端に動かす
- ブロックがぎゅっと詰まった状態を確認
- スライダーをゆっくり右に動かす
- ブロックの間隔が広がるのを確認
💡 ポイント
blockGapの目安は 1.5rem〜2.5rem（24px〜40px） くらいが読みやすいと言われています。
フォントサイズや全体のデザインに合わせて調整してみましょう。
サイドバーがあると幅はどう変わる？
ここまで「本文幅・幅広幅・全幅・余白」と見てきました。
最後にもうひとつ、レイアウトに大きく影響する要素が サイドバー です。
🚃 電車の座席で考えると…
ボックス席に4人で座るのと、3人で座るのではひとりあたりの幅がまったく違いますよね。
サイドバーも同じで、横にサイドバーが入ると本文エリアが狭くなります。
1カラムと2カラムの違い
サイドバーなし（1カラム）
画像・表・幅広ブロックが
のびのび使える
サイドバーあり（2カラム）
（狭くなる）
バー
本文エリアが圧迫される
幅広ブロックは使いにくい
スマホではサイドバーはどうなる？
スマホの画面はもともと幅が狭いため、サイドバーは本文の下に移動するのが一般的です。
スマホでサイドバーが本文の下に来るか上に来るかは、テーマの設計次第です。
⚠️ 2カラム内では幅広・全幅は使わないほうが無難
カラムブロックの中に配置したブロックに「幅広」や「全幅」を設定すると、
サイドバーにかぶったり画面レイアウトが崩れる原因になります。
幅広・全幅ブロックは、カラムブロックの外側で使うのが基本です。
シミュレーターで確かめてみよう
- 「サイドバー」をオンにする
- 本文エリアが狭くなるのを確認
- サイドバー幅のスライダーを動かして、本文幅との兼ね合いを体感
- 「PC・スマホ比較」でスマホ時のサイドバーの動きを確認
ブロックテーマではCSSを直接書かなくていい
「サイドバーのレイアウト＝CSS」というイメージがあるかもしれませんが、
ブロックテーマでは カラムブロックを使うだけ で同じことが実現できます。
| CSSの書き方 | 何をしている？ | ブロックテーマでは |
|---|---|---|
| display: flex | 横並びにする | → カラムブロック wp:columns |
| flex-grow: 1 | 残りの幅を埋める | → カラムの幅を指定 {“width”:”70%”} |
| gap: max(3%, 16px) | カラム間の余白 | → ブロック間隔 サイドパネルで設定 |
| flex-direction: row-reverse |
左サイドバーにする | → CSSが必要 |
3つの幅を覚えれば、レイアウトが見えてくる
むずかしそうに見えたブロックテーマのレイアウトも、3つの幅を知っているだけでぐっと理解しやすくなります。
📐 ポイントは3つの幅
| 名前 | 役割 | 使いどころ |
|---|---|---|
| 本文幅 contentSize |
文章が収まる基本の幅 | 見出し・段落・リストなど |
| 幅広幅 wideSize |
本文よりひとまわり広い幅 | 画像・表・カラムなど |
| 全幅 alignfull |
画面の端から端まで | カバー・帯状セクションなど |
📖 次のステップ
「3つの幅」の感覚がつかめたら、次はtheme.jsonへの書き方を確認しましょう。
CSSの知識をブロックテーマに「翻訳」する形で、一つずつ解説しています。