AFFINGER7のカテゴリ一覧ブロックの使い方｜カテゴリー別の記事一覧を表示する方法

「同じカテゴリーの記事をまとめて表示したい」

「AFFINGER7のカテゴリ一覧ブロックはどうやって使うの？」

「記事一覧（ID）ブロックとの違いが分からない」

AFFINGER7で記事を書いていると、このようにカテゴリーごとの記事一覧を記事内に表示したい場面があります。

そんなときに便利なのが「カテゴリ一覧ブロック」です。

カテゴリ一覧ブロックを使えば、表示したいカテゴリーを指定するだけで、そのカテゴリーに登録されている記事を一覧表示できます。

たとえば、

• 同じカテゴリーの記事をまとめて紹介する
• 関連記事を記事下に表示する
• まとめ記事から個別記事へ誘導する
• カテゴリーごとの新着記事を表示する

といった使い方ができます。

この記事では、AFFINGER7のカテゴリ一覧ブロックの基本的な使い方から、カード化・無限スクロール・スライドショーなどの設定まで初心者向けにわかりやすく解説します。

また、「記事一覧（ID）ブロック」や「タブ式カテゴリー記事一覧」との違いについても紹介します。

※この記事はAFFINGER6時代に作成した内容を、AFFINGER7対応版として全面的にリライトしています。

AFFINGER7の設定やカスタマイズをまとめて確認したい方はこちら

→ AFFINGER7の使い方完全ガイド｜初期設定・記事作成・カスタマイズを初心者向けに解説

AFFINGER7の「カテゴリ一覧ブロック」とは？

AFFINGER7の「カテゴリ一覧ブロック」は、指定したカテゴリーの記事を一覧表示できるAFFINGER専用ブロックです。

たとえばブログ内に、

• WordPress初心者
• AFFINGER7
• TCD
• ブログ運営

といったカテゴリーを作成している場合、「AFFINGER7」を指定すればAFFINGER7カテゴリーの記事をまとめて表示できます。

カテゴリー単位で記事を表示できるため、関連記事や新着記事をまとめて見せたいときに便利です。

カテゴリーの記事を自動的に一覧表示できる

カテゴリ一覧ブロックの大きな特徴は、記事を1件ずつ指定するのではなく、カテゴリーを指定して記事を表示できることです。

そのため、「新しい記事を公開するたびに関連記事を手作業で追加する」という手間を減らせます。

カテゴリーをまだ作成していない方は、先にカテゴリーを整理しておきましょう。

関連記事：

→ AFFINGER7でカテゴリーを作成する方法とカテゴリーページのカスタマイズ方法

AFFINGER7のカテゴリ一覧ブロックでできること

AFFINGER7のカテゴリ一覧ブロックでは、カテゴリーを指定するだけでなく、表示方法を細かく設定できます。

主な機能は次のとおりです。

機能	内容
カテゴリー	表示するカテゴリーを指定
除外カテゴリー	表示させたくないカテゴリーを指定
表示記事数	一覧に表示する記事数を指定
昇順・降順	記事の表示順を設定
並び順	記事の並び方を設定
子カテゴリーを含む	子カテゴリーの記事も対象にする
カード化	カード形式で表示【EX限定】
無限スクロール	記事を追加読み込み【EX限定】
スライドショー	横スライド形式で表示

基本的なカテゴリー一覧は通常版でも利用できます。

初心者の方は、まず

カテゴリーを選ぶ
↓
表示記事数を設定する
↓
並び順を確認する

という基本設定から始めれば十分です。

カード化や無限スクロールは、必要になってから検討しても問題ありません。

AFFINGER7でカテゴリ一覧ブロックを設置する方法

それでは実際にカテゴリ一覧ブロックを設置してみましょう。

基本的な流れは次の4ステップです。

カテゴリ一覧ブロックの設定項目

ここからは、それぞれの設定項目について詳しく見ていきます。

カテゴリーを指定する

「カテゴリー」では、一覧に表示したいカテゴリーを指定します。

ブログに複数のカテゴリーがある場合でも、必要なカテゴリーだけを選択できます。

カテゴリ一覧ブロックでもっとも基本となる設定です。

除外するカテゴリーを指定する

「除外カテゴリー」では、一覧へ表示したくないカテゴリーを指定できます。

複数カテゴリーを対象にするとき、「このカテゴリーの記事だけは表示したくない」という場合に便利です。

必要がなければ設定しなくても問題ありません。

表示する記事数を設定する

一覧に表示する記事数を指定できます。

たくさんの記事を表示することもできますが、記事数を増やしすぎるとページが長くなり、読み込みにも時間がかかる可能性があります。

まずは3〜5記事程度から始めて、ページ全体のバランスを見ながら調整するのがおすすめです。

たくさんの記事を見せたい場合は、一度に大量表示するよりも、後ほど紹介する無限スクロールなども検討するのがお勧めです。

記事の並び順を変更する

カテゴリ一覧ブロックでは、記事の並び方を変更できます。

新しい記事を優先して表示したい場合など、目的に合わせて設定しましょう。

特にこだわりがなければ、最初は標準設定のままでも問題ありません。

昇順・降順を設定する

記事を昇順・降順のどちらで表示するか設定できます。

• ASC：昇順
• DESC：降順

記事をどちらの方向から並べるか変更したい場合に利用します。

子カテゴリーの記事を含める

カテゴリーを階層化している場合は、子カテゴリーの記事を一覧へ含めるかどうかも設定できます。

たとえば、

WordPressテーマ

• AFFINGER7
• SWELL
• TCD

という構成にしている場合、「WordPressテーマ」を親カテゴリーとして利用できます。

親カテゴリーだけでなく、その下にあるカテゴリーの記事までまとめて表示したいときに便利です。

カテゴリ一覧をカード形式で表示する方法【EX版】

AFFINGER7 EXでは、カテゴリ一覧をカード形式で表示できます。

通常の記事一覧とは違ったデザインになるため、アイキャッチ画像を活かして記事を紹介したい場合に便利です。

実際の表示はこんな感じです。

カード表示がおすすめな場所

カード表示は、たとえば次のような場所と相性があります。

• まとめ記事
• おすすめ記事一覧
• トップページ
• カテゴリーへの導線
• 関連記事の紹介

ただし、すべての記事一覧をカード表示にする必要はありません。

特に読んでもらいたい記事を視覚的に目立たせたい場所で利用するのがおすすめです。

なお、カテゴリ一覧ブロックのカード化はAFFINGER7 EX限定機能です。

「通常版でも十分なのか」「EX版へアップグレードした方がよいのか」で迷っている方は、機能の違いを確認してから判断してください。

AFFINGER7通常版とEX版で迷っている方へ

→ AFFINGER7通常版とEX版の違いを徹底比較

無限スクロールを設定する方法【EX版】

AFFINGER7 EXでは、カテゴリ一覧ブロックで無限スクロールを利用できます。

無限スクロールを有効にすると、一覧の記事を追加で読み込めるようになります。

記事数の多いカテゴリーを表示したい場合に便利な機能です。

無限スクロールを有効にする

まず、カテゴリ一覧ブロックの設定から「無限スクロール」を有効にします。

ただし、ブロック側の設定だけではなく、テーマ側でも無限スクロールを有効にしておく必要があります。

AFFINGER管理 → 投稿・固定記事設定から、「もっと読む（無限スクロール）を使用する」を有効にしてください。

「カテゴリ一覧ブロックで無限スクロールをONにしたのに動かない」という場合は、まずテーマ側の設定を確認してみましょう。

無限スクロールがおすすめなケース

無限スクロールは、

• カテゴリーの記事数が多い
• 最初から大量の記事を表示したくない
• 読者の操作に合わせて追加記事を表示したい

といった場合に向いています。

一方、関連記事を3〜5記事ほど表示するだけであれば、無理に使う必要はありません。

サイト構成に合わせて使い分けましょう。

カテゴリ一覧をスライドショー表示する方法

カテゴリ一覧ブロックでは、記事一覧をスライドショー形式で表示することもできます。

実際の表示はこんな感じです。

スライドショーを有効にすると、

• PC
• タブレット
• スマートフォン

それぞれの表示数を調整できます。

そのほか、

• 日付の表示
• ReadMoreのテキスト
• モバイル中央寄せ
• 「画像のみ」
• 「画像＋タイトル」

などの設定も可能です。

スライドショーがおすすめな使い方

スライドショーは、

• 関連記事
• おすすめ記事
• カテゴリーの新着記事

などを省スペースで紹介したい場合に便利です。

ただし、スライド操作をしなければ次の記事が見えないため、必ず読んでほしい記事を並べる用途では通常表示の方が適している場合もあります。

「省スペースで複数記事を見せたいときに使う」くらいで考えておくと使いやすいでしょう。

カテゴリ一覧ブロックと記事一覧（ID）ブロックの違い

AFFINGER7には、カテゴリ一覧ブロックとよく似た機能として「記事一覧（ID）ブロック」があります。

どちらを使えばいいのか迷いやすいのですが、大きな違いは、カテゴリーを指定するのか、記事を指定するのかという点です。

比較	カテゴリ一覧ブロック	記事一覧（ID）ブロック
記事の指定	カテゴリー単位	記事ID単位
新規記事への対応	カテゴリーに応じて表示	自分で記事を追加
好きな記事だけ選ぶ
カテゴリー記事一覧
厳選記事の紹介
主な用途	関連記事・カテゴリー一覧	おすすめ記事・まとめ記事

カテゴリ一覧ブロックがおすすめな場合

次のような場合はカテゴリ一覧ブロックがおすすめです。

• 同じカテゴリーの記事をまとめたい
• 新しく追加した記事も対象にしたい
• カテゴリー単位で関連記事を見せたい
• 新着記事一覧を作りたい

記事一覧（ID）ブロックがおすすめな場合

一方、「この3記事を順番に読んでほしい」というように、自分で記事を選びたい場合は「記事一覧（ID）ブロック」の方が向いています。

記事IDを指定できるため、カテゴリーに関係なく任意の記事を選択できます。

たとえば、

• 初心者が最初に読む3記事
• おすすめ記事5選
• 比較記事から個別レビューへの導線

などは記事一覧（ID）ブロックの方が作りやすいです。

記事を自分で選んで表示したい方はこちら

→ AFFINGER7の記事一覧ブロックの使い方｜記事IDを指定して関連記事を表示する方法

タブ式カテゴリー記事一覧との違い

AFFINGER7には、トップページで複数カテゴリーの記事を切り替えて表示できる「タブ式カテゴリー記事一覧」もあります。

たとえば、

AFFINGER7｜SWELL｜TCD

のようにタブを設置し、読者がタブをクリックすることで表示するカテゴリーを切り替えられます。

3つの機能を整理すると次のようになります。

機能	おすすめ用途
カテゴリ一覧ブロック	記事本文内へカテゴリー記事一覧を表示
記事一覧（ID）ブロック	自分で選んだ記事を表示
タブ式カテゴリー記事一覧	トップページで複数カテゴリーを整理

つまり、

記事本文にカテゴリー記事を表示したい→ カテゴリ一覧ブロック

好きな記事だけ選びたい→ 記事一覧（ID）ブロック

トップページをカテゴリー別に整理したい→ タブ式カテゴリー記事一覧

という使い分けがおすすめです。

トップページのカテゴリーを整理したい方はこちら

→ AFFINGER7でタブ式カテゴリー記事一覧を表示する方法

カテゴリ一覧ブロックのおすすめ活用方法

カテゴリ一覧ブロックは単純に記事を一覧表示するだけでなく、サイト内を回遊してもらうための導線にも活用できます。

まとめ記事から個別記事へ誘導する

特におすすめなのがまとめ記事での利用です。

たとえば、

AFFINGER7の使い方完全ガイド
↓
AFFINGER7カテゴリーの記事一覧
↓
各機能の詳しい解説記事

という流れを作れます。

まとめ記事だけでは説明しきれない内容を個別記事へ分けている場合、カテゴリ一覧ブロックを設置しておけば関連記事を探しやすくなります。

カテゴリーの新着記事を表示する

継続的に記事を追加しているカテゴリーにも向いています。

新しく公開した記事を同じカテゴリーへ登録しておけば、そのカテゴリーの記事一覧として表示できます。

記事数の多いカテゴリーほど便利です。

関連記事として利用する

記事の最後に同じカテゴリーの記事を表示する方法もあります。

読者が次の記事を探しやすくなるため、サイト内回遊の導線として活用できます。

トップページのカテゴリー導線として利用する

固定ページをトップページとして利用している場合は、カテゴリーごとの記事一覧を配置する方法もあります。

ただし、複数のカテゴリーをコンパクトに整理したい場合は「タブ式カテゴリー記事一覧」の方が適していることもあります。

表示したいカテゴリー数やトップページ全体のレイアウトを考えて使い分けましょう。

カテゴリ一覧ブロックが表示されない場合

カテゴリ一覧ブロックを設置したのに、「記事一覧が表示されない」という場合は、次の項目を確認してみましょう。

カテゴリーに記事が登録されているか確認する

まず、指定したカテゴリーに記事が登録されているか確認してください。

カテゴリーだけ作成して記事が登録されていなければ、表示する記事がありません。

「投稿」→「投稿一覧」

から対象記事のカテゴリーを確認しましょう。

指定しているカテゴリーを確認する

違うカテゴリーを選択していないか確認します。

カテゴリー数が多いサイトでは、似た名称のカテゴリーを間違えて指定している場合があります。

除外カテゴリーを確認する

「除外カテゴリー」に、表示したいカテゴリーが設定されていないか確認しましょう。

除外設定が原因で想定どおり表示されていない可能性があります。

投稿編集画面だけで判断しない

カテゴリ一覧ブロックは、処理負荷を軽減するため投稿管理画面上では実際の記事一覧が表示されない仕様になっています。

編集画面だけを見て、「記事一覧が表示されない」と判断しないようにしてください。

必ずプレビューまたは公開ページでも確認しましょう。

無限スクロールの設定を確認する

無限スクロールだけが動作しない場合は、AFFINGER管理 → 投稿・固定記事設定の設定を確認してください。

「もっと読む（無限スクロール）を使用する」が有効になっている必要があります。

カテゴリ一覧ブロックを使うときの注意点

カテゴリ一覧ブロックは便利ですが、記事をたくさん表示すればよいわけではありません。

特に次の点を意識しましょう。

• 一度に表示する記事を増やしすぎない
• 記事内容と関係のないカテゴリーを表示しない
• 同じ記事一覧を何度も設置しない
• スマートフォン表示も確認する
• 公開ページで最終確認する

重要なのは、

「たくさんの記事を見せること」ではなく、「読者が次に読みたい記事を見つけやすくすること」です。

また、カテゴリ一覧ブロックは再利用ブロックとして保存・使用しないよう公式マニュアルで案内されています。

頻繁に使う場合でも、再利用ブロック化しないよう注意しましょう。

AFFINGER7のカテゴリ一覧ブロックに関するよくある質問

カテゴリ一覧ブロックはAFFINGER7通常版でも使えますか？

はい。

カテゴリ一覧ブロックの基本機能は通常版でも利用できます。

ただし、

• カード化
• 無限スクロール

はEX版限定機能です。

カード化はAFFINGER7通常版でも使えますか？

カード化はEX版限定です。

カード形式でカテゴリ一覧を表示したい場合は、AFFINGER7 EXが必要です。

EX版が必要か迷っている方は、通常版との違いを先に確認してみてください。

→ AFFINGER7通常版とEX版の違いを確認する

新しい記事を投稿したら一覧にも表示されますか？

カテゴリ一覧ブロックは指定カテゴリーの記事を表示する機能です。

新しく公開した記事を対象のカテゴリーに登録すれば、そのカテゴリーの記事一覧として表示されます。

特定の記事だけを表示したい場合は「記事一覧（ID）ブロック」を利用しましょう。

記事一覧（ID）ブロックとの違いは何ですか？

記事の指定方法が違います。

カテゴリ一覧ブロック
→ カテゴリーを指定

記事一覧（ID）ブロック
→ 記事IDを指定

カテゴリーの記事をまとめて表示するなら「カテゴリ一覧」、読ませたい記事を自分で選ぶなら「記事一覧（ID）」がおすすめです。

トップページでも使えますか？

コンテンツ内でカテゴリ一覧ブロックを利用できます。

ただし、AFFINGERのブロック機能は基本的に記事コンテンツ内での利用を想定した機能です。

トップページで複数カテゴリーを整理して表示することが目的なら、「タブ式カテゴリー記事一覧」も検討してみてください。

まとめ｜カテゴリー別の記事一覧ならカテゴリ一覧ブロックが便利

今回は、AFFINGER7のカテゴリ一覧ブロックの使い方を紹介しました。

カテゴリ一覧ブロックを使えば、指定したカテゴリーの記事をまとめて一覧表示できます。

特に、

• 同じカテゴリーの記事をまとめたい
• 関連記事を表示したい
• 新しく追加した記事も一覧へ反映したい
• まとめ記事から個別記事への導線を作りたい

という場合に便利です。

一方、「この3記事を読んでほしい」というように記事を自分で選びたい場合は、記事一覧（ID）ブロックの方が向いています。

使い分けはシンプルです。

カテゴリー単位で表示する→ カテゴリ一覧ブロック

記事単位で指定する→ 記事一覧（ID）ブロック

トップページでカテゴリーを切り替える→ タブ式カテゴリー記事一覧

この3つを使い分けると、AFFINGER7の記事導線をかなり整理しやすくなります。

AFFINGER7には、このほかにも記事作成・カスタマイズ・サイト回遊に役立つ機能が多数あります。

AFFINGER7の設定や使い方をまとめて確認したい方は、次の記事から必要な設定を探してみてください。

→ AFFINGER7の使い方完全ガイド｜初期設定・記事作成・カスタマイズを初心者向けに解説