こんな疑問を持っている方いませんか？
CSSをいじると後戻りできなくなってしまうリスクや、子テーマJETを使えば簡単にカード型に出来ますが約5000円するため、今回はAFFINGER5を使用してCSSをいじらず、子テーマJETを使用せずに記事一覧をカード型にする方法を紹介します！
もくじ
そもそも記事一覧のカード型とは？
以下にカスタマイズ前後のカテゴリー一覧の比較を掲載しています。
※タブで繰り替えできます。
サムネイル画像設定
まず事前準備としてサムネイル画像をフルサイズに変更します。
- AFFINGER5管理からデザインを選択します。
- デザインの中にあるサムネイル画像設定を表示します。
- 各記事一覧で表示するサムネイル画像のサイズをフルサイズにします。
注意ポイント
カスタマイズ方法
TOPページもカテゴリー一覧も基本的なやり方は同じなので今回はカテゴリー一覧でのやり方を紹介します！
記事一覧を設定する
「投稿」→「カテゴリー」をクリックしてカスタマイズしたいカテゴリーの「編集」をクリックします。
カテゴリーの追加方法はこちらの記事で紹介しているのでカテゴリーを増やしたい！という方はご覧ください！
ポイント
のちほど"ID"を使用するのでID番号を覚えておくと作業が楽になります！
カテゴリーの編集ページが開いたら「タグ」→「記事一覧」→「カテゴリ一覧」の順にクリックしていきます。
するとこのようなコードが出てきます。
変更する点は2か所です。
- st-catgroup cat="0"→st-catgroup cat="カテゴリーID"
- page="5"→page="0"
残りはそのままで大丈夫です！
ポイント
新着記事をカード型にしたい場合はst-catgroup cat="0"のままで大丈夫です。
カードスタイルを設定する
先ほど変更したコードを選択しながら以下の作業を行います！
次に「スタイル」→「レイアウト」→「カードスタイル」をクリックします。
選択したコードが四角で囲まれたらカードスタイルの設定は完了です！
最後に投稿の一覧表示をしないにして、「更新」を選択して完了です！
【AFFINGER5】記事一覧を子テーマJETを使わずにカード型にカスタマイズする方法を紹介のまとめ
今回はTOPページやカテゴリーの記事一覧をカード型にカスタマイズする方法を紹介しました。
ひと手間加えるだけで他の人との差別化に繋がったりするので、是非記事一覧をカード型にしてみてください！
CSSをいじるのは難しいのでおすすめしませんが、子テーマJETを導入したほうが簡単にこのようなカスタマイズができるので金銭的に余裕のある人はJETを導入するのをおすすめします！
では、また次の記事で会いましょう！！