テンプレートが揃ったら、次はブログの「顔」になる投稿一覧ページです。
パーマリンクの確認から始めて、クエリループブロックを使って組んでいきましょう。
パーマリンクを確認する
クエリループで投稿一覧を作ると、各タイトルが個別投稿ページへのリンクになります。
このリンク先のURL形式を決めているのがパーマリンク設定です。
一覧を作る前に、まずここを確認しておきましょう。
管理画面 → 設定 → パーマリンク → 「投稿名」を選択して保存する
💡 WordPressの初期設定は ?p=123 のような形式です。
これを「投稿名」にしておくと /hello-world/ のようなわかりやすいURLになり、SEOの面でも有利になります。
📝 本番では、スラッグは英語に変更しよう（右サイドバー → リンク）
「投稿名」に設定すると、日本語のタイトルがそのままURLに入ります。日本語URLはブラウザ上では読めますが、SNSでシェアしたときに長い「文字化け」のようなURLになってしまうため、英語（半角英数字）への書き換えがおすすめです。
⚠️ 【重要】一度決めたら変えない！
すでに公開中の記事がある場合、パーマリンク設定を変更するとURL自体が変わってしまい、これまでのリンクがすべて「リンク切れ」になってしまいます。運用を始める最初に、しっかり設定しておきましょう。
テスト投稿を3〜5件作る
クエリループの表示確認には、投稿が複数件あるとわかりやすいです。
※ 「あり」と「なし」の違いを確認するため、アイキャッチ画像は最低1件に設定しておきましょう。
🚀 テスト記事作成の手順
① 管理画面 → 投稿 → 新規投稿を追加
② タイトルと本文を適当に入力する
※「テスト記事1」など、後で判別しやすい名前にするとスムーズです。
③ アイキャッチ画像を設定する
（右サイドバー → アイキャッチ画像）
★ここを設定しないと、一覧が少し寂しくなるので忘れずに！
④ 公開する
⑤ 同じ手順で3〜5件作る
※記事が複数あると、クエリループが正しく動いているか確認しやすくなります。
クエリループブロックとは
クエリループブロックは、データベースから投稿を検索して、条件に合う投稿をまとめて一覧表示する仕組みです。
🍽️ お皿のたとえで比較
post-content
＝ お皿に料理を1品だけ盛り付けるイメージ（記事の中身そのもの）
クエリループ
＝ メニュー表の条件に合う料理をまとめて並べるイメージ（記事の一覧表示）
「クエリ（query）」とは、直訳すると「問い合わせ」という意味です。
WordPressのデータベースに対して、「最新の投稿を10件ちょうだい！」と問い合わせて、その返ってきた結果をルール通りに並べて表示するのがクエリループの役割です。
クエリループブロックは、大きく分けて2つのパーツで構成されています。
├── 🔁 投稿テンプレート…投稿1件分のレイアウト
│ ├── 📷 アイキャッチ画像
│ ├── 📝 投稿タイトル
│ └── 📅 投稿日時
└── 📄 ページネーション…前へ・次へボタン
💡 「投稿テンプレート」は1件分のひな形です。ここに置いたブロックの並びが、すべての投稿に繰り返し適用されます。カード1枚分のデザインを作るイメージです。
エディターで組んでみる
⚠️ リストビューで構造を確認しながら進めましょう。意図しないブロックの中に追加してしまった場合は、リストビューでドラッグして移動できます。
完成イメージ
💡 「結果なし」は、該当する投稿が0件のときに表示されるブロックです（自動で入ります）。「記事が見つかりませんでした」などのメッセージを入れられます。
index.htmlを開く
🛠️ 編集の始め方
① 外観 → エディター → テンプレート → 「インデックス」を選択して開く
② ヘッダー・グループ・フッターの構造を確認する
index.html ファイルにコードを書き込んでいれば、エディターを開いた瞬間に各パーツが自動で認識されています。もし真っ白な場合は、ファイルの保存場所を一度確認してみましょう。
💡 今からindex.htmlのコンテンツ（post-content）部分を、エディターで削除してクエリループに置き換えます。
クエリループブロックを追加する
🛠️ クエリループの組み立て
③ リストビューでグループ（main）の中にある コンテンツ（post-content）を選択 →「︙」をクリック → 削除
④ 同じ場所に「クエリループ」ブロックを追加する
⑤ パターン選択画面が出たら「新規空白」を選ぶ
⑥ 続けて「開始時のバリエーション」が表示されるので「画像、日付、タイトル」を選ぶ
今回はアイキャッチ画像の表示確認をしたいので、画像入りの構成を選びます。
- 🖼️ アイキャッチ画像
- 📝 投稿タイトル
- 📅 投稿日時（お好みで！）
- 🖋️ 抜粋（お好みで！）
💡 どのバリエーションを選んでも、あとからブロックの追加・削除は自由自在にできます。
【重要】クエリータイプの確認
「クエリループ」ブロックを選択 → 右サイドバーでクエリータイプが「デフォルト」になっているか確認してください。「カスタム」になっている場合は「デフォルト」に戻しましょう。
※「カスタム」は条件を指定して投稿を絞り込みたいときに使う設定です。
このままだと、1記事がアイキャッチ画像含めて画面いっぱいに表示されてしまいます。
ブログ一覧らしい見た目に整えましょう。
リストビューで確認して、見た目を整える
ブロックを追加したら、リストビューで構造を確認しましょう。以下のようになっていればOKです。
├── 🔁 投稿テンプレート
│ ├── 📷 アイキャッチ画像
│ ├── 📝 投稿タイトル
│ ├── 📅 投稿日時（お好みで）
│ └── ✏️ 抜粋（お好みで）
└── 📄 ページネーション
📝ページネーションが自動で追加されていない場合
「クエリループ」ブロックの中の一番下に「ページネーション」ブロックを手動で追加してください。
🎨 カード型レイアウトへの調整
① リストビューで「投稿テンプレート」を選択する
② ツールバーの「グリッド」アイコンをクリック
これだけで、縦並びだった一覧が「カード型」にパッと切り替わります。
③ 右サイドバー → レイアウト → 「カラム」の数を2に変更
今回は2列（2カラム）に設定。
④ 「投稿のアイキャッチ画像」を選択 → 右サイドバー → アスペクト比を変更
おすすめは「ワイド – 16:9」です。写真のサイズがバラバラでも、これで綺麗に統一されます。
⑤ 「タイトル」を選択 → 右サイドバーで「タイトルをリンクにする」を ON にする
⚠️ ここが重要！ OFFのままだと、タイトルをクリックしても個別記事に飛べません。
💡 その他の設定はどうする？
・「新しいタブで開く」 → OFF のまま（同じサイト内の移動はOFFが一般的です）
・「Link relation」 → 空欄のまま（上級者向けの設定なので、今は触らなくてOK！）
グリッド2カラムにするとアイキャッチ画像が映えて、一気にブログらしい見た目になります。まずはこの形を基本レイアウトとしてファイルに保存しましょう。
私のコード
<!-- wp:template-part {"slug":"header", "tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:query {"queryId":0,"query":{"perPage":1,"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 -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->表示を確認する
投稿一覧が表示されるか確認しましょう。
👀 最終表示チェック
① ブログ一覧ページを開く
- ・ブログ型： サイトのトップページを表示
- ・ホームページ型： 「BLOG」として設定した固定ページのURLを表示
② 以下のポイントをチェックする
✅ チェックリスト
- 🔲 テスト投稿がグリッド2カラムで並んでいるか
- 🔲 アイキャッチ画像が表示されているか（設定済みの場合）
- 🔲 投稿タイトルをクリックすると個別投稿ページに飛ぶか
- 🔲 個別ページのURLがパーマリンク設定通りになっているか
- 🔲 ヘッダー・フッターが正しく表示されているか
📝 投稿が表示されない場合のレスキュー
- 投稿が「下書き」ではなく「公開」になっているか確認
index.htmlにクエリループのコードが正しく入っているか確認- 管理画面の「設定 → 表示設定」で、投稿ページの割り当てが正しいか確認
📖 1ページに表示する最大投稿数
管理画面の「設定 → 表示設定」から変更できます。
💡 ページネーション（次へ/前へ）の動作を確認したいときは、ここを一時的に「1」にしてみましょう。記事が3件あれば、強制的に3ページ分に分割されるので、テストが捗りますよ！
「基本形」と「リセット」の関係
レイアウトのバリエーションは無限大！ いろいろ試したいときはサイトエディターで保存すれば、すぐに実際のサイトで確認できます。「これだ！」が決まったら、コードをコピーしてファイルに貼り直しましょう。
例：グループの中に入れて、グループに背景色とパディングをつける
💡テーマファイルに保存したコードが、あなたのテーマの「基本形」です。サイトエディターでいくら変更しても、「リセット」すればいつでもこの基本形に戻れます。安心していろいろ試しましょう。
⚠️ 逆に、ファイルを更新したあとはサイトエディターの「リセット」を忘れずに！ サイトエディターで保存した内容はファイルより優先されるため、リセットしないと新しいファイルの内容が反映されません。
ざっくりイメージですが、だいたいこんなことをやりたくなったらCSSの出番です。
・アイキャッチ画像にホバーエフェクトをつけたい
・カードをスマホでも絶対2列で並べたい
・ページネーションのデザインをオシャレにしたい
・左サイドバーかつスマホでサイドバーを下にする
などなど
サイトエディターだけでいろいろなことができるので、まずは試してCSSなしでできる範囲を楽しみましょう！いつでも、基本形に戻せます😊