こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6でトップページにカード型記事一覧を表示する方法を解説。STD・EX両対応の設定手順からカスタマイズのポイントまでまとめています。
AFFINGER6-STDで、記事一覧をカード型で表示したい方！必見です。
トップページにカード型の記事一覧を表示？どうやる…
＼初心者でも安心！ コスパ最強のWordPressテーマ／
＼効果測定に必要なプラグインをまとめた特別セット／
AFFINGER6のSTD版とEX版の違い
冒頭でもお伝えしたとおり、AFFINGER6のSTD版にはカード型デザインで記事一覧を表示する拡張機能がありません。
そのため、クラシックエディターを使って手動でカード型の記事一覧を作成する必要があります。
一方、AFFINGER6のEX版には、カード型表示ができる拡張機能が標準で搭載されており、AFFINGER管理画面から簡単に切り替えが可能です。
とはいえ、AFFINGER6のSTD版でもEX版と同じような表示は再現可能です。少し手間はかかりますが、工夫すれば見た目はほぼ同じように仕上げられます。
以下は、それぞれのバージョンで作成した記事一覧のサンプル画像です。
AFFINGER6-STD
リスト型の記事一覧
カード型の記事一覧
AFFINGER6-EX
リスト型の記事一覧
カード型の記事一覧
AFFINGER6-STDでトップページにカード型の記事一覧を設定する方法
AFFINGER6-STDでは、AFFINGER管理の設定で挿入コンテンツにクラシックエディターを使って「カード型の記事一覧」を設定していきます。
それでは順番に見ていきましょう。
STEP1サムネイル画像の設定（記事一覧の設定）
サムネイル画像の表示形状を設定しておきます。おすすめは『フルサイズにする』にチェックを入れます。
Menu 『AFFINGER管理＞全体設定＞サムネイル画像設定』をクリックします。
以下の画面が表示さるところまで下側にスクロールします。
記事一覧の『フルサイズにする』にチェックを入れます。
STEP2挿入コンテンツ（クラシックエディター）を作成
AFFINGER管理のトップページの設定で、「挿入コンテンツ」にカード型の記事一覧を作っていきます。
Menu 『AFFINGER管理＞トップページ＞挿入コンテンツ』をクリックします。
以下の画面が表示されるところまで下側にスクロールします。
挿入コンテンツの先頭にカーソルを置き『タグ＞レイアウト＞PCとTab（959px以上）＞左右50%』の順にマウスオーバーでドロップダウンメニュを開いて『左右50%』をクリックします。
以下の画面のようにレイアウトが挿入されます。
テキストの末部にカーソルを置きます。
『タグ＞記事一覧 / カード＞記事一覧』の順にマウスオーバーでドロップダウンメニュを開いて『記事一覧』をクリックします。
以下の画面の黄色部のようにショートコードが入力されます。（前側の不要なテキストは削除します）
続けて、右側の青色部も同様にショートコードを入力します。
赤下線部の『投稿記事のID』に実際のID『半角数字』を入力します。複数の場合は半角カンマ→『,』 で区切ります。
例[st-postgroup id=”1,2,3,4,5” rank=""]のように入力します。
- rank="on" → カードの左上にナンバーリングされます。
「投稿記事のID」を調べる方法
「投稿記事のID ？」という方のために…投稿記事のIDを調べる方法をご紹介します。
Menu 『WordPress管理＞ダッシュボード＞投稿＞投稿一覧』をクリックします。
以下の画面が表示されます。
赤枠部に『ID』の列に記載されている番号です。
STEP3トップページのコンテンツ内の新着記事一覧を非表示にする
挿入コンテンツで作成したカード型の記事一覧のみを表示する場合に、不要なリスト型の新着記事一覧を非表示にします。
Menu 『AFFINGER管理＞トップページ＞記事一覧』をクリックします。
以下の画面が表示さるところまで下側にスクロールします。
- 投稿ページがトップページの場合
- トップページのコンテンツ内の新着記事一覧を非表示にする『ON』
- 固定ページがトップページの場合
- 新着一覧を表示する『OFF』
設定箇所は、以下の画面を参考にしてください。
関連記事ブログカード
-
-
AFFINGER6のブログカードの作り方と設定方法｜クラシックエディター対応
AFFINGER6のブログカードの作り方と設定方法をクラシックエディター向けに解説。作成手順から表示設定、表示されない時の対処法までわかりやすくまとめています。
-
-
AFFINGER6のブログカードの作り方と設定方法｜ブロックエディター対応
AFFINGER6のブログカードの作り方と設定方法を初心者向けに解説。ブロックエディターでの作成手順から表示設定、うまく表示されない時の対処法までわかりやすくまとめています。
AFFINGER6-EXでトップページにカード型の記事一覧を設定する方法
AFFINGER6-EXでは、簡単なAFFINGER管理の設定だけで「カード型記事一覧」を作成できます。
- 新着記事一覧をカード型の記事一覧として表示できます。（AFFINGER6-EXだけ！）
記事一覧のカードデザイン化[EX]
記事一覧のカードデザイン化を指示して、表示する列数を入力します。
Menu 『AFFINGER管理＞投稿・固定記事＞カードデザイン』をクリックします。
以下の画面が表示さるところまで下側にスクロールします。
赤枠部の『トップページ及びアーカイブの記事一覧をカードデザインにする』にチェックを入れ、『列数設定』に表示数を入れます。
以下の画面では、『2,2,1』→「PCで2列・タプレットで2列・スマホで1列」という指示になります。
![1823-19｜AFFINGER管理｜投稿・固定記事タブ｜記事一覧カードデザイン化[EX]](https://osaboo.site/affinger/wp-content/uploads/2025/04/1823-19.webp)
まとめ！AFFINGER6でトップページにカード型記事一覧を表示する方法｜設定手順を解説
今回は、AFFINGER6でトップページにカード型の記事一覧を表示する方法を、STD版とEX版に分けてご紹介しました。
EX版では専用機能を使って簡単にカード表示を実現できますが、STD版でもクラシックエディターを活用すれば、同様のレイアウトを再現することが可能です。
多少の手間はかかりますが、工夫次第で見た目のクオリティは十分に整えられます。
用途や運用スタイルに合わせて使い分けることで、自分に合ったサイト設計がしやすくなるのもポイントです。
まずはできる方法から取り入れて、見やすく整ったトップページづくりに活かしてみてください。
