AFFINGER5

AFFINGER5(アフィンガー)でブログカードを作る方法【コツあり】

【解決】AFFINGER5(アフィンガー5)のプラグインは5つでOK(アフィンガー)でブログカードを作る方法【コツあり】

 

悩んでいる人
AFFINGER5(アフィンガー)でブログカードってどうすれば、作ることができますか?先日、アフィンガーを導入したばかりで、何もわからないので、教えてください。また、ブログカードを使うコツなどもあれば、知っておきたいです。

こんな疑問を解決します。

 

 記事の内容

・AFFINGER5(アフィンガー)でブログカードを作る方法
・【おまけ】アフィンガーでブログカードを工夫する方法
・AFFINGER5(アフィンガー)でブログカードを使うコツ

 

 記事の信頼性

カタクリのブログのプロフィール画像

カタクリ(@katakuri_29

この記事を書いている僕はブログ歴9ヶ月のブロガーです。現在は「AFFINGER5」を使用しておりまして、収益は5桁ほど稼いでいます。

 

ブログでは、記事から記事へジャンプをするときに、リンクと呼ばれる「橋」のようなものを使用します。

 

よく使用されるリンクは「テキストリンク」「ブログカード」の2種類ですね。

 

テキストリンクとブログカード

テキストリンクとブログカード

 

上記の画像のとおりでして、ブログカードを使うことで、読者を次の記事へと誘導することができます。

 

そこで本記事では、アフィンガーでブログカードを作る方法をご紹介します。

 

また、後半ではアフィンガーでブログカードを使うコツなどもお話ししているので、最後まで読んでみてください。

では、いきましょう(^з^)-☆




AFFINGER5(アフィンガー)でブログカードを作る方法

AFFINGER5(アフィンガー)でブログカードを作る方法

AFFINGER5(アフィンガー)でブログカードを作る方法

 

アフィンガーでブログカードを作る方法は、以下の3ステップです。

 

 アフィンガーでブログカードを作る方法

  1. コードを出す
  2. 記事IDを確認する
  3. 記事IDを入力する

 

では、順に説明していきます。

 

アフィンガーでブログカードを作る方法①:コードを出す

 

まずは、ブログカードに必要なコードを出していくステップです。

 

WordPressにログイン

WordPressにログイン

 

WordPressにログインして、「投稿」「新規追加」をクリックしてください。

 

コードを表示させる

コードを表示させる

 

次に、上の画像の赤枠で囲っている「カード」をクリックすると、ブログカードのコードが表示されます。

 

ブログカードのコード表示

ブログカードのコード表示

 

上の画像のようなブログカードのコードが表示されればOKです。

具体的なコードの説明は以下のとおり。

 

 コードの説明

  • st-card id:記事IDを入力する箇所。
  • label:入力するとラベルが表示される。
  • name:ブログカードのみタイトルを変更できる。
  • bgcolor:文字の色を変更できる。例)#000000など
  • color:背景の色を変更できる。例)#000000など
  • readmore:「続きを読む」の表示or非表示

 

上記のとおりでして、とくにブログカードのデザインなどに希望がなければ、デフォルトの状態のままでOKです。

 

アフィンガーでブログカードを作る方法②:記事IDを確認する

 

次は、ブログカードで表示させるために、記事IDを確認しましょう。

 

記事IDを確認

記事IDを確認

 

「投稿」画面へと移動すれば、「ID」の欄に記事IDが表示されていますので、ブログカードにしたい記事のIDを覚えるorメモをしておきましょう。

 

アフィンガーでブログカードを作る方法③:記事IDを入力する

 

最後は、先ほど出したコードに記事IDを入力するステップです。

 

記事IDを入力

記事IDを入力

 

上の画像のように、先ほど出したコードの「id=」の箇所に、ブログカードにしたい記事IDを入力しましょう。

記事IDが「1111」の場合のコードは以下のとおりです。

 

st-card myclass="" id=1111 label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on"

 

※コードばけしてしまうため、両サイドの[]は消しています。

 

あとは、プレビューなどを使って、しっかりとブログカードが作れているかどうかを確認すればOKです。

 

1度ブログカードを作れば、作り方は覚えられるかなと思います。
カタクリ

 

 ブログカードが表示されない場合

 

プレビューなどで確認しても、ブログカードが表示されない場合は、以下の3点を確認してみてください。

 

  • 記事IDが間違っていないか
  • ブログカード先の記事は公開されているか
  • 記事IDを入力する箇所を間違っていないか

 

多くの場合、上記の確認ミスでブログカードが表示されないので、1度確認してみてください。

 

【おまけ】アフィンガーでブログカードを工夫する方法

【おまけ】アフィンガーのブログカードを工夫する方法

【おまけ】アフィンガーでブログカードを工夫する方法

 

次に、おまけとして、アフィンガーでブログカードを工夫する方法を4つご紹介しておきます。

 

 アフィンガーでブログカードを工夫する方法

  1. ラベルをつける
  2. 文字数を変更する
  3. 「続きを見る」を消す
  4. ブログカードを横並びにする

 

ブログカードは、少しの工夫で読まれるor読まれないが決まるので、チェックしておきましょう。

 

その①:ラベルをつける

 

ブログカードにラベルをつけると、読者の目にとまりやすくなります。

ラベルをつけたブログカードは以下のとおり。

ブログカード(ラベルあり)

ブログカード(ラベルあり)

 

上記のように、アフィンガーでは、自分の好きな文字をラベルに入れることができます。

 

ブログカードにラベルを入れる方法は、簡単でして、先ほどのコードの「label=”好きな文字”」を入れるだけです。

 

「おすすめ」や「関連記事」「人気記事」などのラベルを入れると、読まれやすくなります。
カタクリ

 

その②:文字数を変更する

 

次は、アフィンガーのブログカードの文字数を変更する方法です。

 

ブログカードの文字数を変更

ブログカードの文字数を変更

 

「AFFINGER5管理」「デザイン」「抜粋設定」へと進んでください。

 

上の画像の赤枠で囲っている「抜粋の文字数」を変更すれば、ブログカードの文字数が変更されます。

 

ブログカードの文字数は、「多すぎず」「少なすぎず」がポイントです。
カタクリ

 

その③:「続きを見る」を消す

 

次は、ブログカードに書かれている「続きを見る」を消す方法です。

ちなみに「続きを見る」のありorなしのバージョンは以下のとおり。

 

「続きを見る」のあり/なし

「続きを見る」のあり/なし

 

上記のとおりですね。「続きを見る」がない方が、シンプルでスマートなブログカードになります。

 

ブログカードの「続きを見る」を消す方法は、先ほどのコードの「readmore=”on/off”」にするだけです。

 

「続きを見る」を消したい場合は、「off」を入力すればOKです。
カタクリ

 

その④:ブログカードを横並びにする

 

最後は、ブログカードを横並びにする方法です。

とりあえず、完成図を先にお見せしておきますね。

ブログカード:横並び

ブログカード:横並び

 

では、ブログカードを横並びにする方法をご紹介していきます。

 

少し手間がかかってしまう作業なので、じっくりと読んでみてください。
カタクリ

 

レイアウトを変更

レイアウトを変更

 

投稿画面へと移動し、「タグ」「レイアウト」「全サイズ」「左右50%」を選択しましょう。

 

レイアウトが変更される

レイアウトが変更される

 

上の画像のように「黄色の枠」「青色の枠」が表示されたら、準備OKです。

 

2箇所にブログカードを作成する

2箇所にブログカードを作成する

 

あとは、先ほどと同様に「黄色の枠」と「青色の枠」それぞれの箇所に、先ほどご紹介した方法で、ブログカードを作ってみてください。

 

ブログカードが作れたら、「このテキストは最後に消して下さい。」を消せば完成です。

 

手間がかかる作業ですが、覚えると、すぐにできるようになります。
カタクリ

 

AFFINGER5(アフィンガー)でブログカードを使うコツ

AFFINGER5(アフィンガー)でブログカードを使うコツ

AFFINGER5(アフィンガー)でブログカードを使うコツ

 

最後に、アフィンガーでブログカードを使うコツを3つご紹介します。

 

 アフィンガーでブログカードを使うコツ

  1. 記事が終わるとき
  2. 次の見出しに入るとき
  3. 記事の情報をプラスアルファしたいとき

 

では、順に説明していきます。

 

コツ①:記事が終わるとき

 

記事が終わるときに、ブログカードを入れておくと、読者がそのまま次の記事へと進んでくれる可能性が高まります。

具体例を出すなら、以下のとおり。

 

記事の終わりにブログカードを設置

記事の終わりにブログカードを設置

 

上記の記事は「アフィリエイトに向いている人」といった内容の記事でして、記事の終わりに「アフィリエイトの始め方」のブログカードを設置しています。

 

このように、記事を1つ読むだけではなく、いかに読者を次の記事へブログカードを使って誘導するかが重要です。

 

コツ②:次の見出しに入るとき

 

次の見出しで話の内容が変わるときには、ブログカードが有効です。

 

なぜなら、多くの読者は見出しごとでブログを読んでいるためです。

 

つまり、見出しを1つ読んで離脱してしまう読者もいるわけなので、離脱防止のため、ブログカードを挟んでおくことも1つのコツです。

 

コツ③:記事の情報をプラスアルファしたいとき

 

基本的に記事に掲載できる情報の量には、限度がありますよね。

しかし、無理やり多くの情報を1つの記事に掲載してしまうと、読者が離脱してしまう1つの原因につながります。

 

そのようなときに、ブログカードで他の記事と連携すれば、しっかりと読者に情報を提供できます。

 

【最強】テキストリンクとブログカードの二刀流

 

結論として、テキストリンクとブログカードの二刀流は最強です。

 

イメージとしては、以下の画像のとおりです。

 

テキストリンクとブログカードの二刀流

テキストリンクとブログカードの二刀流

 

上記のように、テキストリンクとブログカードを二刀流で使えば、テキストリンクをクリックし忘れた読者を、再度ブログカードへと誘導することができます。

 

結果、読者のアクセスのとりこぼしを防げるというわけです。

 

まとめ:アフィンガーのブログカードを有効活用しよう!

まとめ:アフィンガーのブログカードを有効活用しよう!

まとめ:アフィンガーのブログカードを有効活用しよう!

 

今回は、アフィンガーでブログカードを作る方法をご紹介しました。

 

結論として、アフィンガーでブログカードを使えば、読者の回遊率が上昇するため、自然とアクセスと収益が増えます。

 

そのため、まだブログカードを使っていないのであれば、アクセスや収益が数倍になる可能性もあるので、有効活用していきましょう。

今回は以上です。



-AFFINGER5
-

Copyright © Katakuri Blog , All Rights Reserved.