AFFINGER5(アフィンガー)ブログ風カードデザインでオシャレに見せる方法

AFFINGER5(アフィンガー)ブログ風カードデザインでオシャレに見せる方法

悩む人
AFFINGER5(アフィンガー)を入れてみたけど、難しくて全然カスタマイズできない!

 

悩む人
AFFINGER5(アフィンガー)はできることが多すぎてよくわからない!簡単にオシャレにする方法を知りたい

 

そんなお悩みを解決します。

 

AFFINGER5(アフィンガー)

稼ぐブロガーが使っている人気のWordPressテーマ!

公式サイトでチェック

 

 本記事の内容

  • AFFINGER5(アフィンガー)ブログ風カードデザインでオシャレに見せるカスタマイズ方法
  • ブログ風カードデザインを作るときに気を付けるべき点

 

 本記事の信頼性

本記事を書いている筆者(@hachi_nomad)は副業ブロガーとしてブログを運営しています。

  • 当サイトもAFFINGER5(アフィンガー)を使ってカスタマイズをしています。
  • ブログ経験0の初心者でも、当サイトを始めて3週間でAFFINGER5(アフィンガー)を購入し、設定を完了できました。
  • AFFINGER5(アフィンガー)購入2週間で、収益を上げることができています。

 

AFFINGER5(アフィンガー)でオシャレなブログを作っているブロガーが多くて自分も作りたい!

と思って挑戦するものの、いざやってみたらいろいろカスタマイズ出来すぎてよくわからないと感じる方も多いと思います。

 

でも実は簡単な操作で、オシャレに見せるカスタマイズ方法があるんです。

 

それが、「ブログ風カードデザイン」を使ったページ作成。

 

トップページや固定ページで使えて、一気にブログがオシャレに変わりますよ。

 

完成形はこんな感じ。

AFFINGER5(アフィンガー)ブログ風カードデザイン

 

カードデザインってなんかオシャレに見えますよね。

 

ブログ風カードデザイン おすすめの貼り方

  • 2列構成にして左右を分ける
  • PCは2列表示、スマホはレスポンシブで1列表示
  • 集客記事のリンクを貼る

 

実際のページはこちら。

カテゴリー記事一覧
カテゴリー別記事

続きを見る

 

本記事ではブログ風カードデザインのカスタマイズ方法と、実際に作ったときに感じたつまづきポイントを紹介します。

 

AFFINGER5(アフィンガー)はカスタマイズを自由にできるようになると、一気にブログデザインの幅が広がってきますよ。

レイアウトが崩れないように、バランスよく作っていくポイントも紹介していきます。

 

詳しく解説していきます。

 

 

AFFINGER5(アフィンガー)ブログ風カードデザインの作り方

ブログ風カードデザインの作り方を解説していきます。

 

今回は固定でカテゴリ一覧ページを作っていきましょう。

 

本記事では、AFFINGER5(アフィンガー)で推奨となっている「Classic Editor」の画面で紹介します。

 

 AFFINGER5(アフィンガー)ブログ風カードデザインの作り方

  1. 固定ページを作る
  2. レイアウト2列を作成する
  3. ブログ風カードデザインを作成する
  4. カードを追加する

 

 

①固定ページを作る

まずは固定ページを作成しましょう。

 

▼「固定ページ」 > 「新規追加」から、新規の固定ページを作成します。

WordPress 固定ページ 新規作成

 

最終的に、この固定ページのリンクをトップページやメニューに貼り付けます。

 

②レイアウト2列を作成する

レイアウト2列を作成します。

 

PCでは2列表示、スマホでは1列表示にしたいので、「PCとTab左右50%」を選びます。

 

▼「タグ」 > 「レイアウト」> 「PCとTab(959px以上)」 >  左右50%以上 をクリック

WordPress PCとtab50%

 

③ブログ風カードデザインを作成する

ブログ風カードデザインを作成していきます。

 

ブログ風カードデザインには2つのデザインがあります。

 

ブログ風カードデザインの種類

  • ①カードスタイルA
  • ②カードスタイルB

 

僕のおすすめは、カードスタイルBの方。

 

分割した画面にカードデザインを埋め込んでいきます。

 

▼「スタイル」 > 「レイアウト」 > 「カードスタイルB」をクリック

WordPress カードスタイルB

 

▼左右にバランスよく表示したいので、右側にも同じように追加していきましょう。

このようなかたちになります。

WordPress カードスタイルB 2

 

まずは形を作っておいて、左右のバランスがうまく表示されていることを確認してから始めると、あとでレイアウトが崩れることがなくなりますよ。

 

④カードを追加する

表示したい記事の「カード」を追加していきます。

 

▼「カード」をクリック

WordPress カード

 

▼同じように、右側にもカードを追加していきましょう。

表示させたい個数分同じ作業を繰り返します。

WordPress カード 2つ

 

だいたい3つ、多くても4つくらいがバランス的に良いかなと思います。

これでとりあえず左右に2つずつ記事が表示されるようになりました。

 

レイアウトの作成はこれで完了です。

 

④記事IDを追加する

続いて記事IDを追加していきます。

 

表示させたい記事のIDを追加していきます。

 

記事のIDは投稿一覧ページ > 記事の右端にあります。

WordPress カードIDの確認

 

▼記事IDを追加する

WordPress 記事IDを消す

 

「続きをみる」はページ全体が縦長になってしまうので、非表示にしておくのがおすすめ。

 

 

カテゴリの見出しは「見出し2」や「見出し3」でも装飾することができますが、当ブログでは「font-awesome」を使った方法で表示させています。

font-awesomeを使ったカスタマイズ

 

ワードプレスカスタマイズ
【AFFINGER5】WordPressのメニューに画像を入れるカスタマイズ方法を解説

続きを見る

 

もしいいなと思った方はぜひみてみてください。

 

これで固定ページの作成は完了です。

 

今回作った固定ページをTOPページやメニューに追加すれば、カテゴリーリストページとして表示させることができますよ。

 

カテゴリが多い場合やサイト回遊率を上げるのに効果のある方法なので、良かったら試してみてください。

 

AFFINGER5(アフィンガー)でブログ風カードデザインを作るときに気を付けるべき点

 

せっかくブログ風カードデザインをきれいに作っても、記事の中身のせいでレイアウトがガタガタになることがあります。

以下のことに注意して記事を見直してみましょう。

 

 AFFINGER5(アフィンガー)でブログ風カードデザインを作るときに気を付けるべき点

  • アイキャッチの画像サイズはすべて同じにする
  • タイトルの文字数は上限を決めておく(32文字)

 

①アイキャッチの画像サイズはすべて同じにする

アイキャッチの画像はすべて同じサイズにしましょう。

画像はWordPress内での修正もできますが、意外と細かく調整できないので、最初から揃えておいた方が早いです。

 

僕はCanvaを使って毎回修正をしています。

 

②タイトルの文字数は上限を決めておく(35文字程度)

タイトルの文字数によっても表示がガタガタになる可能性があります。

SEO的にも、タイトルは長すぎず、だいたい35文字程度が良いとされているので、35文字上限で揃えましょう。

 

以上、AFFINGER5(アフィンガー) でブログ風カードデザインを作る方法を紹介しました。

 

当ブログのTOPページはAFFINGER5(アフィンガー) の子テーマ「JET」を使っています。

子テーマ「JET」なら、今回紹介した方法よりもかんたんに作ることができるうえに、アドセンス広告収益を上げることができます。

 

AFFINGER(アフィンガー)専用子テーマ「JET」の記事は、以下の記事で解説しているのであわせて参考にしてみてください。

AFFINGER JET
広告が溶け込む!AFFINGER5(アフィンガー)専用子テーマ「JET」の購入レビュー

続きを見る

-WordPress
-,

© 2020 NOMAD LIFE DESIGN