【アフィンガー／AFFINGER5】トップページをカード型で表示する方法

アフィンガーのトップ画面をカスタマイズかたいなぁ

最近はカード型のブログが多いわよね

この記事ではアフィンガー５の初心者の方向けに、ブログのカスタマイズ方法について解説します。

この記事のポイント

この記事を読めば、子テーマの『JET』を使わずにカード型のトップページを作ることができます。

ちなみに、お金がもったいないのでこのブログも『JET』は使っていません。

わかりやすく解説しますので、アフィンガー５を使っている方は是非試してみてください！！

【アフィンガー／AFFINGER5】デフォルトのトップページ

アフィンガーのトップページは次のような表示になります。

悪くはないのですが、インパクトが少し足りないですね。

【アフィンガー／AFFINGER5】カード型のトップページ

カード型のトップページはこんな感じです。

どうでしょうか？？

カード型を試してみたくなりました？？

【アフィンガー／AFFINGER5】カード型の表示方法

それでは、カード型のトップページを作成する方法を解説していきます。

この記事では、カテゴリ別の記事一覧を２列で表示する方法を解説します。

できあがりの目標はこんな感じです。

以下の手順で作成します。

では順に解説していきます。

step
1サムネイル画像の設定をする

AFFINGER5管理　→　デザイン　→　サムネイル画像設定　を開く

フルサイズにする　を選択

step
2トップページに左右５０％のレイアウトを設定する

AFFINGER5管理　→　トップページ　→　挿入コンテンツ　を開く

トップページの編集画面

タグ　→　レイアウト　→　全サイズ　→　左右５０％　をクリック

下の画面のように、左BOX（lbox）と右BOX（rbox）の２箇所に記事を表示させる準備ができました。

step
3記事一覧を表示する

タグ　→　記事一覧　→　カテゴリ一覧　で　記事一覧のショートコードを記入

ショートコードのパラメータはデフォルトでは次のような設定になっています。

必要最低限のパラメータにしぼります。

表示させたい記事のカテゴリID　と　表示する記事数　を設定するだけでOKです。

ここでは、次のように設定します。

step
4カードの表示を設定する

ステップ３で記入したショートコードを選択　→　選択した状態で、　スタイル　→　レイアウト　→　カードスタイル　をクリック

右のレイアウトBOXも同様にカードスタイルを設定します。

step
5完成

以上でカード型トップページの基本的な設定は終わりです。

後はカテゴリのタイトルや見出しを追加してカード型トップページの完成です。

【アフィンガー／AFFINGER5】カード型のトップページのまとめ

アフィンガー５の有料子テーマを使わずに、標準機能だけを使ってカード型トップページの作成方法を解説しました。

アフィンガーはとってもカスタマイズしやすいテーマです。

僕のブログもアフィンガーを使って作っています。

他にもアフィンガー５のカスタマイズ方法について紹介していますので是非ごらんください。