こんにちは "osaboo"
です。"@osaboo_Bot"
この記事で解決できる悩み
この記事では、これらのお悩みを解決します。
「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。
関連記事 AFFINGER7の初期設定については、以下の記事で詳しく解説しています。
-
-
AFFINGER7の初期設定完全ガイド｜導入後に最初にやるべき設定を初心者向けに解説
AFFINGER7の初期設定を初心者向けにわかりやすく解説。設定画面の場所から導入後に最初にやるべき設定、おすすめ設定、SEOやアフィリエイトに役立つ設定まで順番に紹介します。
AFFINGER7のカード型記事一覧とは？
AFFINGER7では、トップページに表示する記事一覧をカード型のレイアウトに変更できます。
カード型にすると、記事タイトルやアイキャッチ画像を並べて表示できるため、複数の記事を一覧で見せたいときに便利です。
通常の記事一覧よりも記事を視覚的に整理しやすく、トップページから目的の記事を探しやすくできます。
AFFINGER7でブログのトップページを整えるなら、記事一覧の表示方法も確認しておきましょう。
AFFINGER7でトップページにカード型記事一覧を表示する方法
AFFINGER7では、トップページの記事一覧をカード型で表示できます。
カード型の記事一覧を表示するには、トップページの記事一覧に関する設定と、カード表示の設定を確認します。
まずは、WordPress管理画面から「AFFINGER管理」を開き、トップページの記事一覧に関する設定を確認しましょう。
記事一覧をカード型にする（ホームページの表示→最新の投稿）
WordPress管理画面から、「AFFINGER管理」→「トップ / 記事一覧」を開きます。
「記事一覧のカードデザイン化」の設定を有効にすると、トップページやアーカイブの記事一覧をカード型で表示できます。AFFINGER7では、通常版でもこのカードデザインを利用できます。
カード型の記事一覧では、画面サイズに応じて表示する列数を指定できます。
例えば、
3,2,1
と設定した場合は、
- 960px以上：3列
- 959～600px：2列
- 599px以下：1列
で表示されます。
設定を変更したら保存し、トップページを表示してカード型の記事一覧になっているか確認しましょう。
リスト型の記事一覧（標準）
- トップページ及びアーカイブの記事一覧をカードデザインにする → ON
カード型の記事一覧（列数は変更可）
ポイント
WordPress管理画面の「設定」→「表示設定」で、「ホームページの表示」が「最新の投稿」に設定されていることが条件です。
「固定ページ」をホームページに設定している場合は、次の章で解説する方法を参考にしてください。
最新の投稿
固定ページ
関連記事
トップページ全体のデザインやレイアウトを調整したい場合は、以下の記事も参考にしてください。
-
-
AFFINGER7のサイトデザイン設定｜カスタマイズ方法とおすすめ設定
AFFINGER7でサイトデザインを整える方法を解説。サイト全体のカラーやトップページ、ヘッダー・メニュー、フォント、余白、サイドバーなど、見やすいサイトに仕上げるための設定をまとめています。
記事一覧をカード型にする（ホームページの表示→固定ページ）
固定ページをホームページに設定している場合、標準の記事一覧はリスト型で表示され、カード型に変更できません。
そにため、
- 新着一覧を表示する → OFF（リスト型で記事一覧を表示する場合は「ON」すれば完了です。）
に設定します。
新着記事一覧の上部には、初期設定で「NEW ENTRY」の見出しが表示されます。
「新着記事一覧に表示する見出し」に任意のテキストを入力すると、見出しを変更できます。
ここからは、「カード型の記事一覧」を固定ページに表示する設定を解説します。
ホームページに設定している固定ページを開きます。
Menu『WordPress管理画面 → 固定ページ』をクリックし、固定ページ一覧からホームページに設定している「フロントページ」を選択します。
「＋」ボタンからカラムブロックを追加します。
「＋」ボタンからカラムブロックを追加し、表示したい分割レイアウトを選択します。
各カラムに「AFFINGER：カテゴリー記事一覧」ブロックを挿入します。
各カラム内の「＋」ボタンをクリックし、ブロック一覧から「AFFINGER：カテゴリー記事一覧」を追加します。
カラムごとに同じ操作を行い、記事一覧を表示したいすべてのカラムにブロックを挿入します。
ブロックの設定画面で、表示したいカテゴリーの「ID」を入力します。
追加した「AFFINGER：カテゴリー記事一覧」ブロックをクリックし、右側の「ブロック」設定画面を開きます。
「カテゴリーID」の入力欄に、表示したいカテゴリーのID（半角数字）を入力します。
Menu『WordPress管理画面 → 投稿 → カテゴリー』をクリックします。
赤矢印で示した半角数字が、カテゴリーIDです。
設定を保存して、トップページに記事一覧が表示されていることを確認します。
設定が完了したら、固定ページを「保存」して変更を更新します。
その後、トップページを表示し、設定したカテゴリーの記事一覧がカード型で表示されていることを確認します。
AFFINGER7でサムネイル画像がうまく表示されないときの対処法
カード型の記事一覧にサムネイル画像が表示されない場合は、アイキャッチ画像の設定やAFFINGER7のサムネイル設定を確認しましょう。
アイキャッチ画像が設定されていない記事では、通常はカード型の記事一覧にサムネイル画像が表示されません。
ただし、デフォルトのサムネイル画像（No image）を設定しておけば、アイキャッチ画像がない投稿や固定ページでもサムネイルを表示できます。
アイキャッチ画像を設定する
WordPressの投稿編集（エディター）画面を開き、右側の設定パネルから「投稿」→「アイキャッチ画像」を確認します。
「アイキャッチ画像を設定」をクリックし、記事の内容に合った画像を選択します。
設定後は記事を更新し、トップページのカード型記事一覧を確認してください。
アイキャッチ画像を設定しても表示されない場合
アイキャッチ画像を設定しているにもかかわらず表示されない場合は、AFFINGER7側のサムネイル設定を確認します。
WordPress管理画面から、「AFFINGER管理」→「全体設定」を開き、サムネイルに関する設定を確認してください。
また、キャッシュ系のプラグインを使用している場合は、キャッシュが原因で変更が反映されていないこともあります。
設定を変更した後はキャッシュを削除し、ページを再読み込みして表示を確認しましょう。
アイキャッチ画像のサイズも確認する
カード型の記事一覧では、アイキャッチ画像のサイズや縦横比によって表示の見え方が変わります。
記事ごとに画像のサイズや比率が大きく異なると、カード一覧で画像の高さが揃わず、見た目が崩れているように感じる場合があります。
そのため、アイキャッチ画像はできるだけ同じサイズ・同じ比率で用意しておくと、カード型の記事一覧をきれいに表示できます。
関連記事 アイキャッチ画像の設定方法は、以下の記事で詳しく解説しています。
AFFINGER7のカード型記事一覧が表示されないときの対処法
AFFINGER7でカード型の記事一覧がうまく表示されない場合は、設定した方法や表示内容によって原因が異なります。
まずは、以下の項目を確認してください。
| 症状 | 確認するポイント |
|---|---|
| カード型にならずリスト型で表示される | ホームページの表示設定・カードデザイン化の設定 |
| 記事一覧が表示されない | 表示対象の記事・カテゴリー |
| 特定のカテゴリーの記事だけ表示されない | カテゴリーID |
| 指定した記事が表示されない | 投稿ID |
| サムネイル画像だけ表示されない | アイキャッチ画像・No image |
| 設定変更が反映されない | ブラウザやキャッシュ |
| スマホだけ表示が崩れる | カラム数・レスポンシブ表示 |
カード型にならずリスト型で表示される
ホームページを「最新の投稿」に設定している場合と、「固定ページ」に設定している場合では、記事一覧の表示方法が異なります。
固定ページをホームページに設定している場合は、標準の新着記事一覧ではなく、固定ページ内に「AFFINGER：カテゴリー記事一覧」ブロックなどを配置してカード型の記事一覧を作成します。
詳しい設定方法は、前述の「ホームページの表示が『固定ページ』の場合」をご覧ください。
記事一覧が表示されない
「AFFINGER：カテゴリー記事一覧」ブロックを使用している場合は、指定したカテゴリーに記事が登録されているか確認します。
記事がないカテゴリーを指定している場合、記事一覧は表示されません。
また、カテゴリーIDの入力間違いがないかも確認しましょう。
詳しい設定方法は、前述の「カテゴリーIDを入力する」をご覧ください。
特定のカテゴリーの記事だけ表示されない
カテゴリーを指定している場合は、ブロックに入力したカテゴリーIDを確認してください。
カテゴリーIDが間違っていると、目的のカテゴリーの記事が表示されません。
詳しい確認方法は、前述の「カテゴリーIDを入力する」をご覧ください。
指定した記事が表示されない
「AFFINGER：記事一覧（ID）」ブロックを使用している場合は、入力した投稿IDを確認します。
指定した投稿や固定ページのIDが間違っていると、目的の記事が表示されません。
詳しい設定方法は、前述の「記事を個別に指定する場合」をご覧ください。
サムネイル画像だけ表示されない
記事一覧は表示されているのにサムネイル画像だけ表示されない場合は、記事にアイキャッチ画像が設定されているかを確認します。
アイキャッチ画像がない場合でも、デフォルトのサムネイル画像（No image）を設定していれば、サムネイルを表示できます。
詳しい設定方法は、前述の「AFFINGER7でサムネイル画像がうまく表示されないときの対処法」をご覧ください。
設定変更が反映されない
設定を変更したのに表示が変わらない場合は、ブラウザやキャッシュに古いページが残っている可能性があります。
まずはページを再読み込みし、それでも反映されない場合は使用しているキャッシュ系プラグインなどのキャッシュを確認してください。
スマホだけ表示が崩れる
PCでは問題なく表示されるのにスマホで崩れる場合は、カラムブロックの設定を確認します。
特に、カラム数が多すぎるとスマホ画面ではカードが狭くなり、記事タイトルやサムネイルが見づらくなる場合があります。
スマホでの表示を確認しながら、カラム数やレイアウトを調整しましょう。
よくある質問
AFFINGER7でトップページの記事一覧をカード型にできますか？
はい、できます。
「AFFINGER管理 → トップページ / 記事一覧」から「記事一覧のカードデザイン化」を設定すると、記事一覧をカード型で表示できます。
固定ページをトップページに設定している場合もカード型にできますか？
はい、できます。
固定ページをホームページに設定している場合は、「新着一覧を表示する」をOFFにし、固定ページに「AFFINGER：カテゴリー記事一覧」ブロックを追加します。
カテゴリーごとに記事一覧を表示できますか？
はい、できます。
固定ページに「AFFINGER：カテゴリー記事一覧」ブロックを追加し、表示したいカテゴリーのIDを入力することで、カテゴリーごとの記事一覧を表示できます。
サムネイル画像が表示されない場合はどうすればいいですか？
まず、記事にアイキャッチ画像が設定されているか確認してください。
アイキャッチ画像がない場合でも、デフォルトのサムネイル画像（No image）を設定しておけば画像を表示できます。
特定の記事だけを指定して表示できますか？
「AFFINGER：記事一覧（ID）」ブロックを使えば、投稿IDを指定して特定の記事を表示できます。
まとめ！AFFINGER7でトップページにカード型の記事一覧を表示する方法｜設定手順を解説
AFFINGER7では、トップページの記事一覧をカード型で表示できます。
「最新の投稿」をホームページに設定している場合は、AFFINGER管理からカードデザインを設定するだけで表示できます。
固定ページをホームページに設定している場合は、「AFFINGER：カテゴリー記事一覧」ブロックを使うことで、カテゴリーごとの記事一覧をカード型で表示できます。
また、「AFFINGER：記事一覧（ID）」ブロックを使えば、表示する記事を個別に指定することも可能です。
トップページの構成に合わせて記事一覧をカード型に整えることで、目的の記事を見つけやすいサイトにできます。
