AFFINGER5

【AFFINGER5】記事一覧をカード型にカスタマイズ|CSSや子テーマJETを使わない方法を紹介

【AFFINGER5】記事一覧をカード型にカスタマイズ|CSSや子テーマJETを使わない方法を紹介

質問者
TOPページとかカテゴリーの記事一覧に少しアレンジを加えてカード型にしたけど、CSSや子テーマJETを使用しないと無理なのかな?

 

こんな疑問を持っている方いませんか?

 

CSSをいじると後戻りできなくなってしまうリスクや、子テーマJETを使えば簡単にカード型に出来ますが約5000円するため、今回はAFFINGER5を使用してCSSをいじらず、子テーマJETを使用せずに記事一覧をカード型にする方法を紹介します!

 

そもそも記事一覧のカード型とは?

以下にカスタマイズ前後のカテゴリー一覧の比較を掲載しています。

 

※タブで繰り替えできます。




AFFINGER5 記事一覧 カード型

AFFINGER5 記事一覧 カード型2


 

サムネイル画像設定

まず事前準備としてサムネイル画像フルサイズに変更します。

 

AFFINGER5 記事一覧 カード型3

  1. AFFINGER5管理からデザインを選択します。
  2. デザインの中にあるサムネイル画像設定を表示します。
  3. 各記事一覧で表示するサムネイル画像のサイズをフルサイズにします。

注意ポイント

フルサイズにするとページ表示速度が遅くなることがあります。画像自体のサイズを小さくするために画像の圧縮リサイズをやっておきましょう!やり方はこちらの記事こちらの記事で紹介しています!

 

カスタマイズ方法

TOPページもカテゴリー一覧も基本的なやり方は同じなので今回はカテゴリー一覧でのやり方を紹介します!

 

記事一覧を設定する

AFFINGER5 記事一覧 カード型4

「投稿」→「カテゴリー」をクリックしてカスタマイズしたいカテゴリーの「編集」をクリックします。

 

カテゴリーの追加方法はこちらの記事で紹介しているのでカテゴリーを増やしたい!という方はご覧ください!

 

ポイント

のちほど"ID"を使用するのでID番号を覚えておくと作業が楽になります!

 

AFFINGER5 記事一覧 カード型5

カテゴリーの編集ページが開いたら「タグ」→「記事一覧」→「カテゴリ一覧」の順にクリックしていきます。

 

AFFINGER5 記事一覧 カード型6

するとこのようなコードが出てきます。

 

変更する点は2か所です。

  • st-catgroup cat="0"→st-catgroup cat="カテゴリーID"
  • page="5"→page="0"

 

残りはそのままで大丈夫です!

 

ポイント

新着記事をカード型にしたい場合はst-catgroup cat="0"のままで大丈夫です。

 

カードスタイルを設定する

先ほど変更したコードを選択しながら以下の作業を行います!

 

AFFINGER5 記事一覧 カード型7

次に「スタイル」→「レイアウト」→「カードスタイル」をクリックします。

 

選択したコードが四角で囲まれたらカードスタイルの設定は完了です!

 

AFFINGER5 記事一覧 カード型8

最後に投稿の一覧表示しないにして、「更新」を選択して完了です!

 

【AFFINGER5】記事一覧を子テーマJETを使わずにカード型にカスタマイズする方法を紹介のまとめ

今回はTOPページやカテゴリーの記事一覧をカード型にカスタマイズする方法を紹介しました。

 

ひと手間加えるだけで他の人との差別化に繋がったりするので、是非記事一覧をカード型にしてみてください!

 

CSSをいじるのは難しいのでおすすめしませんが、子テーマJETを導入したほうが簡単にこのようなカスタマイズができるので金銭的に余裕のある人はJETを導入するのをおすすめします!

 

では、また次の記事で会いましょう!!

 

-AFFINGER5

Copyright© kane blog , 2020 All Rights Reserved.