AFFINGER

【AFFINGER6】ブログカード・ラベルの作成方法を紹介【簡単カスタマイズ】

困ってる人
●AFFINGER5でのブログカード作成方法がわからない。。

●ブログカードをおしゃれにカスタマイズするにはどうすればいいんだろう。。

 

今回はこんなお悩みに答えていきます。

 

こんな方におすすめ

  • AFFINGER初心者
  • AFFINGERでブログカードを使って内部リンクを作成したい方
  • ブログカードのおしゃれなカスタマイズ方法について知りたい方

 

本記事の信頼性

当ブログはAFFINGER6を使用しています。ブログカードの設定方法について詳しくご紹介できます。

 

ブログを始めて記事を書いているけど、内部リンクのカード化のやり方がわからない、そんな風に僕自身も最初は思っていました。

 

しかしAFFINGERでブログカードを作成するのは超簡単です。

 

関連記事
AFFINGER6（アフィンガー6）流れるインフォメーションバーの作成方法

続きを見る

 

上記のようなブログカードが簡単に作成できますよ。

 

今回はそんなWordPressブログ初心者の方でも簡単にできる、AFFINGERブログカードの作成方法とラベルの表示方法について画像を使って紹介します。

 

本記事を読めば、AFFINGERのブログカード・ラベルの作成方法が簡単にわかると思うのでぜひ参考にしてみて下さい。

 

ちなみに、AFFINGER6について詳しく知らない、評判を知りたいという方はAFFINGER6の評判・メリットデメリットを徹底解説【実際に使った感想をレビュー】を参考にしてみて下さい。当ブログの限定特典もあるので、まだ入手してない方は、お得にゲットしてみてください。

 

それでは早速始めていきます。

 

 

AFFINGER6のブログカードとは？

AFFINGER5のブログカードとは？

AFFINGER5のブログカードとは？

 

困ってる人
ブログカードがそもそもあまりわかっていません。

 

ブログカードとは別記事へのリンクをカード型で表示することでして、アイキャッチ画像や記事タイトルなどをまとめて表示する埋め込み型の形式のことです。

 

先ほどもご紹介したように以下のようなリンクがブログカードになります。

 

関連記事
AFFINGER6の購入方法とインストールの手順を徹底解説【画像付き】

続きを見る

 

上記のような感じですね。

 

ブログカードを使えば、クリック率が上がったり、見栄えが良くなったりなどのメリットがあります。

 

AFFINGER6ではブログカードの設定が1分もあれば超簡単にできます。

 

ちなみにAFFINGER5だけではなく、他のWordPressテーマでもブログカードは設定可能ですよ。

>>【2022年】WordPressブログのおすすめテーマ11選を徹底比較

 

AFFINGER6でブログカードを作成する方法

AFFINGER6でブログカードを作成する方法

AFFINGER6でブログカードを作成する方法

 

それではAFFINGER6のブログカード作成方法についてご紹介します。

 

手順は下記2つだけ。

 

AFFINGER6 ブログカード作成手順2つ

①投稿画面の『カード』をクリックする

②記事のID番号を入力する

 

順番に見ていきましょう。

 

手順①：投稿画面の『カード』をクリックする

 

まず投稿の『ビジュアルエディター』内でカードをクリックします。

AFFINGER投稿画面のカードをクリック

AFFINGER投稿画面のカードをクリック

 

以下のような文言が表示されます。

 

ブログカードのコード

 

ここまでくればほぼ完了です。

 

手順②：記事のID番号を入力する

 

後はid="○○"の部分に記事のIDを入力すれば、リンクしたい記事のカード表示ができます。

 

AFFINGER6記事ID調査方法

 

idの調べ方は、投稿一覧をクリックします。

投稿一覧をクリック

 

投稿記事ごとにIDが振り当てられているので、その数字を入力します。

 

AFFINGER5 記事IDをブログカードに入力する

AFFINGER5 記事IDをブログカードに入力する

 

ちなみにこのIDは記事公開後自動で割り振られます。

 

これでブログカードの作成は完了です。以下のように表示できました。

 

AFFINGER6でGoogleアドセンス審査用コードを貼り付ける手順を解説【3分でOK】

続きを見る

 

【AFFINGER6】ブログカードの調整方法【見た目を変える】

【AFFINGER6】ブログカードの調整方法【見た目を変える】

【AFFINGER6】ブログカードの調整方法【見た目を変える】

 

ブログカードの作成はできた思うので、次に見え方を良い感じにしていきましょう。

 

その①：ブログカード内のコードを変更する

 

先ほどカードで入力したコードは自由にカスタマイズできます。

 

ブログカードの各コード部分をいじれば、カードの表示を変更することも可能です。

 

ブログカードのコード

 

各コードの見方

st-card id=：表示したい記事の投稿IDを入力
label=""：文字を入力するとラベルと文字を表示できます。
name=""：表示する記事タイトル変更できます。
bgcolor=""：文字色を変更出来ます。（カラーコード）
color=""：背景色を変更することが出来ます。（カラーコード）
readmore="on"：『続きを読む』の表示・非表示
thumbnail="on"：『サムネイル』の表示・非表示
type=""：このままの設定でOK

 

上記のように以上をブログカードを自由に調整できます。

 

その②：ブログカードのラベルを変更する

 

ラベルとはブログカードの左上にたすき掛けがかかるような表示です。

 

上のコードの中に文字を入力すると以下のような表示になります。

合わせて読みたい
AFFINGER6で吹き出しの作成方法を解説【右側から表示する方法もあり】

続きを見る

 

ラベルの文字色を変更したい場合は、外観⇒カスタマイズをクリックします。

 

外観⇒カスタマイズ

 

カスタマイズ内の+オプショナルカラーをクリックしてブログカード／ラベルをクリックしてください。

ブログカードの/ラベルをクリック

 

するとラベルの背景色や文字色を変更できるので、お好みにカスタマイズしましょう。

 

ブログカードの色をカスタマイズする

 

ラベルを用いることでブログカードをより目立たせ、おしゃれにもできるので活用してみてください。

 

その他AFFINGER6では様々なカスタマイズができるので、他にも自由に設定してみてください。

>>AFFINGER6のカスタマイズ方法まとめ【目的別にデザインを設定しよう】

 



【AFFINGER6】ブログカードで外部リンクを作成する方法2つ

【AFFINGER6】ブログカードで外部リンクを作成する方法2つ

【AFFINGER6】ブログカードで外部リンクを作成する方法2つ

 

ここまでブログカード作成の方法について紹介してきましたが、AFFINGER6で作成できるのは、内部リンクのみです。

 

外部リンクをブログカード化するには以下2つのどちらかの手順になります。

 

外部リンクでブログカードを使う方法2つ

  • ①AFFINGER公式プラグインを導入する（税込3,800円）
  • ②無料プラグイン「Pz-LinkCard」を導入する

 

それぞれ紹介します。

 

その①：AFFINGER公式プラグインを実装する

 

AFFINGER公式サイトより外部リンクをブログカード化するプラグインが有料で販売されています。

>>AFFINGER6の公式プラグインをチェックする。

 

使い方はプラグインをインストール有効化した後、投稿画面に新しく出現するカードURLというボタンをクリックし、ショートコードの中にURLを入力するだけ。

 

しかしこのプラグインは有料でして、購入に3800円(税込み)かかります。

 

ぶっちゃけ個人的にはプラグインのブログカード化だけで4000円近くの値段を払うのはちょっとどうかな・・とも思います。。なので次に紹介する無料プラグインでも十分だと思いますよ。

 

その②：無料プラグイン「Pz-LinkCard」を実装する

 

2つ目は無料プラグイン『Pz-LinkCard』を実装することです。

 

Pz-LinkCardも実装手順としてはプラグインをインストール有効化した後にカードURLというボタンが出現するのでそれをクリックして使用します。

 

有料プラグインに比べてラベル設定をすることはできませんが、無料でも十分な機能性はあります。

 

外部リンクはテキストリンクでも問題ないと思います。しかしブログカード化したい人は、無料プラグインから使用してみましょう。

>>AFFINGER6に必須のおすすめプラグイン10個・不要プラグイン3個を徹底解説

 

【AFFINGER6】ブログカードの効果的な活用方法3つ

【AFFINGER6】ブログカードの効果的な活用方法3つ

【AFFINGER6】ブログカードの効果的な活用方法3つ

 

ブログカードの作成方法とカスタマイズ方法について紹介しましたが、効果的な活用方法について解説します。

 

ブログカードを使う目的としては、見栄えをよくすることもありますが一番はクリック率を上げることです。

 

なのでブログカードを用いてクリック率を上げるためにはどうするのが効果的かご紹介します。

 

ブログカードの効果的な活用方法3つ

  • ①ブログカードを使いすぎない（テキストリンクを用いる）
  • ②アイキャッチ画像で目立たせる
  • ③ラベルを活用する

 

それぞれ解説します。

 

活用方法①：ブログカードを使いすぎない（テキストリンクを用いる）

 

ブログカードは内部リンクについつい使ってしまいがちですが、多用しすぎるのはやめましょう。

 

注意

ブログカードを貼りすぎて読み手が読みづらく感じてしまうと、本来知りたい情報を知る前に離脱してしまう可能性もあります。

 

ブログカードを用いる際は連続して使いすぎない、またテキストリンクを使うようにしましょう。またテキストリンクとブログカードを併用して使うことも効果的ですよ。

 

詳細については以下でも解説しています。

>>アフィリエイトリンクはボタン・テキスト・ バナー広告どれが一番売れる？おすすめを解説

 

使い方②：アイキャッチ画像で目立たせる

 

おしゃれなアイキャッチ画像はついついクリック率したくなるという方も多いです。

 

記事作成に余力ができたきたらアイキャッチ画像を自作したりするのもおすすめ。

 

アイキャッチ画像はCanvaを用いればおしゃれに加工も可能です。

 

当サイトはアイキャッチ画像の作成はほぼしてませんが、代わりに有料画像を用いています。質の高い画像がすぐに見つかるので、おすすめですよ。

 

なお、ブログで使える有料画像サイトについては、【2022年版】ブログ運営で有料画像を使うべき理由6つ＆おすすめの有料画像サイト3選を参考にしてみて下さい。

 

有料画像はちょっと、、という方は無料画像でも十分使えるサイトがあります。

関連記事
ブログに使える無料画像・フリー素材サイトおすすめ30選【商用利用OK】

続きを見る

 

使い方③：ラベル＆リボンを活用する

 

ブログカードに装飾があるのとないのではやはりある方がおしゃれに見えますよね。

 

ちょっとした部分ですが、『神は細部に宿る』とも言われるので細かい部分が案外重要になったりします。

 

細かい部分にこだわってみるのも記事作成においては大切ですね。

 

【Q&A】AFFINGER6でブログカードを使用する際の疑問＆悩みについてお答えします

【Q&A】AFFINGER6でブログカードを使用する際の疑問＆悩みについてお答えします

【Q&A】AFFINGER6でブログカードを使用する際の疑問＆悩みについてお答えします

 

最後にブログカードに関する疑問＆悩みについてお答えします。

 

ブログカードは記事のどの場所に貼ればいいの？

 

結論、ブログカードを貼る個所は下記3つがおすすめ。

  • 記事の最後
  • 見出しの前
  • 関連情報を補足する箇所

上記のような感じですね。読者の箸休めのポイントや必要な情報を補足するときに入れるのが効果的です。

 

テキストリンクとブログカードどっちがいいの？

 

結論、どちらも使うべきというのが答えです。

 

なぜなら、それぞれのリンク種類でメリットがあるから。

 

テキストリンクのメリット

  • クリックの押し付け感がない
  • 記事内容からリンクまでスラスラ読める
  • リンクの場所を取らない

 

ブログカードのメリット

  • 読者の目に留まりやすく目立つ
  • リンクのクリックがしやすい

1つ注意しておきたいのがどちらも使いすぎは避けた方がいいということ。

 

テキストリンク、ブログカード両方使ってリンクを作成してみましょう。

 

まとめ：AFFINGER6でブログカードを活用してクリック率を上げよう！

まとめ：AFFINGER6でブログカードを活用してクリック率を上げよう！

まとめ：AFFINGER6でブログカードを活用してクリック率を上げよう！

 

今回はAFFINGER6のブログカード・ラベルの作成方法＆カスタマイズ方法について紹介しました。

 

AFFINGER6では簡単にブログカード化ができるのでぜひ使用してみて下さい。

 

本記事が参考になれば幸いです。最後まで読んで頂きありがとうございました。

 

それでは本日はこの辺りで！

 

関連記事AFFINGER6（アフィンガー6）の購入手順と初期設定方法を解説【全手順画像付き】

 

関連記事【AFFINGER PACK3】AFFINGER6 EX版を徹底レビュー【感想を公開】

 

-AFFINGER