アフィリエイト広告を利用しています。

WordPress講座

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

AFFINGER6(アフィンガー6)でブログカードを作成する方法を紹介します。

  • AFFINGER6 でブログカードを使いたい
  • ブログカードのカスタマイズ方法を知りたい
  • ブログカードとテキストリンク、どちらを使うべきか

上記のような悩みを持つ方に向けて、実際に AFFINGER6 を使っている管理人が解説します。

\ 本気でブログ収益化できるテーマ! /

AFFINGER6

※限定特典が欲しい方は、特典付き購入ページ へ。

タカさん
記事を書いている管理人( @takafumi_net )の経歴は、以下の通りです。
  • WordPress歴、10年以上
  • 基本情報技術者資格所有者(ソフト開発の国家資格)
  • パソコン販売歴、約5年

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

AFFINGER6(アフィンガー6)は、ブログカードを作成する機能が搭載されています。

使い方は、簡単でショートコードを挿入するだけです。

タカさん
AFFINGER6 は、ブロックエディタ対応テーマです。

ブロックエディタ、クラシックエディタ、どちらも使い方は変わりません。

おそらく、現状では、ブロックエディタを使っているユーザーの方が多いはず。

コードが苦手な人はクラシックエディタを使っていないと思います。

したがって、今回は、ブロックエディタを使って、ブログカードを作成する手順を解説します。

クラシックエディタを使っている方も同じ手順で作成できるので、参考にしていただければ幸いです。

手順としては、以下の通りです。

  • リンク先の 記事ID を調べる
  • ブログカードのショートコードを挿入する

それぞれ解説します。

リンク先の 記事ID を調べる

リンク先の 記事ID は、WordPress の投稿一覧画面に表示されています。

タカさん
以下の ID という項目を確認します。

記事 ID

記事ID を確認したら、実際にブログカードのショートコードを挿入していきます。

ブログカードのショートコードを挿入する

タカさん
ブロックエディタを使って、説明します。

投稿画面 で以下をクリックします。

ブロック挿入ツール → クラシック

ブログカードのショートコードを挿入する

※ ブロックエディタ使用時の画像

ここから、カード をクリックすると、ブログカードを表示するためのショートコードが挿入されます。

ブログカードのショートコードを挿入する

※ ブロックエディタ使用時の画像

あとは、先程確認した 記事IDid="" のところに入力するだけです。

ブログカードのカスタマイズ方法

ブログカードのカスタマイズ方法を紹介します。

  • ブログカードごとのカスタマイズ
  • 全ブログカードのカスタマイズ

それぞれ解説します。

ブログカードごとのカスタマイズ

タカさん
ショートコードは、以下のようになっています。

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

記事ID を設定するだけでブログカードは表示されます。

しかし、以下の属性の値を変更することでカスタム可能です。

属性説明
id記事 ID
labelラベルを設定することができる(テキスト)
nameブログカードのタイトル(テキスト)
bgcolorラベルの背景色
colorラベルの文字色
webiconラベルの先頭にアイコンを指定することができる
readmoreon で 続きを見る を表示、 off で非表示
typetext を指定すると、たすき掛けスタイルからテキストスタイルに変更可能

例えば、以下のような、ブログカードを作成することが可能です。

ブログカード

続きを見る非表示 にして、テキストスタイル に変更しました。

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

全ブログカード共通のカスタマイズ方法は、以下から行うことができます。

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

type の値に text を指定していない場合、デフォルトがたすき掛けスタイルになります。

これを例えば、リボンデザインに変更すれば、デフォルトがリボンデザインスタイルに設定されます。

ちなみに、ブログカードの抜粋(記事内容の一部が表示されている部分)は非表示にすることも可能です。

AFFINGER 管理 → 全体設定 → 抜粋設定

タカさん
以下の画像を参考に該当項目をチェックすると、抜粋が非表示になります。

 抜粋設定

リボンデザインスタイル にして、抜粋非表示 にしたブログカードは、以下のような感じです。

ブログカード

ブログカードとテキストリンク、どちらを使うべきか?

上手く導線ができているサイトを見ていると、ブログカードとテキストリンクを上手く使い分けています。

項目ブログカードテキストリンク
特徴目立つ本文に自然に溶け込む
メンテナンスタイトル、アイキャッチを変えると自動的に変更される手動で変更する必要あり

ブログカードは、アイキャッチ画像があり、記事内でも大きく表示されるので目立ちます。

したがって、長文記事の場合、上手くコントラストになってくれることもあります。

リンク先のタイトルやアイキャッチ画像を変更すれば、ブログカードも自動で変わるので、非常にお手軽です。

私も一時期、メンテナンスが楽だからという理由だけで、ブログカードばかり使っていたときがありました。

続いて、テキストリンクについて。

テキストリンクは、記事に自然に溶け込むのが特徴です。

したがって、記事の邪魔にならずに、必要なときに配置するという使い方ができます。

SEO のことばかり考えて、読者を置き去りにしてしまうのが、内部リンクの張り方だと思います。

サイト運営者としては、リンク先の記事も読んで欲しいという想いはあります。

タカさん
リンク先の記事をクリックするかどうかは読者次第です。

ブログカードばかり使うことで、本来の悩みを解決したいユーザーが記事が読みにくいという理由で離脱されると本末転倒です。

そうは言っても、キーワードによっては、長文になりすぎて、読みにくくなることもあるので、内部リンクは必要です。

ブログカードだけでなく、テキストリンクも使って、コンテンツ内のノイズにならない配慮をすることをおすすめします。

AFFINGER6 で他の機能を使いこなしたい方へ

AFFINGER6(アフィンガー6)は、ブログカード以外にも、様々な機能を備えています。

マーカー、吹き出し、マイボックス、クリップメモなど。

記事の書き方について、詳しく知りたい方は、以下の記事をご参照下さい。

AFFINGER6 記事の書き方
関連記事AFFINGER6 記事の書き方【ブログ初心者向け】

AFFINGER6(アフィンガー6)で記事を書く方法について。 AFFINGER6 を使っているけど、できることが多くて取捨選択ができない 記事の書き方を知りたい 上記のような方に向けて、実際に AF ...

最後に

今回は、AFFINGER6(アフィンガー6)でブログカードを作成する方法について、解説しました。

AFFINGER6 を使えば、プラグインなしでもブログカードを作成することができます(内部リンク)。

タカさん
ブログカードも重要ですが、テキストリンクも重要です。

上手く使い分けて、読者を置き去りにせずに、内部 SEO 対策をするようにしましょう。

\ 本気でブログ収益化できるテーマ! /

AFFINGER6

※限定特典が欲しい方は、特典付き購入ページ へ。

-WordPress講座