デザイン/カスタマイズ

アフィンガー5のブログカードで簡単に内部/外部リンクを作る

2020年9月3日

アフィンガー5 ブログカード 作り方
この記事は3分で読めます

 

サラリーマン
・アフィンガー5のブログカードの使い所がわからない

・ブログカードのカスタマイズ方法が知りたい

 

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

 

アフィンガー5(AFFINGER5)では、標準機能としてブログカードが利用可能。

 

ブログカードは、主に内部リンクを貼るときに使用して回遊率を高め、多くの記事を読んでもらうことができます。

 

本記事では、ブログカードの基本的な使い方、カスタマイズ方法、お役立ち情報などを詳しく解説していきます!

 

ぜひ最後までご覧下さい!

 

本記事の内容

  • ブログカードの使い方、カスタマイズ方法
  • ブログカードの使いどころ
  • 外部リンクもブログカードで設置可能

 

 

本記事を書いた人

ねこたろす
アフィンガー5を利用して約4ヶ月。アフィンガーの利用方法やカスタマイズに関する記事を10記事以上書いています。

 

 

アフィンガー5のカスタマイズ関連記事

 

アフィンガー5 ブログカードの作り方

アフィンガー5 ブログカード 作り方

 

ブログカードの作り方は非常に簡単です。

 

流れは以下の通り。

  1. 投稿画面でカードをクリック
  2. 必要項目を入力

 

ねこたろす
アフィンガー5では、標準機能としてブログカードが簡単に作成可能!

 

詳しく解説していきますね!

 

アフィンガー5 ブログカードの作り方
①投稿画面でカードをクリック

 

投稿画面→カードをクリック

アフィンガー5 ブログカード 作り方①

 

以下のようなショートコードが表示されますので、必要な項目を入力していきます。

アフィンガー5 ブログカード 作り方②

 

事前準備

内部リンクで繋ぎたい記事のIDが必要となります。
記事のIDは以下のように、投稿画面から確認可能。
先にメモしておくと、スムーズにブログカードが作れますよ!

アフィンガー5 ブログカード 作り方③

 

アフィンガー5 ブログカードの作り方
②必要項目を入力

アフィンガー5 ブログカード 作り方②

 

上記のショートコードに必要事項を記入していきます。

  • id:先ほど調べた内部リンクで繋げたい記事id
  • label:ブログカードに付けられるラベルの文字
  • name:記事タイトル変更可能
  • bgcolor:背景色を指定
  • color:文字色を指定
  • read more:offにすると「続きを読む」を非表示に

 

ちなみにlabelですが、文字数が5文字ぐらいだと綺麗表示されます。

 

8文字を超えると、ラベルからはみ出し、見栄えが悪くなりますね。

 

 

アフィンガー5 ブログカード
カスタマイズ方法

アフィンガー ブログカード カスタマイズ方法

 

アフィンガー5ではブログカードのカスタマイズが簡単にできます。

 

具体的には、以下の項目のカスタマイズが可能です。

  1. サムネイルの表示
  2. 抜粋の表示
  3. ラベルデザイン

 

ちなみに以下の項目のことです。

アフィンガー5 ブログカード 作り方④

 

ねこたろす
詳しく解説していきますね!

 

ブログカードカスタマイズ方法
①サムネイルの表示

 

AFFINGER5管理→デザイン→サムネイル画像設定

アフィンガー5 ブログカード 作り方⑤

 

下記の項目がカスタマイズできます。

  • サムネイルデザイン
  • サムネイルを角丸に
  • サムネイルを右側に
  • サムネイルをポラロイド風に
  • サムネイルを大きく
  • サムネイル画像サイズ・角丸設定からブログカード(カードURL含む)を除外
  • サムネイル画像を表示しない

 

サムネイルデザイン:フルサイズ

アフィンガー5 ブログカード 作り方⑥

 

サムネイルを角丸に
サムネイル画像を大きくする

アフィンガー5 ブログカード 作り方⑦

 

ねこたろす
好みのデザインにカスタマイズしてみて下さいね!

 

ブログカードカスタマイズ方法
②抜粋の表示

 

AFFINGER5管理→デザイン→抜粋設定

アフィンガー5 ブログカード 作り方⑧

 

下記の項目がカスタマイズできます。

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

 

抜粋はブログ本文冒頭の文字が表示されていきます。

 

ねこたろす
個人的には、抜粋無しの方がすっきりしていて好みのデザイン!

 

ブログカードカスタマイズ方法
③ラベルデザイン

 

カスタマイズ→オプションカラー→ブログカード/ラベル

アフィンガー5 ブログカード 作り方⑨

 

  • ラベル背景色
  • ラベル文字色(EXのみ)
  • ラベルデザイン(リボン/デフォルト)

 

上記の項目がカスタマイズできます。

 

ちなみにラベルをリボンにするとこんな感じ。

アフィンガー ブログカード 作り方

 

ねこたろす
デフォルトのたすき掛けだと文字数を気にしないといけないから、リボンは使いやすい!

 

 

アフィンガー5 ブログカードの使いどころ

アフィンガー ブログカード 使いどころ

 

ここまで、ブログカードの基本的な使い方、カスタマイズ方法について解説してきました。

 

ここからは、どのような場面でブログカードを設置するのが効果的なのかを深堀していいきます。

 

ブログカードの効果的な使い方は以下の通り。

  • 読者が知りたい情報があるとき
  • 補足的な情報を付けたしたいとき
  • 記事の最後

 

例えば、

セールスライティングには「人を操る禁断の文章術」が人気

この本はどんな中身だろう

書評記事への内部リンク

といった感じです。

 

また、記事の最後に関連記事を置いておくことで、読者が抱く疑問に先回りが可能です。

 

その結果、回遊率が向上してSEOでも良い評価が得られます。

 

アフィンガー5 ブログカードの使い方(外部リンク)

アフィンガー ブログカード 作り方  外部リンク

 

ここまで、内部リンクとしてのブログカードの使い方を解説してきました。

 

実は、アフィンガー5では外部リンクもブログカードで表示させることが可能です。

 

方法は以下の通り。

  1. 有料プラグインを導入する
  2. 無料で導入する
  3. リスト

 

ねこたろす
詳細を説明していきます!

 

 

ブログカードで外部リンク
①有料プラグインを導入する

 

アフィンガー5では、外部リンクをブログカードで表示させるためのプラグインが販売されています。

 

公式HPから購入可能となっています。

 

名称価格
ブログカード外部URL対応プラグイン3,800円(税込)

 

有料プラグインを利用すると、以下のようなブログカードが作成可能です。

アフィンガー ブログカード 外部リンク①

 

標準搭載のブログカードと同じく、デザインカスタマイズが可能です。

  • ラベル
  • 続きを読む

 

ねこたろす
ちなみに「続きを読む」は好きな文字に変更できます!

 

ぶっちゃけ機能はこれだけなので、こだわりがなければ以下の無料プラグインや無料URL等を使った方がいいです。

 

ブログカードで外部リンク
②無料で導入する

 

有料のブログカード外部URL対応プラグインでなくても、外部リンクのブログカード表示は可能です。

 

方法は以下の2つ。

 

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カスタマイズ関連記事

 

ブログランキング参加中!クリックお願いします!

ブログランキング・にほんブログ村へ 

-デザイン/カスタマイズ