【2024年版】AFFINGER6 ブログカードの作り方！「徹底的に調べてみた」リニューアル

【2024年3月28日更新】
大幅アップデートによる変更箇所を修正し、読みやすくなるように全体を調整しました。

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

AFFINGER6の標準機能を使った、カードスタイルの内部リンク『ブログカード』の作り方をご紹介します。

それではご覧ください！

ブログカードの種類とAFFINGER6専用のブロックエディター機能について

この章では、ブログカードの種類とAFFINGER6専用のブロックエディター機能についてご紹介します。

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

UpdraftPlusの設定を初心者がやってみた！【バックアップと復元が一発！】

WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非！

ブログカードの種類

ブログカードの種類は、以下3種類の基本表示パターンがあります。
以下は『AFFINGER6-EX』のブロックエディター機能』を使って作成しています。『AFFINGER6-STD』では一部クラシックエディターを使用して作成します。「詳しい作成手順は後述します」

リスト型

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

カード型

スライドショー

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

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

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

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

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

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

ブロックエディターは、クラシックエディターに比べて カスタマイズの自由度が低いですが…ブロックエディターの標準メニューを使って「ブログカード」を作成するのがベストだと考えています。おすすめ！

「とにかく！簡単で早い！迷わない！」筆者の私見

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

『AFFINGER：記事一覧（ID）』の挿入手順（ブログカードを作る手順）

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

この章では、『AFFINGER：記事一覧（ID）』の挿入手順をご紹介します。

STEP1投稿（記事編集）画面を準備

投稿（記事編集）画面が表示されます。
（編集する場合は、投稿一覧や固定ページ一覧から 対象ページを選択してください。）

『AFFINGER：記事一覧（ID）』を挿入する箇所をクリックします。

ブロック挿入ツールを切り替えてブロックメニューを開きます。

STEP2ブロック挿入ツールを切り替え

投稿（記事編集）画面の左上部のブロック挿入ツール切り替えアイコン『+』をクリックします。

『+』をクリックします。

STEP3ブロックタブメニューから『AFFINGER：記事一覧（ID）』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。

ブロックタブのメニューから『AFFINGER：記事一覧（ID）』をクリックして投稿（記事編集）画面に挿入します。

『AFFINGER：記事一覧（ID）』をクリックします。

STEP4記事一覧（ID）ブロック挿入完了

投稿（記事編集）画面に 記事一覧（ID）ブロックが挿入されます。

挿入直後は、以下のように表示されます。

『AFFINGER：記事一覧（ID）』の設定（ブログカードを作る手順）

「AFFINGER6-STD」と「AFFINGER6-EX」では設定オプションが少し違うので2つに分けてご紹介します、

AFFINGER6-STD

ブロックタブメニュー詳細

上記の設定で、3つの記事を表示させた実際のリスト型ブログカードのサンプルはこちらです。

以下の画像は ブロックタブメニュー詳細の ランキング：『ON/OFF』の違いが確認できます。

AFFINGER6-EX

AFFINGER6-EXは、設定オプションが少し違うので「ブロックタブメニュー詳細」を抜粋してご紹介します。

ブロックタブメニュー詳細

AFFINGER6-EXを使用すると『カード化・スライドショー』の2種類が表示可能になります。

カード化とスライドショーの設定を「AFFINGER6-STD」で挿入する場合は、クラシックエディターで行います。（後述しますね）

『AFFINGER：カテゴリ一記事一覧』の挿入手順（ブログカードを作る手順）

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

この章では、『AFFINGER： カテゴリー記事一覧』の挿入手順をご紹介します。

STEP1投稿（記事編集）画面を準備

投稿（記事編集）画面が表示されます。
（編集する場合は、投稿一覧や固定ページ一覧から 対象ページを選択してください。）

『AFFINGER：カテゴリー記事一覧』を挿入する箇所をクリックします。

ブロック挿入ツールを切り替えてブロックメニューを開きます。

STEP2ブロック挿入ツールを切り替え

投稿（記事編集）画面の左上部のブロック挿入ツール切り替えアイコン『+』をクリックします。

『+』をクリックします。

STEP3ブロックタブメニューから『AFFINGER：カテゴリー記事一覧』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。

ブロックタブのメニューから『AFFINGER：カテゴリー記事一覧』をクリックして投稿（記事編集）画面に挿入します。

『AFFINGER：カテゴリー記事一覧』をクリックします。

STEP4カテゴリー記事一覧 ブロック挿入完了

投稿（記事編集）画面に カテゴリー記事一覧 ブロックが挿入されます。

挿入直後は、以下のように表示されます。

『AFFINGER： カテゴリー記事一覧』の設定（ブログカードを作る手順）

「AFFINGER6-STD」と「AFFINGER6-EX」では設定オプションが少し違うので2つに分けてご紹介します。

AFFINGER6-STD

ブロックタブメニュー詳細

AFFINGER6-EX

AFFINGER6-EXは、設定オプションが少し違うので「ブロックタブメニュー詳細」を抜粋してご紹介します。

ブロックタブメニュー詳細

カテゴリIDを入力した「ブログカード」は以下の様にリスト型で表示されます。

スライドショータイプの表示もできるのでご紹介します。
カテゴリの選択を同じ条件としてスライドショーを”ON"にすると以下の様に表示されます。

『AFFINGER：タグ記事一覧』の挿入手順（ブログカードを作る手順）EX専用

タグ記事一覧は「AFFINGER6-EX」専用の機能で、「AFFINGER6-STD」では、ブロックタブメニュー自体が存在しません。また、クラシックエディターでの対応もできません。

「どうしても使いたい！」という方は…「AFFINGER6-EX」にグレードアップしましょう。^^／

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

この章では、『AFFINGER：タグ記事一覧』の挿入手順をご紹介します。

STEP1投稿（記事編集）画面を準備

投稿（記事編集）画面が表示されます。
（編集する場合は、投稿一覧や固定ページ一覧から 対象ページを選択してください。）

『AFFINGER：タグ記事一覧』を挿入する箇所をクリックします。

ブロック挿入ツールを切り替えてブロックメニューを開きます。

STEP2ブロック挿入ツールを切り替え

投稿（記事編集）画面の左上部のブロック挿入ツール切り替えアイコン『+』をクリックします。

『+』をクリックします。

STEP3ブロックタブメニューから『AFFINGER：タグ記事一覧』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。

ブロックタブのメニューから『AFFINGER：タグ記事一覧』をクリックして投稿（記事編集）画面に挿入します。

『AFFINGER：タグ記事一覧』をクリックします。

STEP4タグ記事一覧 ブロック挿入完了

投稿（記事編集）画面に タグ記事一覧 ブロックが挿入されます。

挿入直後は、以下のように表示されます。

『AFFINGER：タグ記事一覧』の設定（ブログカードを作る手順）EX専用

「AFFINGER6-EX」専用です。

AFFINGER6-EX

ブロックタブメニュー詳細

カラムブロックを使えばリスト型でカード型表示ができる！

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

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

詳細手順は割愛しますが…エディター画面で記述した状態と完成プレビュー（実物）を掲示しておきます。参考にしてみてください「筆者的には超おすすめです。^^／」

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

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

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

エディター画面 （イメージ）

プレビュー画面

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

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

エディター画面 （イメージ）

プレビュー画面

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

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

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

グラシックエディターは「2024年に廃止される」▶︎ クラシックエディターの関連記事はこちら！

「AFFINGER6-STD」のブロックエディターでは作成できない「カード型（1カラムでNG）とスライドショー」のブログカードの作り方をご紹介します。

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

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

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

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

STEP1投稿（記事編集）画面を準備

投稿（記事編集）画面が表示されます。
（編集する場合は、投稿一覧や固定ページ一覧から 対象ページを選択してください。）

『クラシック』を挿入する箇所をクリックします。

ブロック挿入ツールを切り替えてブロックメニューを開きます。

STEP2ブロック挿入ツールを切り替え

投稿（記事編集）画面の左上部のブロック挿入ツール切り替えアイコン『+』をクリックします。

『+』をクリックします。

STEP3ブロックタブメニューから『クラシック』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。

ブロックタブのメニューから『クラシック』をクリックして投稿（記事編集）画面に挿入します。

『クラシック』をクリックします。

STEP4クラシック ブロック挿入完了

投稿（記事編集）画面に クラシック ブロックが挿入されます。

挿入直後は、以下のように表示されます。

クラシック領域（グレーの部分）をクリックしてクラシックエディターを開きます。

以下の画面（クラシックエディター）が表示されたら、準備OKです。

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

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

『クラシックエディターのメニュー＞カード』タブをクリックしてデフォルトのコードを呼び出します。

デフォルトのコードが表示されたら赤矢印部に『記事ID』を入力します。

id="〇〇" 記事のIDは1個のみ有効です。→ 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管理メニューの固定ページ一覧・投稿一覧』で確認できます。

リスト型ブログカードは以下の様に表示されます。（現物）

記事IDを「〇〇」とした場合

UpdraftPlusの設定を初心者がやってみた！【バックアップと復元が一発！】

WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非！

続きを見る

※ 「表示設定は画像のみ ＋ タイトル ＋ 抜粋」で表示しています。

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

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

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

『クラシックエディターのメニュー＞タグ＞レイアウト＞PCとTab（959px以上）＞左右50%』

❶〜❹ の順にマウスオーバーでメニューを開いて ❹ でクリックします。←ちょっとやりにくい？！

❶〜❹ を処理します。

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

1. カードを挿入する側の領域を選択してテキストの末尾にカーソルを置きます。
2. カードをクリックします。

❶ ❷ を処理します。（右側も同様に処理します）

カードスタイルのコード（命令文）が挿入されます。→『記事ID』を入力します。（右側も同様に処理します）
※『 id="" → id="〇〇" 』

カードスタイルが左右に挿入できたら、不要部分を削除します。（赤枠部のテキスト）

不要なテキストを作書します。

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

カード型ブログカードで落差が生じた場合の対処方法

カード型ブログカードは「サイト幅・タイトルの文字数・カード型のスタイル」等の要因により、以下のようにブログカードの高さに落差が生じる場合があります。

カードスタイルの場合

カードスタイルBの場合

ブロックエディターを使って落差を解消する

以下では、表示されるコンテンツの幅をグループ化して枠付けすることで狭くして落差を解消しています。

カードスタイルを変更せずに背景処理による表示幅制限

カードスタイルを変更する

『カードスタイル』を『カードスタイルB』に変更するとブログカードのテキストの表示領域が増すので落差を解消できる場合があります。また、逆に落差が出る場合があります。
（当サイト発生した落差：『カードスタイルB』2列x1行のブログカードをサンプルとして掲示しています）

※ カードスタイルB：幅方向（左右）の余白が小さくなり、テキストの表示領域が増します。

ここでは『カードスタイル』を『カードスタイルB』に変更する手順をこ紹介します。

カード型ブログカードを作る手順（横2列x1行）の完成している状態から進めます。

変更するカードの領域を選んで…
『クラシックエディターのメニュー＞スタイル＞レイアウト＞カードスタイルB』
❶〜❸ の順にマウスオーバーでメニューを開いて ❸ でクリックします。

❶〜❸ を処理します。

カードスタイルのコード（命令文）に薄い枠が挿入されます。→（右側も同様に処理します）

カードスタイルの左右に薄い枠が挿入できれば完了です。

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

注意タイトルの文字数に差が大きい場合、落差は吸収できません。今回ご紹介した方法を織り交ぜてお好みの配置にお役立てください。

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

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

手順は、カード型ブログカード（横2列x1行）と同等で以下のメニューから始めます。

『クラシック版のメニュー＞タグ＞レイアウト＞PCとTab（959px以上）＞3分割』

手順の詳細は こちらを参照してください。クラシックエディターのメニューで『❹ 左右50%→3分割』が違うだけで要領は同じなので、ここでの手順説明は割愛します。

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

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

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なら表示はブロックエディターで可能です！」

思うように表示できない時は…

AFFINGER管理の設定を確認してみましょう。

デフォルトの設定では画像が正方形であること等から、この記事での解説とは異なった表示にになってしまいます。思うように表示できない時は、以下を参考にAFFINGER管理の『サムネイル画像設定』も確認してください。

まとめ！AFFINGER6 ブログカードの作り方【徹底的に調べてみた！！】

今回は「ブログカードの作り方と表示状態」をブロックエディターとクラシックエディターに分けてご紹介しました。「サイト作りがもっと楽しくなる！？」のにお役に立てば幸いです。お疲れ様でした！^^

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