AFFINGER5でトップページをカードデザインにする方法

AFFINGER5でトップページをカードデザインにする方法

AFFINGER5でトップページのデザインをカードデザインに変えるためには、自作でカードデザインを作るか、ショートコード「st-catgroup」を使いスライドショーでの実装しかありません。

ちなみにスライドショーのイメージは次の通りです。

カードデザインを簡単に作る方法は、AFFINGER5EXにアップグレードするか、子テーマのJETを使うかです。

本記事では、AFFINGER5EXを使ったカートデザインの作成方法について紹介しています。

AFFINGER5のトップページデザイン（カートデザイン反映前）

カートデザイン反映前のトップページのデザインは次の通りです。

AFFINGER5EXのカートデザイン

そして、AFFINGER5EXで作ったカートデザインは次の通りです。同じデザインでもカートデザインの方がだいぶオシャレになりました。

AFFINGER5EX カートデザインの設定方法

ここからはAFFINGER5EX カートデザインの設定方法を説明してきます。

まずはAFFINGER5の設定から「投稿・固定記事」を選択します。

「投稿・固定記事設定」画面には、記事一覧のカードデザイン化[EX]の項目があるので「トップページ及びアーカイブの記事一覧をカートデザインにする」にチェックをいれます。

そして、列数設定にお好みの数値を入れます。ここの数値は3を入れると3列、2を入れると2列、1を入れると1列となり「n,n,n」形式で入力します。※nは数値

数値の1番目は960px以上、2番目は959～600px、3番目は599px以下と閲覧サイズにより縦数の数を変えることができます。

また、カードデザインには次の2パターンあります。

• 「カードデザインパターンをBタイプに変更」にチェックを入れた場合のデザイン

• 「カードデザインパターンをBタイプに変更」にチェックを入れなかった場合のデザイン

AFFINGER5EXでカートデザインを作成する方法は以上です。

AFFINGER5EXを使えば簡単にカートデザインを作ることができます。