・ブログカードのカスタマイズ方法が知りたい
このような疑問にお応えします。
アフィンガー5（AFFINGER5）では、標準機能としてブログカードが利用可能。
ブログカードは、主に内部リンクを貼るときに使用して回遊率を高め、多くの記事を読んでもらうことができます。
本記事では、ブログカードの基本的な使い方、カスタマイズ方法、お役立ち情報などを詳しく解説していきます！
ぜひ最後までご覧下さい！
本記事の内容
- ブログカードの使い方、カスタマイズ方法
- ブログカードの使いどころ
- 外部リンクもブログカードで設置可能
本記事を書いた人
アフィンガー5のカスタマイズ関連記事
続きを見る
【AFFINGER5】アフィンガー5でスライドショーを自由自在に設定する方法
続きを見る
【1分で完了】アフィンガー5でファビコンを設定する方法
続きを見る
アフィンガー5のプロフィールカード設定方法【人気ブログを集計！】
目次
アフィンガー5 ブログカードの作り方
ブログカードの作り方は非常に簡単です。
流れは以下の通り。
- 投稿画面でカードをクリック
- 必要項目を入力
詳しく解説していきますね！
アフィンガー5 ブログカードの作り方
①投稿画面でカードをクリック
投稿画面→カードをクリック
以下のようなショートコードが表示されますので、必要な項目を入力していきます。
事前準備
内部リンクで繋ぎたい記事のIDが必要となります。
記事のIDは以下のように、投稿画面から確認可能。
先にメモしておくと、スムーズにブログカードが作れますよ！
アフィンガー5 ブログカードの作り方
②必要項目を入力
上記のショートコードに必要事項を記入していきます。
- id:先ほど調べた内部リンクで繋げたい記事id
- label:ブログカードに付けられるラベルの文字
- name:記事タイトル変更可能
- bgcolor:背景色を指定
- color:文字色を指定
- read more:offにすると「続きを読む」を非表示に
ちなみにlabelですが、文字数が5文字ぐらいだと綺麗表示されます。
続きを見る【AFFINGER5】アフィンガー5でスライドショーを自由自在に設定する方法
8文字を超えると、ラベルからはみ出し、見栄えが悪くなりますね。
続きを見る【AFFINGER5】アフィンガー5でスライドショーを自由自在に設定する方法
アフィンガー5 ブログカード
カスタマイズ方法
アフィンガー5ではブログカードのカスタマイズが簡単にできます。
具体的には、以下の項目のカスタマイズが可能です。
- サムネイルの表示
- 抜粋の表示
- ラベルデザイン
ちなみに以下の項目のことです。
ブログカードカスタマイズ方法
①サムネイルの表示
AFFINGER5管理→デザイン→サムネイル画像設定
下記の項目がカスタマイズできます。
- サムネイルデザイン
- サムネイルを角丸に
- サムネイルを右側に
- サムネイルをポラロイド風に
- サムネイルを大きく
- サムネイル画像サイズ・角丸設定からブログカード（カードURL含む）を除外
- サムネイル画像を表示しない
サムネイルデザイン：フルサイズ
サムネイルを角丸に
サムネイル画像を大きくする
ブログカードカスタマイズ方法
②抜粋の表示
AFFINGER5管理→デザイン→抜粋設定
下記の項目がカスタマイズできます。
- 抜粋の文字数
- PC閲覧時も「最新の投稿一覧」ウィジェット及びサイドバーの記事一覧の抜粋を表示する
- PC閲覧時も記事一覧（トップ・アーカイブ・関連記事）の抜粋を非表示にする
- PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする
- スマホ（960px未満）閲覧時でも「記事一覧・カテゴリ一覧」の抜粋を表示する
- スマホ（960px未満）閲覧時でも「ブログカード」の抜粋を表示する
抜粋はブログ本文冒頭の文字が表示されていきます。
ブログカードカスタマイズ方法
③ラベルデザイン
カスタマイズ→オプションカラー→ブログカード/ラベル
- ラベル背景色
- ラベル文字色（EXのみ）
- ラベルデザイン（リボン/デフォルト）
上記の項目がカスタマイズできます。
ちなみにラベルをリボンにするとこんな感じ。
アフィンガー5 ブログカードの使いどころ
ここまで、ブログカードの基本的な使い方、カスタマイズ方法について解説してきました。
ここからは、どのような場面でブログカードを設置するのが効果的なのかを深堀していいきます。
ブログカードの効果的な使い方は以下の通り。
- 読者が知りたい情報があるとき
- 補足的な情報を付けたしたいとき
- 記事の最後
例えば、
セールスライティングには「人を操る禁断の文章術」が人気
↓
この本はどんな中身だろう
↓
書評記事への内部リンク
といった感じです。
また、記事の最後に関連記事を置いておくことで、読者が抱く疑問に先回りが可能です。
その結果、回遊率が向上してSEOでも良い評価が得られます。
アフィンガー5 ブログカードの使い方（外部リンク）
ここまで、内部リンクとしてのブログカードの使い方を解説してきました。
実は、アフィンガー5では外部リンクもブログカードで表示させることが可能です。
方法は以下の通り。
- 有料プラグインを導入する
- 無料で導入する
- リスト
ブログカードで外部リンク
①有料プラグインを導入する
アフィンガー5では、外部リンクをブログカードで表示させるためのプラグインが販売されています。
公式HPから購入可能となっています。
| 名称 | 価格 |
| ブログカード外部URL対応プラグイン | 3,800円（税込） |
有料プラグインを利用すると、以下のようなブログカードが作成可能です。
標準搭載のブログカードと同じく、デザインカスタマイズが可能です。
- ラベル
- 続きを読む
ぶっちゃけ機能はこれだけなので、こだわりがなければ以下の無料プラグインや無料URL等を使った方がいいです。
ブログカードで外部リンク
②無料で導入する
有料のブログカード外部URL対応プラグインでなくても、外部リンクのブログカード表示は可能です。
方法は以下の２つ。
- Embed Code Generator
- Pz-LinkCard
1つずつ解説していきますね！
ブログカードで外部リンク（無料）
Embed Code Generator
Embed Code Generatorは、リンクしたい外部のURLを貼り付けるだけでブログカード風にしてくれます。
①URL入力
②コードコピー
③投稿画面のテキストにコピー
実際のイメージはこんな感じ
ねこたろすブログ
現代サラリーマンらしく副業始めました
横幅も指定できるので、好みに合わせて調節してみてください！
ブログカードで外部リンク
②Pz-LinkCard
Pz-LinkCardは無料のプラグインで、簡単に外部リンクがブログカードで設置できます。
使い方は以下の通りです。
Pz-LinkCardをインストール
投稿画面でアイコンクリック
リンクしたいURL入力
完成イメージはこんな感じ。
ポイント
Pz-LinkCardはプラグインです。
プラグインを最小限にしたい方は、Embed Code Generatorがおすすめ。
まとめ：アフィンガー5のブログカードでSEO対策
本記事の内容をまとめます。
ブログカードの作り方
- カードをクリック
- 必要項目を入力
ブログカードのカスタマイズ
- サムネイル
- 抜粋 等
ブログカードの使いどころ
- 読者が知りたい情報があるとき
- 補足的な情報を付けたしたいとき
- 記事の最後
アフィンガー5は、標準機能としてブログカードが利用可能です。
ブログカードは上記のように内部リンク・外部リンクに活用でき、回遊率を高めSEOでも高評価を得ることができます。
また、カスタマイズ項目も豊富で自分好みに設定できるのも、嬉しいですよね。
本記事が少しでも参考になれば幸いです。
それでは！
アフィンガー5カスタマイズ関連記事
続きを見る
AFFINGER5（アフィンガー5）の吹き出し設定とカスタマイズが分かる
続きを見る
【簡単】アフィンガー5のデザイン済みデータでおしゃれなブログにする方法
