記事一覧・ニュースブロック
記事一覧・ニュース ブロック — 全種マニュアル
WordPressの投稿・固定ページを自動で一覧表示するブロック群。記事を公開すれば一覧が自動更新されるため、手動でブロックを編集する必要がない。全7種。
設定手順
1. ブロックを挿入する
エディター画面で「+」ボタンをクリックし、使いたい記事一覧ブロック（例：「投稿一覧 1」「お知らせ一覧 1」など）を検索して挿入する。
2. サイドバーでカテゴリ・表示件数を設定する
右側のサイドバー（ブロック設定パネル）で以下を設定する。
- categoryId — 特定のカテゴリだけ表示したい場合はカテゴリIDを入力（空欄で全カテゴリ表示）
- numberOfPosts — 表示する記事件数を設定（偶数がおすすめ：4, 6, 8）
- postType — 投稿以外（カスタム投稿タイプ）を表示する場合はスラッグを入力
3. フォント設定を調整する
サイドバーの各フォント項目を必要に応じて変更する。
- 日付のフォント/ウェイト（dateFont / dateFontWeight）
- カテゴリバッジのフォント/ウェイト（catFont / catFontWeight）
- タイトルのフォント/ウェイト（titleFont / titleFontWeight）
- 抜粋文のフォント/ウェイト（pFont / pFontWeight）※対応ブロックのみ
- カテゴリバッジの背景色（catBgColor）も変更可能
4. プレビューで確認する
エディター上部の「プレビュー」ボタンで実際の表示を確認する。記事が公開されていないと一覧に表示されないため、表示確認時は公開済みの記事があることを確認する。
よくある質問
Q. 記事が表示されない
A. 以下を確認してください。
- 記事が「公開」状態になっているか（下書き・非公開は表示されない）
- categoryIdに正しいカテゴリIDが入力されているか（IDが間違っているとゼロ件になる）
- postTypeが正しいか（カスタム投稿タイプのスラッグを間違えていないか）
Q. カテゴリIDはどこで確認できる？
A. WordPress管理画面 → 投稿 → カテゴリー → 対象カテゴリの「編集」をクリック → URLバーの tag_ID= の数字がカテゴリID。
Q. 表示件数を奇数にしても大丈夫？
A. 動作上は問題ないが、グリッド表示のブロックでは最後の行が左寄せになるため、偶数（4, 6, 8）を推奨。
Q. テンプレートブロック（shin系）と通常ブロックの違いは？
A. shinテンプレートブロックはセクション見出し＋ボタンが内蔵されており、1ブロックでセクション全体が完成する。通常ブロックは一覧のみなので、見出しやボタンは別途配置が必要。
共通の仕組み
postType（投稿タイプ）について
| 値 | 対象 | 説明 |
|---|---|---|
post |
投稿 | WordPressの標準投稿。ブログ記事やお知らせに使う |
page |
固定ページ | 会社概要・サービスなどの常設ページ |
| カスタム投稿タイプのスラッグ | カスタム投稿 | プラグイン等で追加した投稿タイプ（例: works, news, case_study） |
初期値は post。カスタム投稿タイプの記事を表示したい場合は、そのスラッグ（例: works）を入力する。
categoryId（カテゴリID）について
- 空欄（初期値） — 全カテゴリの記事を表示
- カテゴリIDを指定 — そのカテゴリに属する記事のみ表示（例:
3） - カテゴリIDは WordPress管理画面 > 投稿 > カテゴリー で各カテゴリを編集すると、URLの
tag_ID=の値で確認できる - カスタム投稿タイプの場合、対応するタクソノミーのタームIDを指定する
フォント関連の属性
すべてのブロックで日付・カテゴリ・タイトル（・抜粋文）のフォントとウェイトを個別設定できる。
| ウェイト値 | 見た目 |
|---|---|
300 |
細い（Light） |
400 |
通常（Regular） |
500 |
やや太い（Medium） |
600 |
太め（SemiBold） |
700 |
太い（Bold） |
無料ブロック（5種）
投稿一覧 1（lw-post-list-1）
カード型の記事グリッド。サムネイル画像＋カテゴリバッジ＋日付＋タイトル＋抜粋文をカードにまとめて並べる。情報量が最も多く、ブログのメイン一覧に最適。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| numberOfPosts | number | 6 |
表示する記事の件数。グリッド表示のため偶数（4, 6, 8）を推奨 |
| categoryId | string | "" |
表示するカテゴリのID。空欄で全カテゴリ |
| postType | string | "post" |
取得する投稿タイプ。post / カスタム投稿タイプのスラッグ |
| dateFont | string | "Noto Sans JP" |
日付のフォント |
| dateFontWeight | string | "400" |
日付のフォントウェイト |
| catFont | string | "Noto Sans JP" |
カテゴリバッジのフォント |
| catFontWeight | string | "400" |
カテゴリバッジのフォントウェイト |
| catBgColor | string | "var(--color-main)" |
カテゴリバッジの背景色。テーマのメインカラーが初期値 |
| titleFont | string | "Noto Sans JP" |
記事タイトルのフォント |
| titleFontWeight | string | "500" |
記事タイトルのフォントウェイト。やや太めの500が初期値 |
| pFont | string | "Noto Sans JP" |
抜粋文のフォント |
| pFontWeight | string | "400" |
抜粋文のフォントウェイト |
使いどころ: トップページの「最新記事」「ブログ」セクション。写真と文章で記事の内容をしっかり伝えたい場合に。
投稿一覧 2（lw-post-list-2）
投稿一覧 1と同じカード型レイアウトの別デザインバリエーション。タイトルのウェイトが400（通常太さ）で、全体的に軽い印象になる。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| numberOfPosts | number | 6 |
表示する記事の件数 |
| categoryId | string | "" |
表示するカテゴリのID。空欄で全カテゴリ |
| postType | string | "post" |
取得する投稿タイプ |
| dateFont | string | "Noto Sans JP" |
日付のフォント |
| dateFontWeight | string | "400" |
日付のフォントウェイト |
| catFont | string | "Noto Sans JP" |
カテゴリバッジのフォント |
| catFontWeight | string | "400" |
カテゴリバッジのフォントウェイト |
| catBgColor | string | "var(--color-main)" |
カテゴリバッジの背景色 |
| titleFont | string | "Noto Sans JP" |
記事タイトルのフォント |
| titleFontWeight | string | "400" |
記事タイトルのフォントウェイト。投稿一覧 1より細い400が初期値 |
| pFont | string | "Noto Sans JP" |
抜粋文のフォント |
| pFontWeight | string | "400" |
抜粋文のフォントウェイト |
使いどころ: 投稿一覧 1より柔らかく軽い印象にしたい場合。デザインの好みで選ぶ。
投稿一覧 1との違い: titleFontWeight が 500 → 400。レイアウトのデザインも異なる。
投稿一覧 3（lw-post-list-3）
抜粋文なしのコンパクトなリスト型。サムネイル＋カテゴリ＋日付＋タイトルのみで構成される。属性数も10個と少なく、シンプルな記事リストを作りたい場合に最適。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| numberOfPosts | number | 6 |
表示する記事の件数 |
| categoryId | string | "" |
表示するカテゴリのID。空欄で全カテゴリ |
| postType | string | "post" |
取得する投稿タイプ |
| dateFont | string | "Noto Sans JP" |
日付のフォント |
| dateFontWeight | string | "400" |
日付のフォントウェイト |
| catFont | string | "Noto Sans JP" |
カテゴリバッジのフォント |
| catFontWeight | string | "400" |
カテゴリバッジのフォントウェイト |
| catBgColor | string | "var(--color-main)" |
カテゴリバッジの背景色 |
| titleFont | string | "Noto Sans JP" |
記事タイトルのフォント |
| titleFontWeight | string | "400" |
記事タイトルのフォントウェイト |
使いどころ: サイドバー、フッター付近のコンパクトな記事リスト。情報量を抑えてすっきり見せたい場合に。
お知らせ一覧 1（lw-news-list-1）
日付＋カテゴリバッジ＋タイトルを横一列に並べるリスト形式。サムネイル画像や抜粋文はなく、企業サイトの「お知らせ」「NEWS」セクションに適したフォーマルなデザイン。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| numberOfPosts | number | 4 |
表示する件数。投稿一覧系（6件）より少ない4件が初期値 |
| categoryId | string | "" |
表示するカテゴリのID。空欄で全カテゴリ |
| postType | string | "post" |
取得する投稿タイプ |
| dateFont | string | "Noto Sans JP" |
日付のフォント |
| dateFontWeight | string | "400" |
日付のフォントウェイト |
| catFont | string | "Noto Sans JP" |
カテゴリバッジのフォント |
| catFontWeight | string | "400" |
カテゴリバッジのフォントウェイト |
| catBgColor | string | "var(--color-main)" |
カテゴリバッジの背景色 |
| titleFont | string | "Noto Sans JP" |
記事タイトルのフォント |
| titleFontWeight | string | "400" |
記事タイトルのフォントウェイト |
使いどころ: 企業サイトのトップページ「お知らせ」「NEWS」セクション。投稿一覧系よりフォーマルで省スペースな印象。
固定ページ一覧 1（lw-page-list-1）
固定ページをカード型グリッドで一覧表示する専用ブロック。投稿ではなく固定ページを対象とし、親ページによる絞り込み・並び順・表示項目の制御など、固定ページ特有の設定を持つ。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| uid | string | "" |
ブロックの一意識別子。通常は自動設定されるため手動変更不要 |
| numberOfPages | number | 6 |
表示する固定ページの件数 |
| parentPageId | number | 0 |
親ページのID。指定するとその子ページのみ表示。0 で全ページ |
| orderOption | string | "date_desc" |
並び順（下記参照） |
| openInNewTab | boolean | false |
リンクを新しいタブで開くかどうか |
| filterText | string | "" |
絞り込み用のテキスト。特定の条件でフィルタリングする際に使用 |
| imagePattern | string | "ptn_1" |
サムネイル画像の表示パターン（下記参照） |
| showDate | boolean | false |
日付を表示するかどうか。初期値はOFF |
| showExcerpt | boolean | true |
抜粋文を表示するかどうか。初期値はON |
| dateFont | string | "Noto Sans JP" |
日付のフォント（showDate が true の場合のみ表示） |
| dateFontWeight | string | "400" |
日付のフォントウェイト |
| titleFont | string | "Noto Sans JP" |
ページタイトルのフォント |
| titleFontWeight | string | "500" |
ページタイトルのフォントウェイト |
| exFont | string | "Noto Sans JP" |
抜粋文のフォント（showExcerpt が true の場合のみ表示） |
| exFontWeight | string | "400" |
抜粋文のフォントウェイト |
| catBgColor | string | "var(--color-main)" |
ラベルの背景色 |
orderOption（並び順）の値
| 値 | 説明 |
|---|---|
date_desc |
日付の新しい順（初期値） |
date_asc |
日付の古い順 |
title_asc |
タイトルの昇順（あいうえお順 / ABC順） |
title_desc |
タイトルの降順 |
menu_order |
メニュー順（WordPress管理画面のページ属性「順序」で指定した値） |
imagePattern（画像パターン）の値
| 値 | 説明 |
|---|---|
ptn_1 |
標準パターン（初期値）。通常のカード型サムネイル表示 |
ptn_2 |
バリエーション2。画像の表示比率やトリミングが異なる |
ptn_3 |
バリエーション3。より装飾的な画像表示 |
使いどころ: サービス一覧（各サービスが固定ページ）、実績ポートフォリオ、施設案内など。parentPageId で「サービス」親ページの子ページだけを一覧表示するといった使い方が便利。
テンプレートブロック（2種）
テンプレート専用のブロック。セクション全体（見出し＋一覧＋「もっと見る」ボタン）がパッケージになっており、1ブロックで完結するセクションを作れる。フォントの初期値が Montserrat になっているなど、テンプレートのデザインに合わせた設定になっている。
お知らせ一覧 1 shin（shin-gas-station-01-news）
セクション見出し（メインタイトル＋サブタイトル）＋お知らせリスト＋「詳しく見る」ボタンがセットになったテンプレート用ニュースセクション。見出しとボタンが含まれるため、別途見出しブロックやボタンブロックを配置する必要がない。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| mainTitle | string | "お知らせ" |
セクションのメインタイトル（日本語） |
| subTitle | string | "News" |
セクションのサブタイトル（英語など） |
| buttonText | string | "詳しく見る" |
一覧下部に表示するリンクボタンのテキスト |
| buttonUrl | string | "" |
ボタンのリンク先URL。お知らせ一覧ページなどを指定 |
| openInNewTab | boolean | false |
ボタンリンクを新しいタブで開くかどうか |
| numberOfPosts | number | 4 |
表示する記事の件数 |
| categoryId | string | "" |
表示するカテゴリのID。空欄で全カテゴリ |
| postType | string | "post" |
取得する投稿タイプ |
| dateFont | string | "Montserrat" |
日付のフォント。テンプレートに合わせ Montserrat が初期値 |
| dateFontWeight | string | "400" |
日付のフォントウェイト |
| catFont | string | "Montserrat" |
カテゴリバッジのフォント |
| catFontWeight | string | "600" |
カテゴリバッジのフォントウェイト。やや太めの600が初期値 |
| catBgColor | string | "var(--color-main)" |
カテゴリバッジの背景色 |
| titleFont | string | "Noto Sans JP" |
記事タイトルのフォント |
| titleFontWeight | string | "400" |
記事タイトルのフォントウェイト |
使いどころ: shinテンプレートのトップページ「お知らせ」セクション。見出し＋一覧＋ボタンが1ブロックで完結するため、配置が簡単。
無料版 お知らせ一覧 1 との違い:
- セクション見出し（mainTitle / subTitle）が内蔵
- 「詳しく見る」ボタン（buttonText / buttonUrl）が内蔵
- 日付・カテゴリのフォント初期値が
Montserrat - カテゴリのウェイト初期値が
600（太め）
投稿一覧 1 shin（shin-gas-station-01-post-list）
セクション見出し＋カード型記事グリッド＋「詳しく見る」リンクがセットになったテンプレート用ブログセクション。
| 属性名 | 型 | 初期値 | 説明 |
|---|---|---|---|
| titleMain | string | "Driveブログ" |
セクションのメインタイトル |
| linkText | string | "詳しく見る" |
一覧下部に表示するリンクテキスト |
| linkUrl | string | "#" |
リンク先URL。ブログ一覧ページなどを指定 |
| openInNewTab | boolean | false |
リンクを新しいタブで開くかどうか |
| numberOfPosts | number | 6 |
表示する記事の件数 |
| categoryId | string | "" |
表示するカテゴリのID。空欄で全カテゴリ |
| postType | string | "post" |
取得する投稿タイプ |
| dateFont | string | "Montserrat" |
日付のフォント |
| dateFontWeight | string | "400" |
日付のフォントウェイト |
| catFont | string | "Montserrat" |
カテゴリバッジのフォント |
| catFontWeight | string | "400" |
カテゴリバッジのフォントウェイト |
| catBgColor | string | "var(--color-main)" |
カテゴリバッジの背景色 |
| titleFont | string | "Noto Sans JP" |
記事タイトルのフォント |
| titleFontWeight | string | "600" |
記事タイトルのフォントウェイト。太めの600が初期値 |
使いどころ: shinテンプレートのトップページ「ブログ」セクション。セクション見出し＋記事グリッド＋リンクが1ブロックで完結。
無料版 投稿一覧 1 との違い:
- セクション見出し（titleMain）が内蔵
- 「詳しく見る」リンク（linkText / linkUrl）が内蔵
- 日付・カテゴリのフォント初期値が
Montserrat - タイトルのウェイト初期値が
600（太め） - 抜粋文のフォント設定（pFont / pFontWeight）がない
どれを使えばいい？ — 7ブロック比較ガイド
用途別の選び方
| 用途 | おすすめブロック | 理由 |
|---|---|---|
| ブログの最新記事（情報量多め） | 投稿一覧 1 | サムネイル＋カテゴリ＋日付＋タイトル＋抜粋文。全情報を網羅 |
| ブログの最新記事（軽い印象） | 投稿一覧 2 | 投稿一覧 1と同等だがデザインが柔らかい |
| コンパクトな記事リスト | 投稿一覧 3 | 抜粋文なしで省スペース。サイドバーやフッター向き |
| 企業のお知らせセクション | お知らせ一覧 1 | 横一列のフォーマルな表示。ビジネスサイトに最適 |
| 固定ページの一覧 | 固定ページ一覧 1 | サービス紹介・実績など固定ページ専用の唯一のブロック |
| テンプレートのお知らせ | お知らせ一覧 1 shin | 見出し＋ボタンが内蔵。1ブロックで完結 |
| テンプレートのブログ | 投稿一覧 1 shin | 見出し＋リンクが内蔵。1ブロックで完結 |
ブロック機能比較表
| 機能 | 投稿一覧 1 | 投稿一覧 2 | 投稿一覧 3 | お知らせ一覧 1 | 固定ページ一覧 1 | shin ニュース | shin 投稿一覧 |
|---|---|---|---|---|---|---|---|
| 属性数 | 12 | 12 | 10 | 10 | 16 | 15 | 14 |
| サムネイル表示 | o | o | o | - | o | - | o |
| カテゴリバッジ | o | o | o | o | - | o | o |
| 日付表示 | o | o | o | o | 任意 | o | o |
| 抜粋文表示 | o | o | - | - | 任意 | - | - |
| セクション見出し | - | - | - | - | - | o | o |
| リンクボタン | - | - | - | - | - | o | o |
| 並び順の設定 | - | - | - | - | o | - | - |
| 画像パターン切替 | - | - | - | - | o | - | - |
| 新しいタブで開く | - | - | - | - | o | o | o |
| 表示件数の初期値 | 6 | 6 | 6 | 4 | 6 | 4 | 6 |
| ティア | 無料 | 無料 | 無料 | 無料 | 無料 | テンプレート | テンプレート |
運用のポイント
- 表示件数は偶数（4, 6, 8）がおすすめ — グリッド表示時に左右均等に並ぶ
- アイキャッチ画像を必ず設定する — 投稿一覧系のサムネイルはアイキャッチ画像から取得される
- カテゴリバッジの色はテーマのメインカラーが初期値 — サイト全体の統一感が保たれる。個別に変えたい場合は
catBgColorで指定 - テンプレートブロックのフォント — 日付・カテゴリに
Montserratを使用しているため、テンプレート以外で使う場合はフォントを変更した方がサイト全体と馴染む
最終更新: 2026-03-15 13:00