AFFINGER

【AFFINGER5】トップページをカード型で表示する方法

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

 

注意

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

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

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

 

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

 

 

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

 

 

【AFFINGER5】カード型のトップページ

 

 

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

 

 

 

【アフィンガー/AFFINGER5】カード型スタイル完成形

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

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

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

 

 

トップページにこんな感じでインパクトありますね!!

 

では、作る方を解説していきます。

 

簡単な流れ

  • サムネイルの画像を決める
  • トップページに左右50%のレイアウトを設定する
  • 記事IDをカードタグに入れる
  • スタイルでカードスタイルに設定
  • 完成

 

注意

サムネイルは1200×800のサイズを基本的に使っています。

【アフィンガー/AFFINGER5】カード型スタイルの作り方

 

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

 

 

 

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

 

 

フルサイズにする を選択

 

 

step
2
左右50%のレイアウトを設定する

 

新規作成画面から

 

 

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

 

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

 

step
3
カードタグの作成

 

 

カード →   IDに記事I D番号を入れる(表示させたい記事)

 

 

ポイント

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

 

 

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

 

 

 

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

 

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

 

step
5
完成 

 

プレビューで確認し完成

 

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

 

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

 

 

【AFFINGER5】カード型のトップページのまとめ

 

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

 

AFFINGER5はとてもカスタマイズしやすいテーマです。

 

マイナビ

  • この記事を書いた人
  • 最新記事
アバター

ムロ

サイト管理人のムロです。 【趣味のブログがいつの間にかお金を稼いでくれた】月間5万PV達成 ➡️8ヶ月でブログ収益は月20万円 ➡️ 本業と副業で年収は1000万超え➡️ブログでは、SEO・アフィリエイト・動画配信・AFFINGER・転職について書いています

-AFFINGER

© 2020 MURO BLOG Powered by AFFINGER5