AFFINGER

AFFINGER5

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

アフィンガーのトップ画面をカスタマイズかたいなぁ
最近はカード型のブログが多いわよね

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

 

注意

アフィンガー5には『JET』という子テーマがあります。

カード型のトップページを作る場合、通常は『JET』を使用します。

でも『JET』は有料の子テーマで4,980円かかってしまいます。

 

この記事のポイント

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

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

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

 

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

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

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

affinger-toppage

 

 

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

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

どうでしょうか??

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

 

 

 

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

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

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

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

TOP解説15

 

 

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

  1. サムネイル画像の設定をする
  2. トップページに左右50%のレイアウトを設定する
  3. 記事一覧を表示する
  4. カードの表示を設定する
  5. 完成

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

 

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

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

 

フルサイズにする を選択

 

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

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

 

 

注意ポイント

トップページの作成方法には2種類あります。

  • 挿入コンテンツで設定
  • 固定記事で設定

今回は挿入コンテンツに設定する方法について解説します。

 

トップページの編集画面

TOP説明

タグ → レイアウト → 全サイズ → 左右50% をクリック

 

 

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

 

step
3
記事一覧を表示する

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

 

 

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

[ st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off" slides_to_show="3,3,2" slide_date="" slide_more="ReadMore" slide_center="off"]

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

 

[ st-catgroup cat="カテゴリID" page="表示記事数"]

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

 

カテゴリIDの調べ方

  1. ダッシュボードでカテゴリーをクリック
  2. カテゴリー一覧でカテゴリーIDを確認

 

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

左のBOX 右のBOX
カテゴリID 6,16
表示記事数 3[ st-catgroup cat="6,16" page="3"]
カテゴリID 12
表示記事数 3[ st-catgroup cat="12" page="3"]

 

TOP画像の解説12

 

 

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

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

 

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

 

 

step
5
完成

TOP解説15

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

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

 

 

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

まとめ

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

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

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

 

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

AFFINGER
【アフィンガー/AFFINGER5】ステップ表示の設定方法

続きを見る

AFFINGER
アフィンガー5のメリット・デメリットを解説|ブロガーの評判は?

続きを見る

 

今がチャンス

当サイトからAFFINGER5を申し込んだ方

今なら期間限定で次のプラグインが無料でついてきます。

2,500円の「クレジット削除プラグイン」

4,980円の「STINGERタグ管理プラグイン 3」

いつまで配布できるか未定ですので申し込みはお早めに!

 

稼ぎたいなら今すぐAFFINGER5を導入しよう

-AFFINGER5

© 2021 Door Blog (ドアブログ) Powered by AFFINGER5