ブログ収益化

【AFFINGER5カスタマイズ】ブログカードを簡単におしゃれにする方法

AFFINGER Customize

今回はアフィンガーのブログカードをおしゃれにカスタマイズする方法を解説していきます。

カスタマイズのbefore・afterは以下のとおりです。

※タブでbefore/afterの表示切り替えができます

本記事を参考にしてもらうと当ブログのトップページのように、記事一覧を2カラムのカードタイプで表示することができてトップページをすっきり見せることができますよ。

ブログカードカスタマイズ

もちろんCSSもいじらないのでプログラミングの知識は必要ありませんし、レスポンシブにも対応しているのでスマホでも見やすくなります。

ブログカードカスタマイズ

本記事は有料テーマAFFINGER5のカスタマイズ記事です。

アフィンガー5は標準でも使え切れないほど機能が豊富にあります。

興味がある人はAFFINGER公式サイトレビュー記事も覗いてみてください。

\「STINGERタグ管理プラグイン3」プレゼント中/

AFFINGER公式サイト

※プレゼントはいつ終了するかわかりません。詳しくは公式ページをご確認ください

【AFFINGER5カスタマイズ】ブログカード【アフィンガー標準機能編】

ブログカードは、主に記事の中で内部リンクを貼るのに使われるツールです。

テキストリンクより目立たせることができるのでうまく使うことでブログ内の回遊率をあげることができます。

回遊率とは、1人の読者がブログ内の記事をどれだけ閲覧したのかを測る指標です

ブログカードはAFFINGER5に標準で付いている機能なのでボタンひとつで簡単に使うことができます。

以下のように[カード]ボタンを押すだけでショートコード が自動挿入されます。

ブログカードカスタマイズ

プレビューするとこんな感じですね。

AFFINGER Customize
【AFFINGER5カスタマイズ】ボックスを破線にする方法【コピペでOK】

続きを見る

以下のようなテキストリンクよりも内部リンクを目立たせることができますね。

>> 【AFFINGER5カスタマイズ】ボックスを破線にする方法【コピペでOK】

ちなみに、簡単にブログカードが使える有料テーマは他にもあるので参考までに。

【AFFINGER5カスタマイズ】ブログカード【カスタマイズ編】

本題の正方形カード型のカスタマイズ方法を説明します。

手順は簡単3ステップです。

カスタマイズ手順

  1. サムネイル 画像の設定
  2. レイアウトを2カラムにする
  3. ブログカードのスタイルを変更する

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

最初に、画像がきれいに表示されるように設定をおこなっておきます。

ワードプレスの「AFFINGER5 管理」の「デザイン」で、サムネイル画像設定を[フルサイズにする]に変更して[save]します。

ブログカードカスタマイズ

これで設定完了です。

続いて正方形のブログカードを作っていきましょう。

step
2
レイアウトを2カラムにする

まずブログカードを横並び2列にするためにレイアウトを指定します。

「タグ」から「レイアウト」→「PCとTab(959px以上)」→「左右50%」をクリックします。

ブログカードカスタマイズ

これでレイアウトの2分割が完了です。

ブログカードカスタマイズ

step
3
ブログカードのスタイルを変更する

ブログカードを作っていきます。

黄色ボックス内の「このテキストは〜」の前にカーソルを置いた状態で[カード]ボタンをクリックします。

ショートコードが挿入されたら「このテキストは最後に消してください(50%)」を消しましょう。

同じく黄色のボックス内にカーソルを置いた状態で、「スタイル」→「レイアウト」→「カードスタイル」をクリックします。

ブログカードカスタマイズ

ショートコードが薄い灰色の枠線で囲まれたらOKです。

ブログカードカスタマイズ

あとは、右側部分も同様に変更すればカスタマイズ完了です。

ショートコードのidには表示させたい記事のIDを入力し、readmoreはonからoffに変更しましょう

プレビューしてみましょう。

【AFFINGER5カスタマイズ】ブログカードをカスタマイズしてトップページをおしゃれにしよう

いかがだったでしょうか。

今回はアフィンガー5のブログカード機能をカスタマイズして、記事一覧を2カラムで表示する方法をご紹介しました。

アフィンガー5は有料テーマですが、機能がとても充実しているので簡単にブログをおしゃれにすることができます。

少しでもAFFINGER5に興味を持った人はぜひ公式サイトでどんな機能があるのか眺めてみてください。

\「STINGERタグ管理プラグイン3」プレゼント中/

AFFINGER公式サイト

※プレゼントはいつ終了するかわかりません。詳しくは公式ページをご確認ください

人気記事 有料テーマWING・AFFINGER5(アフィンガー5)をレビュー【超おすすめ】

人気記事 【AFFINGER5カスタマイズ】ボックスを破線にする方法【コピペでOK】

\この記事はどうでしたか?/

-ブログ収益化
-, ,

© 2020 Yuta Life Blog Powered by AFFINGER5