WordPressのテーマ、アフィンガーを使っているけどトップページの記事一覧をカード型のデザインにしたいな
このようなお悩み解決します！！
こんにちは！TomoMiniBlog管理人のTomoです！
今回は、アフィンガーのトップページをカード型のデザインにする方法を紹介します！
私自身、デザインにとってもこだわりたいタイプなのですが、カード型デザインにするのにとても苦労しました。
なので、この記事では全ての手順を画像付きで解説していきます！
こんな方におすすめ
- AFFINGER6でカード型デザインの使い方を知りたい
- EX版にするとどんなデザインができるのか知りたい
- 専用子テーマ「JET」のカード型デザインも見てみたい
目次
【アフィンガー / AFFINGER6】トップページの記事をカード型にした場合
アフィンガーでトップページをカード型にデザインした場合、このような感じになります
カード型デザインにするとアイキャッチ画像が見やすくなり、見た目が良くなるだけでなく、クリック率も上昇します！
この記事を機に、アフィンガーを使っている方は、カード型デザインを取り入れましょう！！
【アフィンガー / AFFINGER6】カード型デザインにする方法
ではここからカード型デザインにする方法を紹介していきます
私がおすすめする方法は、主に３つあります！！
カード型にする方法
- アフィンガー管理→トップページから編集する
- 専用子テーマ「JET２」を購入する
- AFFIGNERの「EX版」を購入する
実際には、HTMLとCSSを活用して、見た目を整えるという方法もありますが、コーディングに慣れている方でないと難しいので今回はスキップします
アフィンガー管理→トップページから編集する
では、まず１つ目のAFFINGER管理から設定する方法を紹介します
この方法は、ホームページ設定が「最新の投稿」になっている場合に表示されるものになります
ホームページの設定が「固定ページ」にしている人は、同じ行程を固定ページ編集欄から行ってください！
「AFFINGER管理」→「トップページ」→「挿入コンテンツ」
「タグ」→「レイアウト」→「PCとTab」→「左右50％」
左右どちらでもいいので、改行をして「カード」ボタンを押す
id="記事のID"を入力する（最初は空欄になっている）
挿入した部分を選択する
選択した状態で、「スタイル」→「レイアウト」→「カードスタイルB」を選択
実際の見た目はこんな感じ↓
まだ画像が正方形で見た目が良くないですね！あとで修正しましょう！！
カードデザインの個数を増やすときは、テキストエディタに変更をしてから
全てを選択して、コピペをする
「AFFINGER管理」→「全体設定」→「サムネイル画像設定」
これでカードデザインの完成です！
これでカードデザインのやり方がわかりましたね！しかしこれだと載せたい記事がある度に変更しなければならないというのがデメリットです…それが嫌な方は以下を試してください！！
専用の子テーマ「JET2」を購入する
「JET2」とはAFFINGERの専用の子テーマで、4,980円でカード型デザインの記事一覧が作れるようになります！
設定自体もとても簡単なので、毎回記事を選ぶ必要もありません！
実際の管理画面↓
トップページに記事一覧を表示して、「JET管理」から設定を行うだけで完了になります
先程の行程は、めんどくさいという方は「JET2」とてもおすすめですよ！
JET2のメリット
- 専用の管理画面があるので、カード型デザインが簡単
- 広告をカード型デザインにすることができる（クリック率上昇）
- AFFINGERの機能をそのままにカード型デザインにできる
タブレットや、スマホでの見た目はフルサイズのアイキャッチ画像が表示できて、自動で整形されて見た目が良いのがおすすめするポイントです！
以下を見ていただくとわかるように、広告が投稿記事一覧の中に一緒に表示されるので、「インフィード広告」を馴染ませることができます
これにより広告への不信感が減りクリック率が向上すると考えられます
広告が溶け込む魔法のテーマ
※クリックすると公式サイトに遷移します
「EX版」を購入する
個人的に1番おすすめしたいのがこのEX版を購入する方法です
この記事を閲覧している方は、すでにAFFINGERをお持ちだと思うので、「アップグレード」という形になります
AFFINGER 6からAFFINGER EXにアップグレードする場合、14,800円でアップグレードすることができます
おすすめポイント
- 記事下に表示されるおすすめ記事などもカード型デザインにできる
- カスタマイズできる項目が追加される
- カード型デザインの設定が簡単
この記事の冒頭で紹介したカードデザイン、当ブログのカードデザインはこの「EX版」を使用しています
また、EX版では投稿記事の下に表示される「関連記事」もカード型デザインにすることができます
カード型デザインが好きという方は、EX版にすることをおすすめします
便利なプラグイン付きのAFFINGERパック！
※クリックすると公式HPに遷移します
【アフィンガー / AFFINGER6】カード型デザインがEX版でもできない場合
AFFINGER6 EX版を購入したのに、トップページがカード型デザインにならない
このような方は以下の対処法を試してみてください
クラシックエディターのプラグインを停止する
AFFINGER6は正式にブロックエディターに対応しています
そのため、固定ページを編集する際もブロックエディターを使うことになります
クラシックエディタのままだと、AFFINGER6 EXの記事一覧を使用することができないため、カード型デザインが反映されていないと考えられます
カード型デザインをする際の行程は以下の通りです
トップページの編集画面から、「記事の一覧」ブロックを挿入
この時選択するのは、「記事一覧」「カテゴリ一覧」「タグ一覧」のどれでも大丈夫です
右側にあるブロックの設定から、カテゴリIDとページ数を設定
ここで設定するページ数は、記事を一覧で表示する数を指しており、2列でも3列でも対応できる6の倍数がおすすめです！
設定画面を確認する
「AFFINGER管理」の「投稿・固定記事」から、記事一覧のカードデザイン化にチェックを入れなければなりません
以下のように設定をしてください
ここでの「列数指定」とは、「PC,Tab,スマホ」の順番で列数の指定を行います
PC３列、その他２列なら、「3,2,2」
全て３列なら「3」のように入力します
固定ページをトップ画面にする
トップページで「ブロックエディタ」を使用するには、トップページを固定記事に設定をして作成をしなければなりません
固定ページを作成してからは、手順は一緒になります
まとめ
ではこの記事のおさらいです
カードデザインにする方法を紹介しました。その方法は以下の３つです
カード型にする方法
- アフィンガー管理→トップページから編集する
- 専用子テーマ「JET２」を購入する
- AFFIGNERの「EX版」を購入する
今回はこれで以上になります
