AFFINGER6 ブログ

【アフィンガー6】 TOPページの記事をカード型デザインにする方法!EX版でのやり方も解説!

【アフィンガー6】 TOPページの記事をカード型デザインにする方法!EX版でのやり方も解説!
悩んでる人

WordPressのテーマ、アフィンガーを使っているけどトップページの記事一覧をカード型のデザインにしたいな

このようなお悩み解決します!!

こんにちは!TomoMiniBlog管理人のTomoです!

今回は、アフィンガーのトップページをカード型のデザインにする方法を紹介します!

私自身、デザインにとってもこだわりたいタイプなのですが、カード型デザインにするのにとても苦労しました

Tomo

なので、この記事では全ての手順を画像付きで解説していきます

こちらもチェック!

こんな方におすすめ

  • AFFINGER6でカード型デザインの使い方を知りたい
  • EX版にするとどんなデザインができるのか知りたい
  • 専用子テーマ「JET」のカード型デザインも見てみたい

【アフィンガー / AFFINGER6】トップページの記事をカード型にした場合

アフィンガーでトップページをカード型にデザインした場合、このような感じになります

カード型デザインにするとアイキャッチ画像が見やすくなり、見た目が良くなるだけでなく、クリック率も上昇します!

Tomo

この記事を機に、アフィンガーを使っている方は、カード型デザインを取り入れましょう!!

【アフィンガー / AFFINGER6】カード型デザインにする方法

ではここからカード型デザインにする方法を紹介していきます

私がおすすめする方法は、主に3つあります!!

カード型にする方法

  • アフィンガー管理→トップページから編集する
  • 専用子テーマ「JET2」を購入する
  • AFFIGNERの「EX版」を購入する
Tomo

実際には、HTMLとCSSを活用して、見た目を整えるという方法もありますが、コーディングに慣れている方でないと難しいので今回はスキップします

アフィンガー管理→トップページから編集する

では、まず1つ目のAFFINGER管理から設定する方法を紹介します

この方法は、ホームページ設定が「最新の投稿」になっている場合に表示されるものになります

ホームページの設定が「固定ページ」にしている人は、同じ行程を固定ページ編集欄から行ってください!

「AFFINGER管理」→「トップページ」→「挿入コンテンツ」

「タグ」→「レイアウト」→「PCとTab」→「左右50%」

左右どちらでもいいので、改行をして「カード」ボタンを押す

id="記事のID"を入力する(最初は空欄になっている)

挿入した部分を選択する

選択した状態で、「スタイル」→「レイアウト」→「カードスタイルB」を選択

実際の見た目はこんな感じ↓

Tomo

まだ画像が正方形で見た目が良くないですね!あとで修正しましょう!!

カードデザインの個数を増やすときは、テキストエディタに変更をしてから

全てを選択して、コピペをする

「AFFINGER管理」→「全体設定」→「サムネイル画像設定」

これでカードデザインの完成です!

Tomo

これでカードデザインのやり方がわかりましたね!しかしこれだと載せたい記事がある度に変更しなければならないというのがデメリットです…それが嫌な方は以下を試してください!!

専用の子テーマ「JET2」を購入する

JET2」とはAFFINGERの専用の子テーマで、4,980円でカード型デザインの記事一覧が作れるようになります!

Tomo

設定自体もとても簡単なので、毎回記事を選ぶ必要もありません!

実際の管理画面↓

トップページに記事一覧を表示して、「JET管理」から設定を行うだけで完了になります

先程の行程は、めんどくさいという方は「JET2」とてもおすすめですよ!

JET2のメリット

  • 専用の管理画面があるので、カード型デザインが簡単
  • 広告をカード型デザインにすることができる(クリック率上昇)
  • AFFINGERの機能をそのままにカード型デザインにできる

タブレットや、スマホでの見た目はフルサイズのアイキャッチ画像が表示できて、自動で整形されて見た目が良いのがおすすめするポイントです!

以下を見ていただくとわかるように、広告が投稿記事一覧の中に一緒に表示されるので、「インフィード広告」を馴染ませることができます

これにより広告への不信感が減りクリック率が向上すると考えられます

広告が溶け込む魔法のテーマ

子テーマ「JET2」の詳細はこちら

※クリックすると公式サイトに遷移します

「EX版」を購入する

個人的に1番おすすめしたいのがこのEX版を購入する方法です

この記事を閲覧している方は、すでにAFFINGERをお持ちだと思うので、「アップグレード」という形になります

AFFINGER 6からAFFINGER EXにアップグレードする場合、14,800円でアップグレードすることができます

おすすめポイント

  • 記事下に表示されるおすすめ記事などもカード型デザインにできる
  • カスタマイズできる項目が追加される
  • カード型デザインの設定が簡単

この記事の冒頭で紹介したカードデザイン、当ブログのカードデザインはこの「EX版」を使用しています

EX版のカードデザイン

また、EX版では投稿記事の下に表示される「関連記事」もカード型デザインにすることができます

カード型デザインが好きという方は、EX版にすることをおすすめします

便利なプラグイン付きのAFFINGERパック!

ACTION PACK3の詳細はこちら

※クリックすると公式HPに遷移します

【アフィンガー / AFFINGER6】カード型デザインがEX版でもできない場合

悩んでる人

AFFINGER6 EX版を購入したのに、トップページがカード型デザインにならない

このような方は以下の対処法を試してみてください

クラシックエディターのプラグインを停止する

AFFINGER6は正式にブロックエディターに対応しています

そのため、固定ページを編集する際もブロックエディターを使うことになります

クラシックエディタのままだと、AFFINGER6 EXの記事一覧を使用することができないため、カード型デザインが反映されていないと考えられます

カード型デザインをする際の行程は以下の通りです

トップページの編集画面から、「記事の一覧」ブロックを挿入

この時選択するのは、「記事一覧」「カテゴリ一覧」「タグ一覧」のどれでも大丈夫です

記事の一覧を選択

右側にあるブロックの設定から、カテゴリIDとページ数を設定

ブロックの設定
Tomo

ここで設定するページ数は、記事を一覧で表示する数を指しており、2列でも3列でも対応できる6の倍数がおすすめです!

設定画面を確認する

「AFFINGER管理」の「投稿・固定記事」から、記事一覧のカードデザイン化にチェックを入れなければなりません

以下のように設定をしてください

ここでの「列数指定」とは、「PC,Tab,スマホ」の順番で列数の指定を行います

PC3列、その他2列なら、「3,2,2」

全て3列なら「3」のように入力します

固定ページをトップ画面にする

トップページで「ブロックエディタ」を使用するには、トップページを固定記事に設定をして作成をしなければなりません

固定ページを作成してからは、手順は一緒になります

まとめ

ではこの記事のおさらいです

カードデザインにする方法を紹介しました。その方法は以下の3つです

カード型にする方法

  • アフィンガー管理→トップページから編集する
  • 専用子テーマ「JET2」を購入する
  • AFFIGNERの「EX版」を購入する

今回はこれで以上になります

  • この記事を書いた人

Tomo

生粋のApple信者大学生ブロガー。2021年3月よりブログを開設し、Twitterは開始1ヶ月でフォロワー600人。大学では経営学を専攻し。英語学習歴は2年で、海外経験はないが、TOEICの点数は800点台。

-AFFINGER6, ブログ