こんにちは、
氷河期世代クリエイターのYOHEIです。
今回はワードプレスブログの初心者向けに、テーマAFFINGER5の「ブログカード」機能の使い方を紹介します。
色々なサイトやブログでよく見かける、カード型の関連記事リンクを自分の記事に使ってみたいな。
記事リンクをカード型にする「ブログカード」機能はどうすれば使えるのかな？
本記事では、こういった悩みの解決に役立つAFFINGER5「ブログカード」機能の使い方紹介します。
本記事の内容
もくじ
1. AFFINGER5（アフィンガーファイブ）の「ブログカード」機能とは？
2. AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】
3.「ブログカード」のカスタマイズ方法
4. まとめ：「ブログカード」機能を使うと、リンク記事のクリック率を高めて読んでもらいやすくなる!
本記事の信頼性
この記事を書いている私は、広告・デザイン業界歴20年ほどです。
ワードプレスブログ初心者の方に、本ブログで実際に使っているテーマAFFINGER5の「ブログカード」機能をできるだけわかりやすく紹介したいと思います。
（・o・）/
では詳しく見てみましょう！
※本記事の内容は、ワードプレスのテーマに「AFFINGER5」と投稿編集プラグインに「Classic Editor」の使用を前提として紹介しています。
AFFINGER5を知らない方は、こちらの記事をご覧ください。
-
-
初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】
こんにちは、 氷河期世代クリエイターのYOHEIです。 前回にひきつづき、 初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】です。 （全9回に分けて解説しています） 今回は、前 ...
続きを見る
投稿編集インターフェイスのプラグイン「Classic Editor」についてはこちらの記事で紹介しています。
-
-
ワードプレスブログのプラグイン初心者向け【おすすめ11選】
こんにちは、 氷河期世代クリエイターのYOHEIです。 今回はワードプレスブログの初心者向けに、初期設定として入れておくと良いおすすめのプラグインを紹介します。 悩んでる方ワードプレスを ...
続きを見る
1. AFFINGER5（アフィンガーファイブ）の「ブログカード」機能とは？
結論：ブログカード機能は、記事リンクの視認性を高め、読者にクリックしてもらいやすくする機能です
ブログカードはアイキャッチのあるカード型の記事リンクボタンなので、通常のテキストタイプのリンクより視認性と存在感が高く、読者にクリックしてもらいやすくすることができます。
なので記事内の関連記事リンクにブログカード機能を使用すると、他の記事も読んでもらえる可能性が上がります。
またSEO的にも内部リンクを設置することは良いことなので、記事内にリンクを設置する場合にブログカード機能の使用は欠かせません。
使い方の前に、AFFINGER5の「ブログカード」機能のできることを紹介します。
AFFINGER5のブログカード機能のできること
● 記事のアイキャッチが表示される
本ブログのYOHEI LOGではオリジナルのイラストを使用しています。
アイキャッチを設定していない方は、こちらの記事でアイキャッチ素材の作成方法について紹介しています。
-
-
ブログの手描きアイキャッチ画像作り方！【無料で簡単にできる】
こんにちは、 氷河期世代クリエイターのYOHEIです。 今回の記事では、このブログで使用している手描きイラストのアイキャッチ・サムネの作り方を紹介したいと思います。 ブログのアイキャッチやサムネを用意 ...
続きを見る
素材を作るのが苦手な方は、フリー素材を使用してもOKです。
-
-
無料あり!ブログで使える写真素材の探し方【あなたのサイトを魅力的に】
こんにちは、 氷河期世代クリエイターのYOHEIです。 初めてホームページやブログを作る時に文字要素だけだと、見た目がパッとしない事に気づくと思います。 そこで、サイトをより魅力的で華やかにするために ...
続きを見る
● タイトルを自由に設定できる
● カードにラベルを付けることができる
● ラベルとラベルの文字色を変えることができる
●「続きを見る」の表示・非表示
● 抜粋文の表示・非表示を指定できる
● 抜粋文を表示する場合、文字数を指定できる
など
ざっとこんなところです。
ということでカード型リンクは視認性と存在感が高く、読者にクリックしてもらいやすくなるので、関連記事のリンク設置に欠かせません。記事の質を上げるためにも使用することをおすすめします。
では実際に使い方を見ていきましょう！
2. AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】
使い方はたったの2ステップです
Step1. ブログカードにしたい記事のIDを調べる
Step2. 記事にブログカードのショートコードを挿入
では詳しく見てみましょう。
Step1. ブログカードにしたい記事のIDを調べる
ブログカードのショートコードを記事に挿入してみましょう。
まずブログカードにしたい記事のIDを調べます。
ワードプレス管理画面メニュー「投稿」→「投稿一覧」を開きます。過去に作成した記事には、それぞれIDが割り当てられています。
確認したIDを記事にブログカードとして挿入します。
Step2. 記事にブログカードのショートコードを挿入
ワードプレス投稿編集ページを開き、ブログカードを挿入したい場所をクリック。
ビジュアルエディタのボタン「カード」をクリック。
※投稿編集画面はプラグイン「Classic Editor」を使用したものです。
するとブログカードのショートコードが挿入されます。
ショートコードの「id」の項目に、最初に確認したブログカードにしたい記事のIDを入力します。
プレビューで記事を確認すると、ブログカードが挿入されています。
ブログカードの挿入は以上です。
ブログカド機能は、簡単なうえリンク記事のクリック率を高めて読んでもらいやすくなるので記事作成にかかせません。とってもおすすめな機能です！
3.「ブログカード」のカスタマイズ方法
ブログカードにラベルをつける
ブログカードのショートコード「label=“◯◯”」に文字を入力すると、ラベルが表示されます。
↓
ラベルとラベルの文字色を変更する
ブログカードのショートコード「bgcolor=“◯◯”」にHTMLカラーコードを入力すると、ラベルの色を設定できます。
ブログカードのショートコード「color=“◯◯”」にHTMLカラーコードを入力すると、ラベルの文字色を設定できます。
ラベルの色を黒（#000000）にして、ラベルの文字色を白（#ffffff）にした場合。
↓
HTMLカラーコードって何？って方は、こちらの記事（4. Webのカラー表記について）をご覧ください。
-
-
初心者向けカラーデザインの学習 #2【配色でおしゃれに見せるヒント】
こんにちは、 氷河期世代クリエイターのYOHEIです。 今回も前回にひきつづき、初心者向けのカラーデザイン（配色）のお話です。 Part2ということで、カラーデザイン（配色）についての知識をさらに深堀 ...
続きを見る
ブログカードにタイトルつける
ブログカードのショートコード「name=“◯◯”」に文字を入力すると、ここに入力した文字がタイトルになります。入力していない場合はもともとの記事タイトルが表示されます。
↓
「続きを見る」の表示 ・非表示
抜粋文の最後にもともと表示されている「続きを見る」の非表示にする設定は、ブログカードのショートコード「readmore=“on”」の項目を「readmore=“off”」にします。offにしたらこんな感じになります。
ブログカードの抜粋文の文字数設定
ワードプレス管理画面の左メニュー「AFFINGER5 管理」→「デザイン」の画面を開きます。
デザインの設定画面の「抜粋設定」に設定します。
設定項目の一番上の
「抜粋の文字数※デフォルトは100（ブログカード風ショートコード含む）」に表示させたい文字数を入力して「SAVE」ボタンをクリックします。
例えば5文字にしてみるとこんな感じになります。
↓
「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックをいれると、抜粋が表示されなくなります。
↓
※「続きを見る」は表示させています。
最後に、
PCでブログカードの抜粋文を表示させていても、スマホでの表示はもともとタイトルしか表示されず抜粋文は表示されていません。スマホでも抜粋文を表示させたい場合は、「スマホ（960px未満）閲覧時でも「ブログカード」の抜粋を表示する」にチェックをいれることでスマホにも抜粋文を表示させることができます。
カスタマイズは簡単なので、記事によって変えても良いと思います。
ただ「抜粋設定」は記事ごとではなく、サイト全てのカードに対して設定することになってしまいます。サイト全体のデザインのことも考えつつ設定しましょう。
4. まとめ：「ブログカード」機能を使うと、リンク記事のクリック率を高めて読んでもらいやすくなる!
今回はワードプレスブログテーマAFFINGER5の「ブログカード」機能を紹介させていただきました。
「ブログカード」機能を使うと視認性の高いリンクになるので、読者に関連記事をクリックしてもらいやすくなります。またSEO対策としても有効なので、使ったことがない方は試してみましょう！
今回の記事は以上です。
最後に今回の内容をおさらいしましょう！
Do it! ではでは。
（・o・）/
《人気関連記事》初心者できた!ワードプレスブログ始め方Step9【アフィリエイト始め方編】