AFFINGER6のブログカードの作り方と設定方法｜クラシックエディター対応

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

AFFINGER6のブログカードの作り方と設定方法をクラシックエディター向けに解説。作成手順から表示設定、使い方のポイントまでまとめています。
「AFFINGER6（STD）と（EX）どちらも解説します。

ブログカードとは？

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

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

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

AFFINGER6のウィジェット一覧と設定方法｜おすすめの使い方も解説

AFFINGER6のウィジェット一覧と設定方法を初心者向けに解説。各ウィジェットの特徴や使い方、おすすめの活用例までわかりやすくまとめています。

なぜクラシックエディターでブログカードを作るのか？

現在、多くのWordPressユーザーはブロックエディター（Gutenberg）を利用していますが、クラシックエディターを使い続けている人も少なくありません。その理由として、以下のような点が挙げられます。

• シンプルで使いやすい
  • ブロックエディターよりも直感的な操作ができる
• 既存の記事との互換性
  • 過去に作成した記事を編集しやすい
• プラグインやテーマとの相性
  • クラシックエディター向けの設定が整っているサイトも多い
• 作業スピードが早い
  • ショートコードを活用すれば、スムーズにブログカードを設置できる

AFFINGER6では、クラシックエディターでも「リスト型・カード型・スライドショー形式」のブログカードを作成できます。

慣れた？エディターでブログデザインを調整したい人にとって、クラシックエディターでのブログカード設定は今でも有効な選択肢です！

ブログカードの種類

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

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

リスト型（クラシックで作成）

横1列x3行（カード）

AFFINGER6のウィジェット一覧と設定方法｜おすすめの使い方も解説

AFFINGER6のウィジェット一覧と設定方法を初心者向けに解説。各ウィジェットの特徴や使い方、おすすめの活用例までわかりやすくまとめています。

続きを見る

AFFINGER6のカスタマイズ方法｜メインカラー・デザイン・メニュー設定を解説

AFFINGER6のカスタマイズ方法を初心者向けに解説。メインカラーやデザイン設定、メニューのカスタマイズ手順までわかりやすくまとめています。自分好みのサイトに整えたい方に最適です。

続きを見る

AFFINGER6のサイト幅設定方法｜1060pxは狭い？最適な幅を解説

AFFINGER6のサイト幅の設定方法を初心者向けに解説。初期値1060pxは狭いのか、最適な幅の目安や変更手順、デザインを崩さないポイントまでわかりやすくまとめています。

続きを見る

横1列x3行（記事一覧）

カード型（クラシックで作成）

横2列x1行（カード）

横3列x1行（カード）

横2列x1行（記事一覧）

横3列x1行（記事一覧）

スライドショー（クラシックで作成）

横2列x1行（スライドショー）

横3列x1行（スライドショー）

※ ブロックエディターで作ったブログカードの種類（表示イメージ）はこちらから確認できます。

AFFINGER6専用のクラシックエディター機能

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

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

関連記事 ブロックエディターを使ったブログカードの作り方はこちらをご覧ください。

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

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

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

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

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

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

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

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

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

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

クラシックエディターを使ったブログカードの作り方

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

クラシックエディターは、カスタマイズの自由度が高く ブロックエディターでは作れないカスタマイズも複数ありますが…なるべくブロックエディターの標準メニューを使って「ブログカード」を作成することをおすすめします。

それでは操作方法と表示スタイルを見ていきましょう。

『クラシック』の挿入手順（ブログカードの作り方）

• 投稿（記事編集）画面での作業になります。

この章では、『クラシック』の挿入手順をご紹介します。

以上で準備完了です。

リスト型ブログカードを作る手順（横1列x3行）

リスト型ブログカード（横1列x3行）の完成イメージです。

クラシックエディターのメニューの中にある『カード』をクリックします。

以下のコードが表示されたら、赤矢印部に『記事ID』を入力します。

id="〇〇" 記事のIDは1個のみ有効です。
id="〇〇,△△" のような複数のID入力はNGです。（先頭のID番号しか認識しません）

連続してブログカードを並べる場合は、コードを下行にコピーし、『記事ID』を変更します。
または、改行して再度『カード』をクリックし、コードを呼び出して『記事ID』を入力します。

コードの内容をまとめました。カスタマイズの際の参考にしてください。

指示名	内容
st-card myclass="〇〇"	通常デフォルトのまま！無記入
id="〇〇"	投稿又は固定記事IDを入力（数字）
label="〇〇"	ラベルが出現する（4文字程度テキスト文字）
pc_height="〇〇"	PC閲覧時のカードの高さを指定（数字）
name="〇〇"	ここに入力した文字がタイトルになる（テキスト文字）
bgcolor="〇〇"	ラベル背景色をHTMLカラーコード指定（#000000)等
color="〇〇"	ラベル文字色をHTMLカラーコード指定（#000000)等
webicon="〇〇"	アイコン用テキスト（st-svg-oukan)等
readmore="〇〇"	"on"=表示 / "off"=非表示（リードモア）
thumbnail="〇〇"（EX版のみ）	"on"=表示 / "off"=非表示（サムネイル）
type="〇〇"	”text" （襷掛け以外の表示）通常デザインは無記入

• 記事IDは、『 WordPress管理メニューの固定ページ一覧・投稿一覧』で確認できます。

※ 実際のリスト型ブログカードはこちらから確認できます。

カード型ブログカードを作る手順（横2列x1行）

カード型ブログカード（横2列x1行）の完成イメージです。

ページ幅を2等分してカード型ブログカードを貼り付けます。

クラシックエディターのメニュー内にある『❶ タグ』をクリックします。
次に、ドロップダウンメニューから 『❷ レイアウト → ❸ PCとTab（959px以上） → ❹ 左右50%』 を選択してクリックします。

ブログカードを配置する画面が表示されます。

• 左右両方とも同じ作業

カードスタイルのコード（命令文）が挿入されます。→『記事ID』を入力し、不要部分を削除します。
（赤枠部のテキスト）

• id="" → id="〇〇"

横2列x1行 のブログカードが完成しました。（クラシックエディター画面の完成イメージです）

カード型ブログカードを作る手順（横3列x1行）

カード型ブログカード（横3列x1行）の完成イメージです。

ページ幅を3等分してカード型ブログカードを貼り付けます。

クラシックエディターのメニュー内にある『❶ タグ』をクリックします。

次に、ドロップダウンメニューから 『❷ レイアウト → ❸ PCとTab（959px以上） → ❹ 3分割』 を選択してクリックします。

ブログカードを配置する画面が表示されます。

ここからの操作手順は（横2列x1行）と同じなので、省略します。

カード型ブログカードで高さにばらつきが生じた場合の対処法

クラシックエディターでカード型のブログカードを作成すると、「サイト幅と分割数」「タイトルの文字数」「抜粋の文字数」「カード型のスタイル」などの要因によって、高さにばらつきが生じる場合があります。

『カード』を使って 記事を個別に横並びにすると、以下のように高さにばらつきが生じる場合があります。

代替方法は、『カード』を挿入する代わりに『記事一覧』を挿入します。

ここからの操作手順は同じなので、省略します。

• id="〇〇" を入力します。

※ 横2列x1行（記事一覧）のブログカードはこちらから確認できます。

サムネイルスライドショーの作る手順

サムネイルスライドショーが 作成可能な記事一覧は、以下の様になります。

AFFINGER6-STD

クラシックエディターのメニュー内にある『タグ』をクリックします。

次に、ドロップダウンメニューから 『記事一覧 / カード → カテゴリー記事一覧（スライドショー）』 を選択してクリックします。

AFFINGER6-EX

クラシックエディターのメニュー内にある『タグ』をクリックします。

次に、ドロップダウンメニューから 『記事一覧 / カード → 各（スライドショー）』 を選択してクリックします。

「AFFINGER6-STD」と「AFFINGER6-EX」では作成可能な『記事一覧（スライドショー）』の種類が少し違います。上画面2つの『❸』ドロップダウンタブメニューを確認してみて下さい。

手順は、いずれも同等なので共通している『カテゴリー記事一覧（スライドショー）』を先頭に解説します。

カテゴリー記事一覧（スライドショー）を作る手順

クラシックエディターのメニュー内にある『タグ』をクリックします。
次に、ドロップダウンメニューから 『記事一覧 / カード → カテゴリー記事一覧（スライドショー）』 を選択してクリックします。

『カテゴリーIDの表示条件』を入力します。

カテゴリ記事一覧（スライドショー）コードの内容をまとめました。カスタマイズの際の参考にしてください。

指示名	内容
cat= "〇〇"	カテゴリIDを入力（数字）
page="〇〇"	表示するページ数（数字）
order="〇〇"	表示条件順序（新しい順"desc"）（古い順"asc"）
orderby="〇〇"	表示条件（記事ID"id"）（タイトル"titel"）（タイプ”type”） （日付"date"）（更新日”modified"）
child="〇〇"	子カテゴリID表示（on/off）
slide = "〇〇"	スライドショー（on/off）
slides_to_show = "○,△,□"	スライド列数　"pc,tab,iphone"　（数字・カンマ）
slide_date = "〇〇"	日付（on/off）
slide_more = "ReadMore"	続きを読む=ReadMore （テキスト入力）
slide_center = "〇〇"	表示画面に対する列表示を中央に揃える（on/off）
fullsize_type = ""	表示タイプ（画像のみ表示"card"）（画像とテキスト表示"text"）（全て表示""）

記事一覧（スライドショー）を作る手順（EX専用）

クラシックエディターのメニュー内にある『タグ』をクリックします。
次に、ドロップダウンメニューから 『記事一覧 / カード → 記事一覧（スライドショー）』 を選択してクリックします。

『投稿又は固定記事IDの表示条件』を入力します。

記事一覧（スライドショー）のコードの内容をまとめました。カスタマイズの際の参考にしてください。

指示名	内容
postgroup id = "〇〇"	投稿又は固定記事IDを入力（数字）
rank="〇〇"	ランク表示（on/off）
slide = "〇〇"	スライドショー（on/off）
slides_to_show = "○,△,□"	スライド列数　"pc,tab,iphone"　（数字・カンマ）
slide_date = "〇〇"	日付（on/off）
slide_more = "ReadMore"	続きを読む=ReadMore （テキスト入力）
slide_center = "〇〇"	表示画面に対する列表示を中央に揃える（on/off）
fullsize_type = ""	表示タイプ（画像のみ表示"card"）（画像とテキスト表示"text"）（全て表示""）

タグ記事一覧（スライドショー）を作る手順（EX専用）

クラシックエディターのメニュー内にある『タグ』をクリックします。
次に、ドロップダウンメニューから 『記事一覧 / カード → タグ記事一覧（スライドショー）』 を選択してクリックします。

『タグIDの表示条件』を入力します。

タグ記事一覧（スライドショー）のコードの内容をまとめました。カスタマイズの際の参考にしてください。

指示名	内容
tag "〇〇"	タグIDを入力（数字）
page="〇〇"	表示するページ数（数字）
order="〇〇"	表示条件順序（新しい順"desc"）（古い順"asc"）
orderby="〇〇"	表示条件（記事ID"id"）（タイトル"titel"）（タイプ”type”） （日付"date"）（更新日”modified"）
slide = "〇〇"	スライドショー（on/off）
slides_to_show = "○,△,□"	スライド列数　"pc,tab,iphone"　（数字・カンマ）
slide_date = "〇〇"	日付（on/off）
slide_more = "ReadMore"	続きを読む=ReadMore （テキスト入力）
slide_center = "〇〇"	表示画面に対する列表示を中央に揃える（on/off）
fullsize_type = ""	表示タイプ（画像のみ表示"card"）（画像とテキスト表示"text"）（全て表示""）

スライドショーに表示する記事数と、実際に表示される記事数を同じに設定すると、スライドを固定できます。

• EX版なら、ブロックエディターでの設定も可能です！

まとめ！AFFINGER6のブログカードの作り方と設定方法｜クラシックエディター対応

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

ブログカードは、記事一覧や内部リンクを見やすく整理し、読者のクリックを促す重要なパーツです。

基本設定から表示タイプの違い、細かな調整方法まで押さえておくことで、デザイン性と使いやすさを両立した表示ができるようになります。

少しの工夫で見た目やクリック率は大きく変わるため、サイトに合った形に調整していくことがポイントです。

まずは基本設定から整えて、見やすく回遊しやすい記事づくりに活かしてみてください。