AFFINGER

【アフィンガー】記事一覧を子テーマJETを使わずにカード型にする方法

2019年7月10日

AFFINGER(アフィンガー)カスタマイズ CSS

 

こんにちは、NOJIです。

 

今回はアフィンガーの記事一覧をカード型にする方法を解説していきます。

 

子テーマJETを使えば簡単にカード型にできるのですが、料金が5,000円もするので違う方法でカード型にしていきたいと思います。

 

このカスタマイズはCSSをいじりません。

 

とても簡単に行えるので、良いと思ったらぜひ試してみてください。

 

カスタマイズ目的

 

今回のカスタマイズをすると以下のようになります。

 

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

アフィンガー カード型 記事一覧

アフィンガー カード型 記事一覧

 

こんな感じでデフォルトの記事一覧から、カード型にしていきます。

 

カード型は最近流行っていて結構取り入れている方が多い印象です。

 

記事のインパクトがデカくなりますし、とてもおしゃれに見えるのでおすすめです。

 

事前準備

 

カード型にする前に綺麗に画像が表示されるよう事前設定を行う必要があります。

 

「AFFINGER5 管理」→「デザイン」のサムネイル画像サイズをフルサイズに設定しておきます。

 

 

この設定をすることでカード型にした際に綺麗に画像が表示されます。

 

カスタマイズ方法

 

step
1
トップページを編集する

 

今回はトップページの記事一覧をカード型に設定していきます。

 

「AFFINGER管理」→「トップページ」を開きます。

 

step
2
カテゴリ一覧を記述する

 

次にトップページの挿入コンテンツにカテゴリ一覧を記述していきます。

 

「タグ」→「記事一覧」→「カテゴリ一覧」を選択します。

 

 

[ st-catgroup cat="表示したいカテゴリID" page="表示したいページ数" order="降順、昇順の指定" orderby="並び方法" child="子カテゴリーの表示の有無" slide="スライドショー化の有無" slides_to_show="スライドショー表示時の列数" slide_date="日付表示の有無" slide_more="続きを読む" ]

 

上記のコードが挿入されます。

 

ここはお好みで設定してもらっていいです。わからない人はとりあえず下記で設定してみて下さい。

 

  • st-catgroup cat="0"(新着記事一覧)
  • page="0"
  • order="desc"
  • orderby="id"
  • child="on"
  • slide="off"
  • slides_to_show="3,3,2"
  • slide_date=""
  • slide_more="ReadMore"
  • slide_center="off"

※今回は新着記事を設定していますが、カテゴリIDを指定すれば、特定のカテゴリ一覧をカード型にすることもできます。

 

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

 

次に先ほど記述したカテゴリ一覧コードを選択します。

 

 

選択した状態で、「スタイル」→「カードスタイル」を選択します。

 

 

選択したコードが四角で囲まれたら、「保存(save)」を選択して完了です。

 

トップページに行ってみるとカード型の新着記事一覧が表示されていると思います。

 

また、トップページの設定で、記事一覧の上に見出しを付けてあげると、以下のように見やすくなるのでおすすめです。

 

 

NOJI
お疲れ様でした!

 

まとめ:AFFINGER 5の記事・カテゴリ一覧をカードスタイルにする方法

 

以上、記事一覧をカード型にするカスタマイズ方法でした。

 

デフォルトの記事一覧は若干オシャレさに欠けるので、カード型を取り入れてみたい人は是非カード型にしてみてください。

 

正直、子テーマJETを導入した方が使い勝手がいいので費用を気にしないならJET導入をおすすめします。

 

JET導入を迷ってる方やお金を払いたくないという人は、今回のカスタマイズを試してみてください!

 

NOJI
僕もJETにするか迷ってます....

 

AFFINGER(アフィンガー)カスタマイズ CSS
【アフィンガーカスタマイズ】見た目をさらにおしゃれにするCSSまとめ集

続きを見る

 

-AFFINGER
-

Copyright© NOJI BLOG , 2019 All Rights Reserved.