AFFINGER6のブログカード 設定・作り方を徹底解説！ブロックエディター編

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の標準機能を使った、「ブログカード」の作り方をご紹介します。
「AFFINGER6（STD）と（EX）どちらも解説します。

それではご覧ください。

ブログカードとは？

ブログカードとは、一般的には以下の2つの意味で使われます。

1. SNSやウェブサイトでの表示形式
   • ブログカードは、SNSやウェブサイトなどで共有されたリンクを表示する際に使われる、リンク先の要約情報や画像を含むカード型の表示形式を指します。
     
     例えば…witterやFacebookでURLを共有すると、リンク先の情報がカードの形で表示され、このカードには、タイトル、画像、概要テキストなどが含まれていて ユーザーにリンク先の内容をわかりやすく伝える役割があります。
2. ブログデザインの一部
   • 「ブログカード」という言葉は、ブログのデザインやレイアウトに関連する要素を指し、ブログ記事内で「他の関連記事や広告・おすすめコンテンツ」等をカード型のボックスで表示します。
     
     ブログカードは、読者に関連情報を提供したり、関心を引きつけるために使われます。

以下のような「タイトル、画像、概要テキスト」を表示したボックスブロックです。（リスト型 埋め込み）

【AFFINGER6】利用できるウィジェット一覧＆設定・活用法を徹底解説【WordPress対応】

AFFINGER6の専用ウィジェットとWordPress標準ウィジェットをすべて解説！設定方法や削除方法を詳しく説明し、初心者にもわかりやすく用途を紹介。ウィジェット活用ガイドを作りました！

AFFINGER6でブログカードを使うメリット

• 視覚的に魅力的なリンク
  • ブログカードを使用すると、リンクが単なるテキストリンクではなく、視覚的に魅力的なデザインになります。これにより、読者の目を引き、クリック率の向上が期待できます。
• 内部リンクの整理
  • ブログカードを使うことで、記事内の内部リンクを整理された形で提供できます。読者は関連する記事を簡単に見つけられるため、回遊率がアップします。
• モバイルフレンドリー
  • AFFINGER6のブログカードはレスポンシブデザインに対応しており、スマホやタブレットでも綺麗に表示されます。これにより、どのデバイスでも快適な閲覧体験を提供できます。
• 柔軟なカスタマイズ
  • デザインやレイアウトの変更が簡単にでき、リスト型、カード型、スライドショーなど、さまざまな表示形式に対応しています。自分のサイトのデザインに合わせたスタイルに変更可能です。
• SEO効果の向上
  • 適切に使ったブログカードは、関連性のあるコンテンツを紹介するため、SEO的にも有利です。内部リンクの最適化や回遊率の向上により、検索エンジンからの評価が上がる可能性があります。

これらのメリットにより、AFFINGER6のブログカードは、サイトのデザイン性を高めつつ、読者の利便性も向上させる強力なツールです！

ブログカードの種類

ブログカードには、「リスト型」「カード型」「スライドショー」の3つの基本表示パターンがあります。

以下の表示イメージを参考にしてください。

リスト型

※ 当サイト設定により、下記のブログカードでは 概要テキストを非表示にしています。

カード型

スライドショー

AFFINGER6専用のブロックエディター機能

AFFINGER6専用のブロックエディター機能を使って簡単に作成できる「記事一覧」の種類です。

• ブロックタブメニュー
  • AFFINGER：記事一覧（ID）
  • AFFINGER：カテゴリー記事一覧
  • AFFINGER：タグ記事一覧（EX）

• ブロックタブメニュー
  • クラシック（WordPress エディターメニュー）
    • 記事一覧
    • カテゴリー記事一覧
    • タグ記事一覧（EX）

• タグ記事一覧は、AFFINGER-EX 専用になります。

AFFINGER管理のブログカード基本設定（サムネイル画像設定）

ブログカードを理想のデザインで表示するために、あらかじめ設定を行う必要があります。適切に設定することで、ブログカードをイメージ通りに表示できます。

基本設定は、AFFINGER管理で行います。

Menu 『WordPress管理＞ダッシュボード＞AFFINGER管理』をクリックして、全体設定タブの中にあるサムネイル画像設定を開きます。

「サイト全体の設定」画面を下側にスクロールするか、『サムネイル画像設定』をクリックします。

アイキャッチ画像を設定しない場合、表示したいサムネイル画像がある場合は設定してください。

サムネイル画像がはみ出したり、形状・デザインを変更したい場合は以下で設定します。

サムネイル画像がはみ出したり、形状・デザインを変更したい場合は以下で設定します。

アイキャッチ画像が「1200 x 630 px」に統一されている場合は以下の設定にします。

設定変更後、最後に『Save』をクリックします。

記事一覧ブロックエディターを使ったブログカードの作り方

この章では、ブロックエディターを使ったブログカードの作り方をご紹介します。

クラシックエディターは難しいと感じる初心者さんにとって最も適した方法です。おすすめ

それでは見ていきましょう。

『AFFINGER：記事一覧（ID）』の挿入と設定手順（ブログカードの作り方）

• 投稿（エディター）画面での作業になります。

『AFFINGER：カテゴリ一記事一覧』の挿入と設定手順（ブログカードの作り方）

挿入手順は「AFFINGER：記事一覧（ID）」と同様で、挿入するブロックが『AFFINGER：カテゴリ一記事一覧』に変わるだけです。

• 投稿（エディター）画面での作業になります。

EX専用『AFFINGER：タグ記事一覧』の挿入と設定手順（ブログカードの作り方）

挿入手順は「AFFINGER：記事一覧（ID）」と同様です。挿入するブロックが『AFFINGER：タグ記事一覧』に変わるだけです。

• 投稿（エディター）画面での作業になります。

STD専用カラムブロックを使って 記事一覧や埋め込みリンクをリスト型からカード型に変更する方法

この章では、カラムブロックと組み合わせたブログカードの作り方をご紹介します。

エディター画面で記述した状態と完成プレビューの画面をご紹介します。参考にしてみてください。
「筆者的には超おすすめです。^^／」

クラシックエディターで対応しなくては設置できなかった内容ですが…
カラムブロックとの組み合わせで、簡単にカード型のブログカードが設置できる様になりました！

『カラム』ブロックと『AFFINGER：記事一覧（ID）』ブロックを使ったブログカードの作り方

AFFINGER： 記事一覧（ID）の詳細設定はデフォルト（リスト型）のままで挿入します。

エディター画面

プレビュー画面

『カラム』ブロックと『埋め込み』ブロックを使ったブログカードの作り方

カード型のブログカードにするためにカラムブロックに中にURLを埋め込みます。

• 段落（p）に『URL』を直接貼り付けてOKです。または、各カラムに埋め込みブロックを挿入してもOKです。どちらも同じなので…問題ありません。

通常の埋め込みではリスト型で表示されます。

カラムブロックを1カラムで追加し、URLを入力するとカード型で表示されます。

カラムブロックを2カラムで追加し、URLを入力すると同様にカード型で表示されます。

カラムブロックを3カラムで追加し、URLを入力すると同様にカード型で表示されます。

まとめ！AFFINGER6のブログカード 設定・作り方を徹底解説！ブロックエディター編

AFFINGER6でブロックエディターを使ったブログカードの設定方法と作り方をご紹介しました。

✅ 主なポイント

• AFFINGER管理で行うブログカードの基本設定
• ブログカードの基本設定：リスト型・カード型・スライドショーの違いと設定方法
• スライドショーをスライドさせない調整方法
• ブロックエディター：記事一覧とカラムを併用した作り方

AFFINGER6のブログカードを活用して、記事一覧やリンクをより魅力的にカスタマイズしてください。
この記事がお役に立てば嬉しいです。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／