AFFINGER6で作れるブログカード全部を紹介します！

AFFINGER6のデフォルト機能で作れるブログカードを紹介します。

ブログカードの作り方は大きく分けて2つ。

1. クラシック版の段落ブロックの中で作る
2. ブロックエディタで作る

AFFINGER6で作れるブログカードは4種類。

それにプラスして、ブログカード風の内部リンクがあります。

クラシック版の段落の中で作るブログカード

1. CHECK（ふきだし）
2. 参考

ブロックエディタで作るブログカード

3. 埋め込み
4. ラベルあり
5. 記事IDを使ったブログカード風の内部リンク

それぞれ詳しく解説していきます。

AFFINGER6で作れるブログカードの種類

クラシック版の段落で作るブログカード

CHECK（ふきだし）付きのブログカード

これは単純に、ブログカードにふきだしがついているパターンです。

ふきだしの中にあるアイコンの変更や、ふきだしの色も変更可能です。

タイトルの頭に「参考」が入ったパターン

タイトルの頭にアイコンと文字を入れられるパターンです。

アイコンの変更や色の変更も可能です。

ブロックエディタで作るブログカード

URLを埋め込んだだけのシンプルパターン

段落ブロックに直接URLを埋め込むタイプのブログカードです。

このパターンが一番簡単なので、僕はよく使います。

ブログカードにラベルを付けたパターン

先ほどのブログカードにラベルを付けたタイプです。

少し文字を入れて目立たせたいときには有効です。

ブログカード風の特殊パターン

記事一覧IDブロックを使ったブログカード風内部リンクも作れます。

こんな感じ！

このパターンはブログカードではないので、高さや幅が異なります。

ただ、背景の色を変えたり補足テキストを入れたりと、通常のブログカードに比べて自由度が高いのが特徴です。

• 他所のサイトと差別化を図りたい
• 通常のブログカードよりも目立たせたい

という方にオススメです。

ブログカードを記事に挿入する方法

それでは、AFFINGER6のデフォルト機能で作れるブログカードの設定を紹介していきます。

ここでは3パターンに分けて手順を解説していきます。

• クラシック版の段落を使用したブログカード
• ブロックエディタでブログカード
• ブログカード風内部リンク

この流れで行きます。

クラシック版の段落を使用したブログカードの挿入

１．段落に「/クラシック」と入力し、「クラシック版の段落ブロック」を挿入する。

「クラシック」でもOKです。

２．①「タグ」→ ②「記事一覧/カード」→ ③「ブログカード」→ ④「参考 or CHECK（ふきだし）」を選択。

３．「記事ID」と「背景色のコード」を入れると完成です。

背景色はデフォルトではグレーです。

ブロックエディタでブログカードを挿入する

１．ブロックの段落に、ブログカードとして表示させたい記事の「URL」をそのまま貼り付けます。

もしくは、段落に「/埋め込み」と入力し、埋め込みブロックを挿入。

URLを入力し「埋め込み」をクリックすれば、ブログカードになります。

２．ラベルを付けたい場合は、「キャプションを追加」の部分にラベルとして表示させたい文字を入れるだけでOKです。

ブログカード風内部リンク

１．段落に「/記事」と入力します。

「STINGER：記事一覧（ID）」が候補として出るのでクリックしてブロックを挿入する。

２．ブロックメニューにある「記事ID」の欄に、挿入したい記事のIDを入力する。

３．挿入した「記事一覧IDブロック」を選択した状態で「グループ化」する。

４．「グループブロック」のメニューにある「ボーダー設定」の「太め」を選択。

すると、以下の状態になります。

５．「記事一覧IDブロック」を選択した状態でEnterをクリックすると、下に段落が追加されます。

そこに「参考」と入力し、ブロックメニューのまるもじを選択。

段落を上へ移動し、あとは「まるもじ」にアイコンを入れて色を設定すれば完成です。

記事一覧IDブロックを使った場合は、編集画面では状態を確認できません。プレビューで確認してください。

その他、ブログカード風内部リンク一覧

ブログカード風内部リンクは、他にもいろんなパターンで作ることができます。

参考として4パターン載せておきます。

ブログカード風内部リンクをいろんなパターンで作りたい方は、こちらの記事を参考にしてください！

最後に

ブロックエディタに慣れている方は、クラシック版の段落でブログカードを作ることにめんどくささを感じると思います。

基本、段落に直接URLを貼り付けるやり方が楽です。

という場合は、ふきだしを付けてアニメーションを追加する方法もおすすめです。

やり方については、こちらの記事を参考にしてください！