こんにちは "osaboo"です。"@osaboo_Bot"
AFFINGER6でトップページにカード型の記事一覧を表示する方法をご紹介します。
(STDとEX両方をそれぞれわかりやすく解説します)
AFFINGER6-STDで、記事一覧をカード型で表示したい方!必見です。
AFFINGER6-STD
リスト型の記事一覧


カード型の記事一覧

AFFINGER6-EX
リスト型の記事一覧


カード型の記事一覧

それではご覧ください!
\初心者でも安心! コスパ最強の洗練されたWordPressテーマ/
\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//
- 少しづつ増え続ける当サイトオリジナル特典付!-
AFFINGER6-STDでトップページにカード型の記事一覧を設定する方法
AFFINGER6-STDでは、AFFINGER管理の設定で挿入コンテンツにクラシックエディターを使って「カード型の記事一覧」を設定していきます。
それでは順番に見ていきましょう。
STEP1サムネイル画像の設定(記事一覧の設定)
サムネイル画像の表示形状を設定しておきます。おすすめは『フルサイズにする』にチェックを入れます。

以下の画面が表示さるところまで下側にスクロールします。
記事一覧の『フルサイズにする』にチェックを入れます。

補足
- サムネイルの表示が思うように表示できない場合は、サムネイル画像設定を変えてみましょう。
- アイキャッチ画像のサイズを統一していれば『メディア設定にする』を選択しても問題ありません。
STEP2挿入コンテンツ(クラシックエディター)を作成
AFFINGER管理のトップページの設定で、「挿入コンテンツ」にカード型の記事一覧を作っていきます。

以下の画面が表示されるところまで下側にスクロールします。
挿入コンテンツの先頭にカーソルを置き『タグ>レイアウト>PCとTab(959px以上)>左右50%』の順にマウスオーバーでドロップダウンメニュを開いて『左右50%』をクリックします。

以下の画面のようにレイアウトが挿入されます。
テキストの末部にカーソルを置きます。

『タグ>記事一覧 / カード>記事一覧』の順にマウスオーバーでドロップダウンメニュを開いて『記事一覧』をクリックします。

以下の画面の黄色部のようにショートコードが入力されます。(前側の不要なテキストは削除します)
続けて、右側の青色部も同様にショートコードを入力します。

赤下線部の『投稿記事のID』に実際のID『半角数字』を入力します。複数の場合は半角カンマ→『,』 で区切ります。
例[st-postgroup id=”1,2,3,4,5” rank=""]のように入力します。

- rank="on" → カードの左上にナンバーリングされます。
こんな感じです。

「投稿記事のID」を調べる方法
「投稿記事のID ?」という方のために…投稿記事のIDを調べる方法をご紹介します。
以下の画面が表示されます。
赤枠部に『ID』の列に記載されている番号です。

STEP3トップページのコンテンツ内の新着記事一覧を非表示にする
挿入コンテンツで作成したカード型の記事一覧のみを表示する場合に、不要なリスト型の新着記事一覧を非表示にします。

以下の画面が表示さるところまで下側にスクロールします。
- 投稿ページがトップページの場合
- トップページのコンテンツ内の新着記事一覧を非表示にする『ON』
- 固定ページがトップページの場合
- 新着一覧を表示する『OFF』
設定箇所は、以下の画面を参考にしてください。

補足
この章で、ご紹介した挿入コンテンツの設定は、AFFINGER6-EXでも同じ手順で使えます。
新着記事一覧とは別に任意の記事一覧を上手に配置することで色々な配置のトップページが作れます。
チャレンジしてみてくださいね。
例えば…新着記事(リスト型)、任意の記事一覧(カード型)を合わせて表示させるのも面白いです。
カード型のブログカードについて…以下の記事で詳しくご紹介しています。
「あわせてご覧ください」
-
-
【2024年版】AFFINGER6 ブログカードの作り方!「徹底的に調べてみた」リニューアル
AFFINGER6を使用したブログカードの作り方と表示の状態を細かく噛み砕いて紹介します。ブロック・クラシック両方のエディタに分けて画像付きで説明します。リスト型・カード型・スライドショー等また、スライドショーをスライドさせない方法も盛り込みました。
AFFINGER管理:トップページの設定について…以下の記事で詳しくご紹介しています。
「あわせてご覧ください」
-
-
AFFINGER 管理【トップページ】タブのメニュー設定を完全解説!AFFINGER6
AFFINGER6の管理画面で行う『トップページ』の各設定項目を完全解説。設定項目と表示イメージを画像付きでご紹介。「設定場所と表示イメージがわからない?」そんな悩みを解決します。
AFFINGER6-EXでトップページにカード型の記事一覧を設定する方法
AFFINGER6-EXでは、簡単なAFFINGER管理の設定だけで「カード型記事一覧」を作成できます。
- 新着記事一覧をカード型の記事一覧として表示できます。(AFFINGER6-EXだけ!)
記事一覧のカードデザイン化[EX]
記事一覧のカードデザイン化を指示して、表示する列数を入力します。

以下の画面が表示さるところまで下側にスクロールします。
赤枠部の『トップページ及びアーカイブの記事一覧をカードデザインにする』にチェックを入れ、『列数設定』に表示数を入れます。
以下の画面では、『2,2,1』→「PCで2列・タプレットで2列・スマホで1列」という指示になります。
![36669-15:AFFINGER管理|投稿・固定記事タブ|記事一覧カードデザイン化[EX]](https://osaboo.info/wp-content/uploads/2024/10/36669-15.webp)
補足
トップページとアーカイブページの表示を変えたい場合は、挿入コンテンツの設定と組み合わせます。
ちょっと面倒ですが…難しくないので、慣れてきたら検討してみてくださいね。
例えば…トップページはカード型でアーカイブページはリスト型で記事一覧を表示するなどの設定が可能です。
\初心者でも安心! コスパ最強の洗練されたWordPressテーマ/
\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//
- 少しづつ増え続ける当サイトオリジナル特典付!-
まとめ!AFFIBGER6でトップページにカード型の記事一覧を設定する方法!STDとEX両方を解説
AFFIBGER6 でトップページにカード型の記事一覧を表示するための方法について、STDとEXの両方に分けて詳しく解説しました。
AFFIBGER6 を使ったWebサイト構築にお役立てください。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/