このような疑問にお答えします。
✓本記事の執筆者
Twitter：かずき(k03mind)
機能面に優れていることで有名なAFFINGER5。
その中のブログカードがかなり優秀なのですが、使い方が分からないという人が多いですよね。
実はそこまで難しい機能ではなくて、一度理解してしまえばあとは2秒で作れる超簡単な機能です。
ということで今回は、AFFINGER5のブログカードを作ったことがない人向けに、2秒で作れる方法を徹底的に解説します。
また、カスタマイズ方法や効果的な配置方法など、ブログカードに関するすべての情報を公開します。
※本記事はすでにAFFINGER5を購入している人向けの記事です。もし、まだ購入されていないのであれば、下記の記事をどうぞ☟
購入特典
当サイト経由でAFFINGE5をご購入いただけますと、購入者限定特典として6つの特典をプレゼントします。
目次
AFFINGER5(アフィンガー)ブログカードの完成イメージ
まずは、今回作成するブログカードがどんなものなのか？イメージしてください☟
-
[購入特典あり]稼げるテーマ！アフィンガー5の購入＆導入手順
続きを見る
これから解説する内容を実践していただければ、上記のようなブログカードを作ることができます。
それでは作り方を解説していきますね。
AFFINGER5(アフィンガー)ブログカードの作り方
手順は次の3つ☟
- ブログカードにする記事IDをメモ
- ワンクリックでコードの挿入
- ブログカードにする記事IDの入力
1つずつ解説していきます。
１．ブログカードにする記事IDをメモ
まずはブログカードとして表示したい記事のIDをメモしましょう。
記事IDについては、WordPress管理画面から「投稿」→「投稿一覧」の順でクリックをすると確認できます。
画面右側にIDが表示されているので、メモしておきましょう。
２．ワンクリックでコードの挿入
ブログカードを作る際に必要なコードなのですが、AFFINGER5はワンクリックでOK。
記事編集画面にある、「カード」をクリックしてください。
すると、次のようなショートコードが出力されます☟
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：「続きを見る」と表示される
コードには一つ一つ意味がありますが、いきなり全部覚えるのは無理。
どこを触ればどのように表示されるか、使いながら覚えていきましょう。(慣れれば簡単です)
３．ブログカードにする記事IDの入力
先ほどのショートコードに記事IDを入力すればブログカードの完成です。
入力する欄は、id=""の部分。画像で言うと、下記赤線です☟
他は触る必要なし。
以上でAFFINGER5のブログカードの作り方の解説は終了です。
結論、記事IDをメモし、記事編集画面で「カード」で出力したショートコードに記事IDを入力するだけ。
さて、続いてはもう少しおしゃれに作りたいという人のために、カスタマイズ方法を解説します。
AFFINGER5(アフィンガー)ブログカードのカスタマイズ
カスタマイズできる箇所は下記の3点☟
- サムネイル画像設定の変更
- 抜粋設定の変更
- ショートコードの変更
1つずつ解説していきますね。
１．サムネイル画像設定の変更
サムネイル画像については、WordPress管理画面から「AFFINGER5管理」→「デザイン」の順にクリック。
その中の「サムネイル画像設定」を見つけて下さい。
ここで各記事一覧で表示する、サムネイルデザインをカスタマイズすることができます。
カスタマイズ項目は次の通り☟
- 丸くする
- 正方形にする
- フルサイズにする
- メディア設定にする
- サムネイル画像を角丸に変更する
- サムネイル画像を右側に変更する
- サムネイル画像をポラロイド風にする
- セロテープを付ける
- サムネイル画像を大きくする（タブレット以上は1.5倍）
- スマホ（599px以下）でもサムネイル画像を大きくする
- サムネイル画像をさらに大きく（β）
- サムネイル画像サイズ設定からブログカード（カードURL含む）を除外
- サムネイル画像を表示しない
- アイキャッチが無い時のサムネイル画像設定
こちらはお好みでOKです。好きにカスタマイズしましょう。
２．抜粋設定の変更
抜粋設定についても、先ほどのサムネイル画像設定と同じ画面で可能です。
WordPress管理画面から「AFFINGER5管理」→「デザイン」の順にクリックしていただき、その中の「抜粋設定」を見つけて下さい。
ここで抜粋表示についてカスタマイズすることができます。
項目は次の通り☟
- 抜粋の文字数※デフォルトは100（ブログカード風ショートコード含む）：100
- PC閲覧時も「最新の投稿一覧」ウィジェット及びサイドバーの記事一覧の抜粋を表示する
- PC閲覧時も記事一覧（トップ・アーカイブ・関連記事）の抜粋を非表示にする PC閲覧時の「ブログカード」及びコンテンツ内の
- 「おすすめ記事」の抜粋を非表示にする
- スマホ（960px未満）閲覧時でも「記事一覧・カテゴリ一覧」の抜粋を表示する
- スマホ（960px未満）閲覧時でも「ブログカード」の抜粋を表示する
こちらもお好みでOKなので、好きにカスタマイズしましょう。
３．ショートコードの変更
ショートコードを変更することで、さらにおしゃれにブログカードを表示させることができます。
まずはコードを用意します。記事編集画面で「カード」をクリックしてください。
そのままでは下記のように表示されます☟
st-card myclass="" id= label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on"
こちらは次のように変更できます。
| 値 | 変化 |
| label="" | 文字を入れると、文字入りのラベルが出現する |
| name="" | ここに入力した文字がタイトルになる |
| bgcolor="" | カラーコードを入力するとラベルの背景色を変更できる |
| color="" | カラーコードを入力するとラベルの文字色を変更できる |
| readmore="" | onで続きを見るを表示。offで非表示。 |
※カラーコードはこちらから確認できます。
以上、ブログカードのカスタマイズについてでした。これで作成からカスタマイズまで完了です。
いつでもブログカードを使うことができますが、効果的な配置方法があるので闇雲に使ってはいけません。
詳しくは、次の項で解説していきますね。
AFFINGER5(アフィンガー)ブログカードの効果的な配置方法
効果的な配置方法としては、次の2つ☟
- 記事最後に配置
- テキストリンクと一緒に配置
一つずつ解説します。
1．記事最後に配置
記事最後に配置すると効果的です。
というのも、読者は記事を最後まで読み終わるとGoogleに戻って別の記事を探します。
そこで、記事の最後に配置することで、Googleに戻らずサイト内を回遊してもらえる可能性が高くなるということです。
ここで大事なのが、配置するブログカードは必ず関連する内容の記事であるということ。
まったく関係ない記事に読者は興味がないので、せっかくブログカードを配置してもクリックされず、サイト内を回遊してもらえません。
配置する記事は、必ず関連記事を配置しましょう。
しかし、これは記事最後のお話。記事途中では別の方法が効果的です。
方法は次で解説しますね。
2．テキストリンクと一緒に配置
テキストリンク＋ブログカードの2重配置が効果的です。
先ほどの記事最後に配置する場合はブログカードだけでもいいのですが、記事途中だと微妙。
記事最後になるとユーザーは次の記事を探すマインドにシフトしているのですが、記事途中では"記事"を読むことに集中しています。
記事を流し読みしている読者が目立つブログカードを見つけても、きちんと誘導してあげなければ読者はなかなか動かない。
なので、"こちらの記事をどうぞ"という具合に、テキストで誘導してあげなければいけません。
具体的な配置方法をお見せします。
例：アフィンガー5のブログカードはかなり使いやすいですが、吹き出し会話機能もかなり優秀です。
詳しくはこちらの【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説をご覧ください。
-
【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説
続きを見る
このように配置します。目立つブログカードで読者の目を留まらせ、テキストで誘導する。
最強の2重策です。
以上、ブログカードの効果的な配置方法についてでした。
これですぐに記事に導入できますが、まだ慌てないで。
注意点を理解しておかないと後で痛い目を見ます。次の項で詳しく解説するので、しっかり読んでください。
AFFINGER5(アフィンガー)ブログカードの注意点
注意点は次の3つ☟
- 必要ない記事をカード型で表示しない
- アイキャッチ画像を設定しましょう
- クリック率が下がる可能性がある
1つずつ解説していきます。
１．必要ない記事をカード型で表示しない
必要のない記事をカード型にしてはいけません。
読者にとって必要ないものは邪魔です。ユーザビリティ向上のためにも、本当に必要な記事だけカード型にしましょう。
２．アイキャッチ画像を設定しましょう
アイキャッチ画像を設定していなければ、ブログカードで表示した際に画像が出てきません。
カード型で作成したい記事にアイキャッチ画像が設定されているか、あらかじめ確認しておきましょう。
３．クリック率が下がる可能性がある
実はカード型のリンクはクリック率が下がる可能性があります。
というのも、テキストであれば「詳しくはこちらの～で解説しています」というように、文章中で自然に誘導することができます。
しかし、カード型ではリンクを置いておくだけなので、目立つもののクリックされない可能性が高まります。
だから、先ほどの効果的な配置方法で解説した"テキストリンク＋ブログカードの2重配置"が効果的なんですよね。
文章を流し読みしている読者をブログカードで目を留まらせ、テキストリンクで誘導する。
2重の策を張ることで、逆にクリック率を上げましょう。
以上、ブログカードの注意点でした。
ここまで読んだあなたはAFFINGER5ブログカードマスターです。
それでは最後にまとめです。
まとめ：AFFINGER5(アフィンガー)ブログカードでおしゃれなリンクを作ろう
本記事ではAFFINGER5のブログカードについて網羅的に解説しました。
作り方としては非常に簡単で、一度覚えてしまえば次は2秒で作れます。
ブログカードはサイトを回遊してもらうための重要な役割があるので、その役割をしっかり果たせるように配置して下さい。
また、カスタマイズもいろいろできるので、必要なら自分好みのおしゃれなブログカードを作ってみましょう。
こんな感じで、AFFINGER5には素晴らしい機能があるのですが、実はその他にも面白い機能があります。
詳細は個別でまとめた記事があるので、どうぞご活用ください☟
✓アフィンガー5の使い方
✓トップページカスタマイズ
>>[コピーOK]アフィンガー5でトップページをカスタマイズする手順
✓スライドショーの使い方
>>【超おしゃれ】アフィンガー5のスライドショーの設定方法と使い方
✓ランキング機能の使い方
✓吹き出し機能の使い方
それでは今日はこのへんで。グッバーイ