AFFINGER6(アフィンガー)のブログカードの作り方。2秒で作れます。

AFFINGER6(アフィンガー)のブログカードの作り方。2秒で作れます。

2020年5月22日

 

AFFINGER6のブログカードってどうやって使うの?作り方を教えて!

 

このような疑問にお答えします。

 

本記事の内容

  • アフィンガー6のブログカード作成手順
  • ブログカードのカスタマイズ手順
  • ブログカードの効果的な配置方法
  • ブログカード利用の注意点

機能面に優れていることで有名なAFFINGER6。その中のブログカードがかなり優秀なのですが、使い方が分からないという人が多いです。

しかし、実はそこまで難しい機能ではなくて、一度理解してしまえばあとは2秒で作れる超簡単な機能です。

 

ということで今回は、AFFINGER6のブログカードを作ったことがない人向けに、2秒で作れる方法を徹底的に解説します。また、カスタマイズ方法や効果的な配置方法など、ブログカードに関するすべての情報を公開します。

本記事を読めばAFFINGER6のブログカードについて網羅的に理解することができますよ。

 

✔本記事の執筆者

本記事の執筆者

Twitter:(@k03mind)

 

※当サイト経由でAFFINGER6を購入すると、限定特典として9点を無料プレゼントします。

 

購入者特典

  1. 【購入前特典】アフィンガー初期設定方法を解説
  2. 【購入前特典】アフィンガーを使ったサイトカスタマイズ公開
  3. 【購入前特典】収益を上げるアフィンガーの機能を公開
  4. 限定プラグイン[「SUGOI MOKUJI [LITE]」]
  5. 開始3ヶ月でSEOで月1万稼ぐサイトのプラグインを公開
  6. レビュー記事の書き方[テンプレート配布]
  7. 比較記事の書き方[テンプレート配布]
  8. ランキング記事の書き方[テンプレート配布]
  9. 質問し放題[無期限]

\購入ページはこちら/

9つの限定特典付き

 

当サイト限定特典の詳細は、こちらの[購入特典あり]AFFINGER6(アフィンガー)の購入&導入手順をどうぞ。

実際に利用している人の評価は、こちらの稼げるテーマ!AFFINGER6(アフィンガー)の口コミ・評判まとめをどうぞ。

 

 

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

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

 

まずは、今回作成するブログカードがどんなものなのか?イメージしてください。

これから解説する内容を実践すれば、下記のようなブログカードを作ることができます。

 

②:WordPressテーマはAFFINGER6(テーマ最適化)
[購入特典あり]AFFINGER6(アフィンガー)の購入&導入手順

続きを見る

 

それでは作り方を解説していきますね。

 

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

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

  1. ブログカードにする記事IDをメモ
  2. ワンクリックでコードの挿入
  3. ブログカードにする記事IDの入力

ブログカードを作る手順は上記の3つ。

1つずつ解説していきます。

 

1.ブログカードにする記事IDをメモ

まずはブログカードとして表示したい記事のIDをメモしましょう。

記事IDについては、下記の通りWordPress管理画面から「投稿」→「投稿一覧」の順でクリックをすると確認できます。

 

アフィンガー5の記事IDの確認方法

 

画面右側にIDが表示されているので、メモしておきましょう。

 

2.ワンクリックでコードの挿入

ブログカードを作る際に必要なコードなのですが、AFFINGER6はワンクリックでOK。

下記の通り、記事編集画面にある「カード」をクリックしてください。

 

アフィンガー5のブログカードの出力方法

 

すると、次のようなショートコードが出力されます。

 

st-card myclass="" id= label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on"

 

このショートコードには、それぞれ次のような意味があります。

 

  • st-card myclass="" id:カードにしたい記事のIDを入力する欄
  • label:文字を入力することで文字とともにラベルを表示できる
  • pc_height:PC閲覧時のカードの高さを指定できる
  • name:ブログカードの記事タイトルを決めることができます
  • bgcolor:文字色を変更することができます
  • color:背景色を変更することができます
  • fontawesome:表示するフォントアイコン
  • readmore=on:「続きを見る」と表示される

 

コードには一つ一つ意味がありますが、いきなり全部覚えるのは無理。

どこを触ればどのように表示されるか、使いながら覚えていきましょう。(慣れれば簡単です)

 

3.ブログカードにする記事IDの入力

先ほどのショートコードに記事IDを入力すればブログカードの完成です。

入力する欄は、id=""の部分。画像で言うと、下記赤線です。

 

アフィンガー5のブログカードのショートコード

 

他は触る必要なし。

 

以上でAFFINGER6のブログカードの作り方の解説は終了です。

結論、記事IDをメモし、記事編集画面で「カード」で出力したショートコードに記事IDを入力するだけ。

 

慣れれば2秒で作成できる簡単な機能!
kazuki

 

さて、続いては少しお洒落に作りたいという人のために、カスタマイズ方法を解説します。

 

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

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

  1. サムネイル画像設定の変更
  2. 抜粋設定の変更
  3. ショートコードの変更

カスタマイズできる箇所は上記の3点。

1つずつ解説していきますね。

 

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

下記の通り、WordPress管理画面から「AFFINGER6管理」→「デザイン」の順にクリック。(※画像はAFFINGER5ですが、内容は同じです

 

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

 

その中の「サムネイル画像設定」を見つけて下さい。

 

サムネイル画像設定の編集画面

 

ここで各記事一覧で表示する、サムネイルデザインをカスタマイズすることができます。

カスタマイズ項目は次の通り。

 

  • 丸くする
  • 正方形にする
  • フルサイズにする
  • メディア設定にする
  • サムネイル画像を角丸に変更する
  • サムネイル画像を右側に変更する
  • サムネイル画像をポラロイド風にする
  • セロテープを付ける
  • サムネイル画像を大きくする(タブレット以上は1.5倍)
  • スマホ(599px以下)でもサムネイル画像を大きくする
  • サムネイル画像をさらに大きく(β)
  • サムネイル画像サイズ設定からブログカード(カードURL含む)を除外
  • サムネイル画像を表示しない
  • アイキャッチが無い時のサムネイル画像設定

 

こちらはお好みでOKです。

好きにカスタマイズしましょう。

 

ちなみに僕は"フルサイズ"にチェックを入れています。
kazuki

 

2.抜粋設定の変更

抜粋設定についても、先ほどのサムネイル画像設定と同じ画面で可能です。

下記のとおりWordPress管理画面から「AFFINGER6管理」→「デザイン」の順にクリックしていただき、その中の「抜粋設定」を見つけて下さい。

 

抜粋設定の変更

 

ここで抜粋表示についてカスタマイズすることができます。項目は次の通り。

 

  • 抜粋の文字数※デフォルトは100(ブログカード風ショートコード含む):100
  • PC閲覧時も「最新の投稿一覧」ウィジェット及びサイドバーの記事一覧の抜粋を表示する
  • PC閲覧時も記事一覧(トップ・アーカイブ・関連記事)の抜粋を非表示にする PC閲覧時の「ブログカード」及びコンテンツ内の
  • 「おすすめ記事」の抜粋を非表示にする
  • スマホ(960px未満)閲覧時でも「記事一覧・カテゴリ一覧」の抜粋を表示する
  • スマホ(960px未満)閲覧時でも「ブログカード」の抜粋を表示する

 

こちらもお好みでOKなので、好きにカスタマイズしましょう。

 

ちなみに僕は"PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする"にチェックを入れています。
kazuki

 

3.ショートコードの変更

ショートコードを変更することで、さらにおしゃれにカードを表示させることができます。

まずはコードを用意します。記事編集画面で「カード」をクリックしてください。

 

そのままでは下記のように表示されます。

 

st-card myclass="" id= label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on"

 

こちらは次のように変更できます。

 

変化
label=""文字を入れると、文字入りのラベルが出現する
name=""ここに入力した文字がタイトルになる
bgcolor=""カラーコードを入力するとラベルの背景色を変更できる
color=""カラーコードを入力するとラベルの文字色を変更できる
readmore=""onで続きを見るを表示。offで非表示。

※カラーコードはこちらから確認できます。

 

僕は何もカスタマイズしていませんが、おしゃれさを追求するならカスタマイズしましょう!
kazuki

 

以上、ブログカードのカスタマイズについてでした。これで作成からカスタマイズまで完了です。いつでもブログカードを使うことができますが、効果的な配置方法があるので闇雲に使ってはいけません。

詳しくは、次の項で解説していきますね。

 

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

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

  1. 記事最後に配置
  2. テキストリンクと一緒に配置

効果的な配置方法としては、上記の2つ。

1つずつ解説します。

 

1.記事最後に配置

読者は記事を最後まで読み終わるとGoogleに戻って別の記事を探すので、記事の最後にブログカードを配置することで、Googleに戻らずサイト内を回遊してもらえる可能性が高くなるということです。

ここで大事なのが、配置するブログカードは必ず関連する内容の記事であるということ。

 

まったく関係ない記事に読者は興味がないので、せっかくブログカードを配置してもクリックされず、サイト内を回遊してもらえません。

配置する記事は、必ず関連記事を配置しましょう。しかし、これは記事最後のお話。記事途中では別の方法が効果的です。方法は次で解説しますね。

 

2.テキストリンクと一緒に配置

先ほどの記事最後に配置する場合はブログカードだけでもいいのですが、記事途中だと微妙。

記事最後になるとユーザーは次の記事を探すマインドにシフトしているのですが、記事途中では"記事"を読むことに集中しています。

 

読むことに集中って言っても、流し読みだけどね(笑)
kazuki

 

記事を流し読みしている読者が目立つブログカードを見つけても、きちんと誘導してあげなければ読者はなかなか動かない。

なので、"こちらの記事をどうぞ"という具合に、テキストで誘導する必要があります。

 

具体的な配置方法をお見せします。

 

例:アフィンガー5のブログカードはかなり使いやすいですが、吹き出し機能もかなり優秀。

詳しくはこちらの【アフィンガー6】吹き出し機能の設定から使い方まで徹底解説をどうぞ。

 

このように配置します。目立つブログカードで読者の目を留まらせ、テキストで誘導する。

最強の2重策です。

 

収益記事への誘導を逃さないための効果的な手法ですよ。
kazuki

 

以上、ブログカードの効果的な配置方法についてでした。これですぐに記事に導入できますが、まだ慌てないで。

注意点を理解しておかないと後で痛い目を見ます。次の項で詳しく解説するので、しっかり読んでください。

 

AFFINGER6(アフィンガー)ブログカードの注意点

AFFINGER6(アフィンガー)ブログカードの注意点

  1. 必要ない記事をカード型で表示しない
  2. アイキャッチ画像を設定しましょう
  3. クリック率が下がる可能性がある

注意点は上記の3つ。

1つずつ解説していきます。

 

1.必要ない記事をカード型で表示しない

読者にとって必要ないものは邪魔です。ユーザビリティ向上のためにも、本当に必要な記事だけカード型にしましょう。

 

読者満足度を第一に!
kazuki

 

2.アイキャッチ画像を設定しましょう

アイキャッチ画像を設定していなければ、ブログカードで表示した際に画像が出てきません。

カード型で作成したい記事にアイキャッチ画像が設定されているか、あらかじめ確認しておきましょう。

 

画像なしはさすがにかっこ悪い(笑)
kazuki

 

3.クリック率が下がる可能性がある

実はカード型のリンクはクリック率が下がる可能性があります。

というのも、テキストであれば「詳しくはこちらの~で解説しています」というように、文章中で自然に誘導することができます。

 

しかし、カード型ではリンクを置いておくだけなので、目立つもののクリックされない可能性が高まります。

 

だから、先ほどの効果的な配置方法で解説した"テキストリンク+ブログカードの2重配置"が効果的なんですよね。

 

文章を流し読みしている読者をブログカードで目を留まらせ、テキストリンクで誘導する。

2重の策を張ることで、逆にクリック率を上げましょう。

 

ブログカードだけは正直微妙。。。テキストと掛け合わせよう!
kazuki

 

以上、ブログカードの注意点でした。

ここまで読んだあなたはAFFINGER6ブログカードマスターです。

 

クリック率を上げるための一工夫を怠らず、サイト内を回遊してもらいましょう!
kazuki

 

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

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

本記事ではAFFINGER6のブログカードについて網羅的に解説しました。

作り方としては非常に簡単で、一度覚えてしまえば次は2秒で作れます。

 

ブログカードはサイトを回遊してもらうための重要な役割があるので、役割をしっかり果たせるように配置して下さい。

 

また、カスタマイズもいろいろできるので、必要なら自分好みのおしゃれなブログカードを作ってみましょう。

 

カスタマイズはそのままでも十分おしゃれだけどね!
kazuki

 

こんな感じで、当サイトではアフィンガー6に関する記事を網羅的にまとめています。

他にも気になることがあれば、下記の記事を参考にしてください。

 

【アフィンガー5 JET】評価、導入・カスタマイズ方法【すべて語る】

続きを見る

【最短5分】AFFINGER6(アフィンガー)の初期設定を徹底解説
【最短5分】AFFINGER6(アフィンガー)の初期設定を徹底解説

続きを見る

AFFINGER6(アフィンガー)がSEOに強いと言われる5つの理由
AFFINGER6(アフィンガー)がSEOに強いと言われる5つの理由

続きを見る

【初心者向け】AFFINGER6の使い方【絶対に使う機能6選】
【初心者向け】AFFINGER6の使い方【絶対に使う機能6選】

続きを見る

[コピーOK]AFFINGER6でトップページをカスタマイズする手順
[コピーOK]AFFINGER6でトップページをカスタマイズする手順

続きを見る

【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説
【AFFINGER6】吹き出し機能の設定から使い方まで徹底解説

続きを見る

AFFINGER6のランキング作成手順を徹底解説
AFFINGER6のランキング作成手順を徹底解説

続きを見る

【超おしゃれ】アフィンガー6のスライドショーの設定方法と使い方
【超おしゃれ】AFFINGER6のスライドショーの設定方法と使い方

続きを見る

【徹底解説】AFFINGER6で目次を作る方法3選
【徹底解説】AFFINGER6で目次を作る方法3選

続きを見る

 

※当サイト経由でAFFINGER6を購入すると、限定特典として9点を無料プレゼントします。

 

購入者特典

  1. 【購入前特典】アフィンガー初期設定方法を解説
  2. 【購入前特典】アフィンガーを使ったサイトカスタマイズ公開
  3. 【購入前特典】収益を上げるアフィンガーの機能を公開
  4. 限定プラグイン[「SUGOI MOKUJI [LITE]」]
  5. 開始3ヶ月でSEOで月1万稼ぐサイトのプラグインを公開
  6. レビュー記事の書き方[テンプレート配布]
  7. 比較記事の書き方[テンプレート配布]
  8. ランキング記事の書き方[テンプレート配布]
  9. 質問し放題[無期限]

\購入ページはこちら/

9つの限定特典付き

 

当サイト限定特典の詳細は、こちらの[購入特典あり]AFFINGER6(アフィンガー)の購入&導入手順をどうぞ。

実際に利用している人の評価は、こちらの稼げるテーマ!AFFINGER6(アフィンガー)の口コミ・評判まとめをどうぞ。

 

-affinger