ブログ運営・アフィリエイト

アフィンガー6でのブログカードの作り方・カスタマイズ方法を画像つきで解説

パンダ
アフィンガー6でブログカードはどうやって作るの?

自分流にブログカードのデザインをカスタマイズしたい!

そんな方向けの記事です。

リンクをカード風にして目立たせることができるブログカード。

多くのブログで使われていますが、この記事ではAFFINGER6(アフィンガー6)でのブログカードの作り方を画像つきで詳しく解説していきます。

ブログカードをカスタマイズする方法も合わせてご紹介するので、他とは違ったリンクの装飾をしたい!という方は最後まで読んで自身のブログに取り入れてみてくださいね。

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



こんな感じのブログカードを作る方法を解説します。

ブロックエディタの場合

アフィンガー ブロックエディタ

ブロックエディタでブログカードを作るには、表示したい箇所にURLを貼り付けるだけでOKです。

アフィンガー ブログカード

すると管理画面ではこんな風に表示され、

アフィンガー ブログカード

プレビューで見てみるとこんな感じ。

アフィンガー ブログカード キャプション

このままでもブログカードとして見栄えは悪くないかなと思うのですが、ラベルをつけたい場合は「キャプション」というところに任意の文字を入力すればOKです。

アフィンガー ブログカード ラベル

試しに「あわせて読みたい」と入力してプレビューしてみるとこんな感じ。

アフィンガー ブログカード ラベル

ラベルの色を変更したい場合は、「外観」→「カスタマイズ」→「オプション」→「ブログカード / ラベル」から変更できます。

アフィンガー ブログカード ラベルデザイン

ちなみに、本当はここからラベルのデザインもたすき掛けに変更できるはずなんですが、ブロックエディタでやるとなぜかリボンにしかできなかったので、ブログカードのラベルをたすき掛けにしたい人はクラシックエディタでやるのが良さそうです。

もし原因わかる方がいらっしゃったらコメント欄より教えていただけると助かります!
しょーた

クラシックエディタの場合

アフィンガー カード

クラシックエディタでブログカードを作る場合は、挿入したい場所でビジュアルエディタの「カード」をクリックします。

テキストエディタの場合は下記コードを挿入すればOKです。

「st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""」

コピーして貼り付ける場合は「」を[]に変換してください。

アフィンガー 記事ID

あとは上記コードの「id=""」のところにブログカードにしたい記事のIDを入力すればOK。

IDは投稿一覧から確認できます。

アフィンガー ブログカード

IDを入力してプレビューしてみるとこんな感じ。

これでも全然いいんですが、たすき掛けを追加したい場合は「label=""」のところに文字を入力すればOKです。

アフィンガー ブログカード たすき掛け

試しに「関連記事」と入力してみるとこんな感じ。

より目立つようになりましたね。

アフィンガー6でのカードスタイルの作り方


こんな感じのカードスタイルを作る方法を解説します。

ブロックエディタの場合

ブロックエディタでカードスタイルを作るのは難しそうだったので、この記事では割愛させていただきます。

  • コードエディターを使う
  • HTMLとして編集する

という手段でブロックエディタでもカードスタイルは作れるとは思いますが、その場合クラシックエディタでやる場合のコードを入力する形になるので、以下を参考にしてください。

クラシックエディタの場合

アフィンガー カード

クラシックエディタでブログカードを作る場合は、挿入したい場所でビジュアルエディタの「カード」をクリックします。

テキストエディタの場合は下記コードを挿入すればOKです。

<div class="st-cardstyle">
「st-card id=2 label="" name="" bgcolor="" color="" readmore="on"」
</div>

コピーして貼り付ける場合は「」を[]に変換してください。

アフィンガー カードスタイル

先ほど挿入したコードを選択した上で、「スタイル」→「レイアウト」→「カードスタイル」とクリックします。

アフィンガー カードスタイル

カードスタイルにしたい記事IDを入力すると、このように表示されます。

アフィンガー サムネイル画像設定

画像が粗い場合は、「AFFINGER管理」→「全体設定」→「サムネイル画像設定」から「フルサイズにする」にチェックを入れ、「サムネイルの形状・サイズ・角丸設定からブログカードを除外(※一部、カードURL含む)」のチェックをはずせば解消されるかと思います。

ブログカードのカスタマイズ手順

デフォルトのままでもけっこう見栄えはいいのですが、ブログカードをカスタマイズする方法について解説します。

ラベルの色・デザインを変更する

アフィンガー ブログカード / ラベル

「外観」→「カスタマイズ」→「オプション(その他)」→「ブログカード / ラベル」から、

  • 枠線の色と太さ
  • ラベルの背景色
  • ラベルテキストの色
  • ラベルのデザイン

を変更することができます。

コードの意味

ブログカードを表示するためのコードを変更することでもデザインをカスタマイズできます。

それぞれのコードの意味は以下の通り。

意味
label="" ラベルの文字
(例:label="関連記事")
pc_height="" パソコンで見た時のブログカードの高さ
(例:pc_height="200")
name="" タイトルの文字
(※ここを入力するとタイトルを変更可能)
bgcolor="" ラベルの背景色
(例:bgcolor="#1e73be")
color="" ラベルの文字色
(例:color="ffffff")
readmore="" onを削除すると「続きを見る」の表示が消える

画像のサイズ・デザインを変更する

アフィンガー サムネイル画像設定

ブログカードに表示されるサムネイル画像のサイズやデザインは「AFFINGER管理」→「全体設定」→「サムネイル画像設定」から変更することができます。

サムネイルの位置やデザインも変更できるので、自分好みにカスタマイズしてみてくださいね。

抜粋文の文字数を変更する

アフィンガー 抜粋設定

ブログカードに表示される抜粋文の文字数は「AFFINGER管理」→「全体設定」→「抜粋設定」から変更できます。

抜粋文を任意の文字数にしたい時は「抜粋の文字数」に数字を入力すればOK。

抜粋文を消したい場合は「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れればOKです。

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

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

ブログカードもテキストリンクもどちらも同じリンクなのですが、使い分けることが重要だと思っています。

ブログカードは目立つので、クリックしてほしい内部リンクに使うといいですね。

具体的には集客記事から成約記事への導線などでしょうか。
しょーた

逆に参考記事のリンクなど、便宜上載せているものなどはテキストリンクのほうが邪魔じゃなくていいです。

また、複数のリンクを貼る場合、ブログカードだと目立ちすぎるのでテキストリンクが適しているかなと思います。

外部リンクもブログカードにできる?

外部リンクもブログカードにできる?

アフィンガーの場合、基本的には内部リンクしかブログカードにすることができませんが、「Pz-LinkCard」というプラグインを使えば外部リンクでも近しいブログカードにすることができます。

ただ、外部リンクを貼る場合は基本的に、

  • 引用した記事
  • アフィリエイトリンク

のどちらかだと思うので、そこまで目立たせる必要はないかなと考えています。

アフィリエイトリンクの場合はクリックしてほしいので目立たせたいですが、であればボタンにしたほうがクリック率は上がるかなと思います。

ブログカードをうまく使って回遊率の高いブログに

ブログカードをうまく使って回遊率の高いブログに

ブログカードはパッと目を引きますし、内部リンクのクリック率を上げる装飾として有効です。

ただし、目立つのであまり使いすぎると鬱陶しいというデメリットもあります。

なので、テキストリンクとうまく使い分けて適度に使用するようにしましょう。

アフィンガーの場合は簡単にブログカードが作れ、カスタマイズもできるので、ブログカードをうまく使って回遊率の高いブログを作成してくださいね。

その他アフィンガーの機能紹介や特典つきのレビューをまとめた記事もあるので、購入を検討している方は合わせて読んでもらえると幸いです。

詳細記事
アフィンガー6
【豪華33特典付きレビュー】AFFINGER6の評判と使ってわかったメリット・デメリット

続きを見る

解説動画

動画でもブログカードの作り方を撮ったので、文章だとわかりづらいという方はぜひ参考にしてください。

初心者がゼロからブログで月5万円稼ぐためのメール講座

初心者がゼロからブログで月5万円稼ぐためのメール講座

初心者がゼロからブログで月5万円稼ぐまでの手順を全15回に分けて解説するメール講座です。

講座終了後もSEOに関するニュースや実際に効果が出た施策の共有など、ブログで成果を出すための最新情報を定期的に発信していきますので、ブログで稼ぎたい!という方はぜひご登録ください。

今なら期間限定で「稼げるジャンル100選&具体的な狙い方」をプレゼント。もちろん無料です!

\記事がよかったと思ったらぜひシェアをお願いします^^/

  • この記事を書いた人

しょーた

ブログの専門家/Webマーケター/SEOコンサルタント/Webディレクター

主にブログ・ディレクション・Webマーケティングを仕事にしているフリーランス。
個人事業主・法人向けのWeb制作、集客支援、オウンドメディア運用もやっています。ブログ歴8年。

このブログでは経済的・時間的・精神的に自由な生活を送るためのブログ運営方法について主に発信していきます。

>> 詳しいプロフィールはこちら