【AFFINGER6】クリック率UP!ブログカードを作る方法【超簡単に作成可能】

2022年3月30日

 

 

AFFINGERのブログカードってどうやったら、投稿記事の中に差し込めるん??

 

今回はAFFINGERのブログカードの作成方法について紹介します!

 

有名ブロガーさんも御用達のワードプレステーマ『AFFINGER』。その中でもブログカードはかなり便利な機能で、いろんな場面で活躍してくれます

 

しかし、作成方法や使い所も注意しなければいけないところもあるので、今回はそういって点についても紹介していきます。

 

本記事の内容

AFFINGERのブログカードの作成方法を紹介

ブログカードのカスタマイズ方法について

AFFINGERのブログカードの使い所の注意点に

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

AFFINGER6(アフィンガー)ブログカードの完成イメージ

 

冒頭でも、述べたようにAFFINGERのブログカードはかなり便利です。

 

使ったことのない人からすると、使い方がいまいちつかめない人も…

 

作り方さえ、一度理解したら、あとは超簡単に作成することができるので、しっかり作れるようにしておきましょう!

 

今回作成するブログカードの完成イメージ

【Amazon】今回のAmazonタイムセール祭りで注目すべきアイテム厳選!今月買うべきもの(2022年9月)

続きを見る

 

多少CSSのコードにて、編集していますので、デザインはその都度変わってます

 

AFFINGER6(アフィンガー)ブログカードの作り方

 

それでは、早速作り方を紹介していきます。作成する手順は以下のステップで簡単に作業が行えます

 

ブログカードの作成手順

  • ブログ記事の記事IDを確認
  • 投稿画面からテキストの挿入
  • 記事IDの挿入

 

それでは、解説していきましょう!

 

step
1
ブログ記事の記事IDを確認

WordPress管理画面から「投稿一覧」に移動し、ブログカードにしたい記事の「記事ID」の確認をします。

 

 

 

 

step
2
投稿画面からテキストの挿入

続いて、投稿画面に移動します。AFFINGER6を使用しているユーザーの方は、ワンクリックでブログカードの作成完了です。

 

カード」をクリックしてください

 

 

以下のようなショートコードが表示されます!

 

 ショートコード
[st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]

 

 

ショートコードの各項目の意味は以下の通りですので、表示形式をカスタマイズしてみましょう

 

  •  id:カードにしたい記事のIDを入力
  • label:ラベルに表示したいテキストを入力し、表示
  • pc_height:PC閲覧時のカードの高さを指定
  • name:ブログカードの記事タイトル ※空白は元の記事タイトルが表示
  • bgcolor:文字色の変更・指定
  • color:背景色の変更・指定
  • fontawesome:フォントアイコンの表示
  • readmore=ON or OFF:「続きを見る」の表示ON /OFF

 

step
3
記事IDの挿入

Step1で確認した「記事ID」を追加したブログカードの「id="◯◯"」に入力しましょう。

 

 

プレビュー画面にて、正しくブログカードが挿入されていたら完了です!

 

AFFINGER6(アフィンガー)ブログカードのカスタマイズ

 

続いては、ブログカードをお洒落に表示したいという人のために、カスタマイズ方法を解説します。

 

ブログカードのカスタマイズ項目

  • サムネイル画像設定の変更
  • 抜粋設定の変更

 

 

サムネイル画像設定の変更

サムネイルの画像の表示方法のカスタマイズについて設定していきましょう。

 

WordPress管理画面から「AFFINGER6管理」→「全体設定」→「サムネイル画像設定」の項目にてサムネイルの編集を行いましょう。

 

 

設定が完了できたら「Save」にて設定を保存しましょう。

 

サムネイルの表示形式は、自分の好みに合った形式に設定しましょう!本ブログではフルサイズ表示にしてます!

 

抜粋設定の変更

続いて、ブログカードの抜粋機能の表示設定をしていきましょう。

 

ちなみに、抜粋機能を使うことで、ブログカード内に記事の内容を表示し、文字数も指定できます

 

実際のデザインが以下のようになります

 

抜粋機能を非表示にする

 

抜粋機能を表示する

 

 

WordPress管理画面から「AFFINGER6管理」→「全体設定」→「抜粋機能」の項目にて編集を行いましょう。

 

 

抜粋機能の表示切り替えや表示する文字数を指定することで、より読者のユーザーを惹きつけるようなものが簡単に作成できます。

 

 

AFFINGER6(アフィンガー)ブログカードの効果的な配置方法

GOOD

 

ここでは、ブログカードの効果的な使い方を解説していきます。

 

具体的な使い所は、以下のポイントです。

 

  • 投稿記事の最下部に配置
  • テキストリンクとセットで配置

 

 

投稿記事の最下部に配置

ログカードの効果的な配置ポイントの一つ目は投稿記事の最下部に配置することです。

 

この方法を使うことによって、記事を一通り読んだ読者のユーザーに関連記事や最近の投稿などに移動してもらい、

 

サイト内をできるだけ徘徊してもらう仕組みを作れます

 

配置するブログカードは必ず関連するものにしておきましょう。

 

テキストリンクとセットで配置

二つ目は、記事の途中に誘導したいリンクに加えて、ブログカードを差し込む方法です。

 

読者のユーザーの方は、記事を読んでいでいても興味をそそるようなものがあれば、次の記事に移っていってしまうことも多々あります。そこで正しく誘導することで、サイト内の徘徊してくれます。

 

やはり、ポイントとしては関連記事をいいタイミングで提示することに限ります。

 

 

注意ポイント

必要のないカードの挿入は逆効果になることがあります。

クリック率を下げないように、使う所には十分に配慮した上で、バランスを見ながら使ってみましょう。

まとめ:AFFINGER6(アフィンガー)ブログカードでおしゃれなリンクを作ろう

 

以上、AFFINGER6のブログカードについての解説でした。

 

作り方はとても簡単なので、一度作り方だけ確認しておくだけで使いこなせることが可能かと思います

 

記事全体のバランスを見て、読者のユーザーを惹きつけるデザインにしてみてください。

 

AFFINGERのカスタマイズに関するまとめ記事はこちら

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-,