スマホファーストの流れで、海外のブログテーマはほぼ1カラム（サイドバーなし）が主流ですが、日本のブログ文化ではまだまだサイドバーが根強い人気です。
今回はカラムブロックの標準機能だけで、PCでは2カラム、スマホでは自動で縦並びになるレイアウトを作成します。
カラムブロックの基本
カラムブロックは、ページの中身を決まった幅で横に分割できるブロックです。
パソコン（横長の画面）では、横に分割。
・ 左側のスペース → メインコンテンツ（クエリループ）
・ 右側のスペース → サイドバー（カテゴリーやプロフィールなど）
スマホ（縦長の画面）では、縦に並ぶスマホ対応が自動でできます。
まずは、サイドバーから作りましょう。
サイドバーをエディターで組む
サイドバーに置けるブロックはたくさんありますが、まずはシンプルに「最新の投稿」だけで組みます。
完成イメージ
よくあるサイドバーの構成
👤 プロフィール…書いている人がわかると信頼感アップ
🗂️ カテゴリー一覧…読者が興味のあるジャンルに飛べる
📝 最新の投稿…新しい記事に気づいてもらえる
🔍 検索…記事が増えてきたら便利
📢 広告枠…AdSenseの配置場所として定番
💡 あとで簡単に追加できます。
sidebar.html
① 外観 → エディター → パターン →テンプレートパーツ一覧 → 「サイドバー」を選択して開く
※「サイドバー」が見当たらない場合、自作テーマ③を参考にtheme.jsonのtemplatePartsにサイドバーを登録してください。
② グループブロックを追加する
③ グループの設定 →「コンテンツ幅を使用するインナーブロック」はOFFにする
※ここに白の背景色をつけるのがおすすめ
サイドバーの幅はカラムブロックの比率で決まります。ここでONにすると、contentSizeで二重に制限されてサイドバーの中身が不必要に狭くなります。
④ グループの中に見出しブロック（H3）を追加する → テキストは「最新の投稿」などにする
※ お好みで背景色をつけるのがおすすめ（背景色をつけると自動でパディングが付きます）
右サイドバーで表示件数やアイキャッチ画像の表示ON/OFFなどが変更できます。サイドバーではアイキャッチなし・5件程度がコンパクトでおすすめです。
⑤ 見出しの下に「最新の投稿」ブロックを追加する
※ 上下左右にパディングをつける
⑥ 画面右上の「︙」→「すべてのブロックをコピー」
⑦ テーマファイルエディターで parts/sidebar.html に貼り付けて「ファイルを更新」する
※ sidebar.htmlが見当たらない場合、partsフォルダ直下に作成してください。
💡 パターン登録のすすめ
「H3見出し＋ブロック」のようなお気に入りのデザインのワンセット（グループ）を「︙」からパターン（同期は必ずOFF）に登録しておくと、サイドバーにブロックを追加するときにパターンを呼び出して一部を編集するだけで便利です。
私のコード
<!-- wp:group {"backgroundColor":"white","layout":{"type":"default"}} -->
<div class="wp-block-group has-white-background-color has-background">
<!-- wp:heading {"level":3,"backgroundColor":"primary","textColor":"white"} -->
<h3 class="wp-block-heading has-white-color has-primary-background-color has-text-color has-background">最新の投稿</h3>
<!-- /wp:heading -->
<!-- wp:latest-posts {"style":{"spacing":{"padding":{"right":"var:preset|spacing|50","left":"var:preset|spacing|50","top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} /-->
</div>
<!-- /wp:group -->ブログ一覧にサイドバーを追加する
⚠️ リストビューで構造を確認しながら進めましょう。意図しないブロックの中に追加してしまった場合は、リストビューでドラッグして移動できます。
完成イメージ
index.html
テーマ自作⑧で作ったクエリループを左カラム（上）の中に移動して、右カラム（下）にサイドバーを追加する流れで進めます。
① 外観 → エディター → テンプレート → 「インデックス」を選択して開く
② リストビューで構造（ヘッダー・グループ（クエリループ）・フッター）を確認する
カラムブロックを追加する
クエリループの外側にカラムブロックを追加して、その中にクエリループを移動します。
③ リストビューでグループ（main）を選択する
④ グループの中に「カラム」ブロックを追加する → 「70 / 30」を選ぶ
※「70 / 30」がない場合は「50 / 50」
● 左カラムを選択（上）→ 右サイドバーで 70%
● 右カラムを選択（下）→ 右サイドバーで 30%
⑤ 親カラムブロックを選択 → 右サイドバーでモバイルでは縦に並べる → ON
⑥ 親カラムブロックを選択 → ツールバーの「配置」→「幅広」に変更
⑦ リストビューでクエリループをドラッグして、左カラムの中に移動
⑧ 右カラム（下）の中にサイドバーを追加
💡 ドラッグがうまくいかない場合は、クエリループを選択 →「︙」→「コピー」→ 左カラムの中に「貼り付け」→ 元のクエリループを削除、でもOKです。
コピーしてファイルに貼り付ける
① 画面右上の「︙」→「すべてのブロックをコピー」
② テーマファイルエディターで templates/index.html に貼り付けて「ファイルを更新」する
私のコード
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide">
<!-- wp:column {"width":"70%"} -->
<div class="wp-block-column" style="flex-basis:70%">
<!-- wp:query {"queryId":0,"query":{"perPage":5,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[],"format":[]}} -->
<div class="wp-block-query">
<!-- wp:post-template {"layout":{"type":"grid","columnCount":2}} -->
<!-- wp:post-featured-image {"aspectRatio":"16/9"} /-->
<!-- wp:post-date {"metadata":{"bindings":{"datetime":{"source":"core/post-data","args":{"field":"date"}}}}} /-->
<!-- wp:post-title {"isLink":true} /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-numbers /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
<!-- wp:query-no-results -->
<!-- wp:paragraph -->
<p>記事が見つかりませんでした</p>
<!-- /wp:paragraph -->
<!-- /wp:query-no-results -->
</div>
<!-- /wp:query -->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%">
<!-- wp:template-part {"slug":"sidebar","area":"uncategorized"} /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->page/singleへの展開
page.htmlとsingle.htmlもサイドバーを追加する場合は、カラム部分は同じ構造で中身（wp:queryのところ一式）を入れ替えるだけです👇
アイキャッチ不要ならwp:post-featured-imageのところを削除してください。
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide">
<!-- wp:column {"width":"70%"} -->
<div class="wp-block-column" style="flex-basis:70%">
<!-- wp:post-featured-image {"aspectRatio":"16/9"} /-->
<!-- wp:post-content /-->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"30%"} -->
<div class="wp-block-column" style="flex-basis:30%">
<!-- wp:template-part {"slug":"sidebar","area":"uncategorized"} /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->パソコンで、ブラウザの右端をマウスで掴んで、横幅をグーっと狭めてみてください。一定の幅（ブレイクポイント）を境に、2カラムから縦並びへ、切り替わるのが確認できるはずです。
次回、いよいよ最終回です。