PR AFFINGER

【AFFINGER6】ブロックエディタでのブログカード作成方法【Gutenberg】


悩む人
悩む人

ブロックエディタでブログカードはどうやって作るの?カスタマイズ方法も教えて!

AFFINGER6では内部と外部、2種類のブログカードを作成することができます。

サイトの滞在時間や回遊性アップにもつながるブログカードはSEO的にも非常に大事なので、作り方は覚えておいて損はないですよ!

今回は、あなたの記事同士を繋げる内部リンク用ブログカードの作り方を解説していきます!

作り方はとても簡単!覚えてしまえば30秒で作れます!

ゆいて
ゆいて

  • 内部リンク用ブログカードの作り方
  • ブログカードのカスタマイズ方法

AFFINGER6の内部リンク用ブログカードの作り方


AFFINGER6でブログカードを作るには2つのパターンがあります。

1つ目は「クラシックブロック」を使った方法です。


クラシックブロックを使ったブログカード作成方法


step
1
[ブロック挿入ツール]-[クラシック](クラシック版の段落)をクリック

クラシックブロックを使ったブログカードの作成方法



step
2
[カード]をクリック

クラシックブロックを使ったブログカードの作成方法


step
3
表示されたコードの「id="カード表示したい記事ID"]を入れれば完了!

クラシックブロックを使ったブログカードの作成方法


ポイント

記事IDは[ダッシュボード]-[投稿](記事一覧画面)の「ID」に表示されています。


WordPressの記事ID

この手順で作ったブログカードはこんな感じです!

ゆいて
ゆいて


初心者におすすめのWordPress無料・有料テーマ19選!

続きを見る


続けて2つ目は「埋め込み」を使う方法です。


埋め込みを使ったブログカード作成方法


step
1
[ブロック挿入ツール]- [埋め込み]をクリックします。

埋め込みを使ったブログカードの作成方法


step
2
ブログカードにしたいURLを入力

埋め込みを使ったブログカードの作成方法


step
3
[埋め込み]をクリックして完了!


この手順で作ったブログカードはこんな感じです!

ゆいて
ゆいて



どっちのパターンでもとても簡単に作れましたね!

最後にそれぞれのカスタマイズ方法について解説していきますね!


「クラシックブロック」と「埋め込み」でカスタマイズできる内容が違うので、それぞれを分けてみていきましょう。

クラシックブロックで作ったブログカードのカスタマイズ


クラシックブロックで作ったブログカードでできるカスタマイズは次の通りです。

  • ラベルの挿入
  • ラベルの色やブログカードのデザイン設定
  • 抜粋の非表示
  • 「続きを見る」の非表示


ラベルの挿入


ブログカードにラベルを挿入するとこんな感じになります。

おすすめ記事!
ラッコキーワードの使い方を徹底解説!ブログのネタ探しにも使えます。

続きを見る


挿入方法は、ブログカードのコードの「label="ラベルに表示したい文字"」を入れればOKです!

ブログカードのラベル表示方法


ポイント

ラベルの色やデザインはダッシュボードの[外観]-[カスタマイズ]-[オプション(その他)]-[ブログカード / ラベル]から変更可能です。


抜粋の非表示


抜粋とは、次のブログカードのように記事冒頭が表示される機能のことです。


抜粋の非表示方法は、ダッシュボードから[AFFINGER管理]-[全体設定]をクリックします。

少し下のほうにある「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れて「Save」すればOKです。

ブログカードの抜粋設定


「続きを見る」の非表示


ブログカード内の「続きを見る」を消したい場合はブログカードのコードの次の部分を変更します。

readmore="on"を"off"にする


ブログカードの続きを見るの設定


クラシックブロックで作った、ブログカードのカスタマイズ方法は以上です!


埋め込みで作ったブログカードのカスタマイズ



埋め込みで作ったブログカードでできるカスタマイズは次の通りです。


  • キャプション(ラベル)の挿入
  • ラベルの色やブログカードのデザイン設定


キャプション(ラベル)の挿入


キャプションとは、ラベルのことです。

「埋め込み」で作る場合は、キャプションに入力した文字がラベルとして表示されます。


キャプションの入力は、挿入されたブログカードブロックをクリック >「キャプションを追加」部分に入力します。


ポイント

文字色もここで変更可能です。


ラベルや枠線の色は、クラシックブロックで作った場合と同じところで設定できます。


ラベルのデザイン変更や抜粋の非表示はできません・・・

ゆいて
ゆいて



「埋め込み」で作ったブログカードのカスタマイズは以上です!


まとめ:ブログカードでリンクをちょっと良い感じに!



今回は、AFFINGER6でのブログカードの作り方を解説しました!

すべてのリンクをブログカードにする必要はありませんが、適切な場所に入れてやることでサイトの回遊性UPにつながりSEO的にも良い影響をもたらします。

ブログカードはアイキャッチが表示されるので、読者がクリックしたくなるアイキャッチも重要ですね!

少しでも参考になれば幸いです。
ありがとうございました。

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

-AFFINGER