BLOG for BEGINNERS SKILLS

AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】

AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】

こんにちは、
氷河期世代クリエイターのYOHEIです。

今回はワードプレスブログの初心者向けに、テーマAFFINGER5の「ブログカード」機能の使い方を紹介します。

 

悩んでる方
ブログ記事も10記事ほど書いたし、そろそろSEO効果のある内部リンクを記事内に設置したいな。

色々なサイトやブログでよく見かける、カード型の関連記事リンクを自分の記事に使ってみたいな。

記事リンクをカード型にする「ブログカード」機能はどうすれば使えるのかな?

 

本記事では、こういった悩みの解決に役立つAFFINGER5「ブログカード」機能の使い方紹介します。

 

本記事の内容

もくじ

1. AFFINGER5(アフィンガーファイブ)の「ブログカード」機能とは?

2. AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】

3.「ブログカード」のカスタマイズ方法

4. まとめ:「ブログカード」機能を使うと、リンク記事のクリック率を高めて読んでもらいやすくなる!

 

本記事の信頼性

この記事を書いている私は、広告・デザイン業界歴20年ほどです。

ワードプレスブログ初心者の方に、本ブログで実際に使っているテーマAFFINGER5の「ブログカード」機能をできるだけわかりやすく紹介したいと思います。

(・o・)/

 

では詳しく見てみましょう!

※本記事の内容は、ワードプレスのテーマに「AFFINGER5」と投稿編集プラグインに「Classic Editor」の使用を前提として紹介しています。

AFFINGER5を知らない方は、こちらの記事をご覧ください。

初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】
初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】

こんにちは、 氷河期世代クリエイターのYOHEIです。 前回にひきつづき、 初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】です。 (全9回に分けて解説しています) 今回は、前 ...

続きを見る

 

投稿編集インターフェイスのプラグイン「Classic Editor」についてはこちらの記事で紹介しています。

ワードプレスブログのプラグイン初心者向け【おすすめ11選】
ワードプレスブログのプラグイン初心者向け【おすすめ11選】

こんにちは、 氷河期世代クリエイターのYOHEIです。 今回はワードプレスブログの初心者向けに、初期設定として入れておくと良いおすすめのプラグインを紹介します。   悩んでる方ワードプレスを ...

続きを見る

 

 

1. AFFINGER5(アフィンガーファイブ)の「ブログカード」機能とは?

結論:ブログカード機能は、記事リンクの視認性を高め、読者にクリックしてもらいやすくする機能です

 

AFFINGER5(アフィンガーファイブ)の「ブログカード」機能とは?_1

ブログカードはアイキャッチのあるカード型の記事リンクボタンなので、通常のテキストタイプのリンクより視認性と存在感が高く、読者にクリックしてもらいやすくすることができます。

なので記事内の関連記事リンクにブログカード機能を使用すると、他の記事も読んでもらえる可能性が上がります。

またSEO的にも内部リンクを設置することは良いことなので、記事内にリンクを設置する場合にブログカード機能の使用は欠かせません。

 

使い方の前に、AFFINGER5の「ブログカード」機能のできることを紹介します。

 

AFFINGER5のブログカード機能のできること

● 記事のアイキャッチが表示される

本ブログのYOHEI LOGではオリジナルのイラストを使用しています。

アイキャッチを設定していない方は、こちらの記事でアイキャッチ素材の作成方法について紹介しています。

ブログの手描きアイキャッチ画像作り方!【無料で簡単にできる】
ブログの手描きアイキャッチ画像作り方!【無料で簡単にできる】

こんにちは、 氷河期世代クリエイターのYOHEIです。 今回の記事では、このブログで使用している手描きイラストのアイキャッチ・サムネの作り方を紹介したいと思います。 ブログのアイキャッチやサムネを用意 ...

続きを見る

 

素材を作るのが苦手な方は、フリー素材を使用してもOKです。

無料あり!ブログで使える写真素材の探し方【あなたのサイトを魅力的に】
無料あり!ブログで使える写真素材の探し方【あなたのサイトを魅力的に】

こんにちは、 氷河期世代クリエイターのYOHEIです。 初めてホームページやブログを作る時に文字要素だけだと、見た目がパッとしない事に気づくと思います。 そこで、サイトをより魅力的で華やかにするために ...

続きを見る

 

● タイトルを自由に設定できる

● カードにラベルを付けることができる

● ラベルとラベルの文字色を変えることができる

●「続きを見る」の表示・非表示

● 抜粋文の表示・非表示を指定できる

● 抜粋文を表示する場合、文字数を指定できる

など

ざっとこんなところです。

 

悩んでる方
なるほど! ところで一つ気になったのですが、 ブログカード型リンクが使えるようになれば、テキストタイプのリンクは使わないほうが良いのでしょうか?
カード型リンクばかりで主張しすぎると、読者にうるさい印象を与えてしまいます。なのでさりげなく記事に溶けこませるテキストリンクと、視認性の高いカード型リンクの併用がおすすめです。
YOHEI

 

ということでカード型リンクは視認性と存在感が高く、読者にクリックしてもらいやすくなるので、関連記事のリンク設置に欠かせません。記事の質を上げるためにも使用することをおすすめします。

では実際に使い方を見ていきましょう!

 

2. AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】

AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】使い方はたったの2ステップです

使い方はたったの2ステップです

Step1. ブログカードにしたい記事のIDを調べる

Step2. 記事にブログカードのショートコードを挿入

では詳しく見てみましょう。

 

Step1. ブログカードにしたい記事のIDを調べる

ブログカードのショートコードを記事に挿入してみましょう。

まずブログカードにしたい記事のIDを調べます。

ワードプレス管理画面メニュー「投稿」→「投稿一覧」を開きます。過去に作成した記事には、それぞれIDが割り当てられています。

AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】_1

確認したIDを記事にブログカードとして挿入します。

 

Step2. 記事にブログカードのショートコードを挿入

ワードプレス投稿編集ページを開き、ブログカードを挿入したい場所をクリック。

ビジュアルエディタのボタン「カード」をクリック。

※投稿編集画面はプラグイン「Classic Editor」を使用したものです。

AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】_2

 

するとブログカードのショートコードが挿入されます。

AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】_3

 

ショートコードの「id」の項目に、最初に確認したブログカードにしたい記事のIDを入力します。

AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】_4

 

プレビューで記事を確認すると、ブログカードが挿入されています。

AFFINGER5の「ブログカード」使い方【関連記事リンクの見た目UP】_5

 

ブログカードの挿入は以上です。

30秒もかかりません。簡単ですね!
YOHEI

 

ブログカド機能は、簡単なうえリンク記事のクリック率を高めて読んでもらいやすくなるので記事作成にかかせません。とってもおすすめな機能です!

 

3.「ブログカード」のカスタマイズ方法

悩んでる方
ブログカードの挿入は2ステップだけですか?
ブログカードを挿入するのは2ステップだけど、ブログカードをカズタマイズすることができるよ。いくつか紹介するね。
YOHEI

 

ブログカードにラベルをつける

ブログカードのショートコード「label=“◯◯”」に文字を入力すると、ラベルが表示されます。

「ブログカード」のカスタマイズ方法_1

「ブログカード」のカスタマイズ方法_2

 

ラベルとラベルの文字色を変更する

ブログカードのショートコード「bgcolor=“◯◯”」にHTMLカラーコードを入力すると、ラベルの色を設定できます。

ブログカードのショートコード「color=“◯◯”」にHTMLカラーコードを入力すると、ラベルの文字色を設定できます。

「ブログカード」のカスタマイズ方法_3

 

ラベルの色を黒(#000000)にして、ラベルの文字色を白(#ffffff)にした場合。

「ブログカード」のカスタマイズ方法_4

「ブログカード」のカスタマイズ方法_5

 

HTMLカラーコードって何?って方は、こちらの記事(4. Webのカラー表記について)をご覧ください。

初心者向けカラーデザインの学習 #2【配色でおしゃれに見せるヒント】
初心者向けカラーデザインの学習 #2【配色でおしゃれに見せるヒント】

こんにちは、 氷河期世代クリエイターのYOHEIです。 今回も前回にひきつづき、初心者向けのカラーデザイン(配色)のお話です。 Part2ということで、カラーデザイン(配色)についての知識をさらに深堀 ...

続きを見る

 

ブログカードにタイトルつける

ブログカードのショートコード「name=“◯◯”」に文字を入力すると、ここに入力した文字がタイトルになります。入力していない場合はもともとの記事タイトルが表示されます。

「ブログカード」のカスタマイズ方法_6

「ブログカード」のカスタマイズ方法_7

 

「続きを見る」の表示 ・非表示

抜粋文の最後にもともと表示されている「続きを見る」の非表示にする設定は、ブログカードのショートコード「readmore=“on”」の項目を「readmore=“off”」にします。offにしたらこんな感じになります。

「ブログカード」のカスタマイズ方法_8

 

ブログカードの抜粋文の文字数設定

ワードプレス管理画面の左メニュー「AFFINGER5 管理」→「デザイン」の画面を開きます。

デザインの設定画面の「抜粋設定」に設定します。

「ブログカード」のカスタマイズ方法_9

 

設定項目の一番上の

「抜粋の文字数※デフォルトは100(ブログカード風ショートコード含む)」に表示させたい文字数を入力して「SAVE」ボタンをクリックします。

例えば5文字にしてみるとこんな感じになります。

「ブログカード」のカスタマイズ方法_10

「ブログカード」のカスタマイズ方法_11

 

「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックをいれると、抜粋が表示されなくなります。

「ブログカード」のカスタマイズ方法_12

「ブログカード」のカスタマイズ方法_13

※「続きを見る」は表示させています。

 

最後に、

PCでブログカードの抜粋文を表示させていても、スマホでの表示はもともとタイトルしか表示されず抜粋文は表示されていません。スマホでも抜粋文を表示させたい場合は、「スマホ(960px未満)閲覧時でも「ブログカード」の抜粋を表示する」にチェックをいれることでスマホにも抜粋文を表示させることができます。

「ブログカード」のカスタマイズ方法_14

 

カスタマイズは簡単なので、記事によって変えても良いと思います。

ただ「抜粋設定」は記事ごとではなく、サイト全てのカードに対して設定することになってしまいます。サイト全体のデザインのことも考えつつ設定しましょう。

 

4. まとめ:「ブログカード」機能を使うと、リンク記事のクリック率を高めて読んでもらいやすくなる!

今回はワードプレスブログテーマAFFINGER5の「ブログカード」機能を紹介させていただきました。

「ブログカード」機能を使うと視認性の高いリンクになるので、読者に関連記事をクリックしてもらいやすくなります。またSEO対策としても有効なので、使ったことがない方は試してみましょう!

今回の記事は以上です。

最後に今回の内容をおさらいしましょう!

まとめ

●「ブログカード」は、記事リンクの視認性を高め読者にクリックしてもらいやすくする機能!

● SEO対策としても有効なので、関連記事リンクに使用することをおすすめします!

●「ブログカード」機能の使い方は、2ステップで簡単!

Do it!  ではでは。

(・o・)/

 


《人気関連記事》初心者できた!ワードプレスブログ始め方Step9【アフィリエイト始め方編】

《人気関連記事》初心者できた!ワードプレスブログ始め方Step4【テーマインストール編】

《人気関連記事》初心者できた!ワードプレスブログ始め方Step1【すぐ開設!準備編】

-BLOG for BEGINNERS, SKILLS

Copyright© YOHEI LOG , 2021 All Rights Reserved.