AFFINGER6のデフォルト機能で作れるブログカードを紹介します。
ブログカードの作り方は大きく分けて2つ。
- クラシック版の段落ブロックの中で作る
- ブロックエディタで作る
AFFINGER6で作れるブログカードは4種類。
それにプラスして、ブログカード風の内部リンクがあります。
- CHECK（ふきだし）
- 参考
- 埋め込み
- ラベルあり
- 記事IDを使ったブログカード風の内部リンク
それぞれ詳しく解説していきます。
AFFINGER6で作れるブログカードの種類
クラシック版の段落で作るブログカード
CHECK（ふきだし）付きのブログカード
これは単純に、ブログカードにふきだしがついているパターンです。
ふきだしの中にあるアイコンの変更や、ふきだしの色も変更可能です。
タイトルの頭に「参考」が入ったパターン
タイトルの頭にアイコンと文字を入れられるパターンです。
アイコンの変更や色の変更も可能です。
ブロックエディタで作るブログカード
URLを埋め込んだだけのシンプルパターン
段落ブロックに直接URLを埋め込むタイプのブログカードです。
このパターンが一番簡単なので、僕はよく使います。
ブログカードにラベルを付けたパターン
先ほどのブログカードにラベルを付けたタイプです。
少し文字を入れて目立たせたいときには有効です。
ブログカード風の特殊パターン
記事一覧IDブロックを使ったブログカード風内部リンクも作れます。
このパターンはブログカードではないので、高さや幅が異なります。
ただ、背景の色を変えたり補足テキストを入れたりと、通常のブログカードに比べて自由度が高いのが特徴です。
- 他所のサイトと差別化を図りたい
- 通常のブログカードよりも目立たせたい
という方にオススメです。
ブログカードを記事に挿入する方法
それでは、AFFINGER6のデフォルト機能で作れるブログカードの設定を紹介していきます。
ここでは3パターンに分けて手順を解説していきます。
- クラシック版の段落を使用したブログカード
- ブロックエディタでブログカード
- ブログカード風内部リンク
この流れで行きます。
クラシック版の段落を使用したブログカードの挿入
１．段落に「/クラシック」と入力し、「クラシック版の段落ブロック」を挿入する。
「クラシック」でもOKです。
２．①「タグ」→ ②「記事一覧/カード」→ ③「ブログカード」→ ④「参考 or CHECK（ふきだし）」を選択。
３．「記事ID」と「背景色のコード」を入れると完成です。
背景色はデフォルトではグレーです。
ブロックエディタでブログカードを挿入する
１．ブロックの段落に、ブログカードとして表示させたい記事の「URL」をそのまま貼り付けます。
もしくは、段落に「/埋め込み」と入力し、埋め込みブロックを挿入。
URLを入力し「埋め込み」をクリックすれば、ブログカードになります。
２．ラベルを付けたい場合は、「キャプションを追加」の部分にラベルとして表示させたい文字を入れるだけでOKです。
ブログカード風内部リンク
１．段落に「/記事」と入力します。
「STINGER：記事一覧（ID）」が候補として出るのでクリックしてブロックを挿入する。
２．ブロックメニューにある「記事ID」の欄に、挿入したい記事のIDを入力する。
３．挿入した「記事一覧IDブロック」を選択した状態で「グループ化」する。
４．「グループブロック」のメニューにある「ボーダー設定」の「太め」を選択。
すると、以下の状態になります。
５．「記事一覧IDブロック」を選択した状態でEnterをクリックすると、下に段落が追加されます。
そこに「参考」と入力し、ブロックメニューのまるもじを選択。
段落を上へ移動し、あとは「まるもじ」にアイコンを入れて色を設定すれば完成です。
記事一覧IDブロックを使った場合は、編集画面では状態を確認できません。プレビューで確認してください。
その他、ブログカード風内部リンク一覧
ブログカード風内部リンクは、他にもいろんなパターンで作ることができます。
参考として4パターン載せておきます。
ブログカード風内部リンクをいろんなパターンで作りたい方は、こちらの記事を参考にしてください！
-
-
AFFINGER6「ブログカード風」内部リンクの作り方【装飾し放題！】
今回ご紹介する方法は、 デフォルトのブログカードではもの足りない…… もっと内部リンクを目立たせたい！ という方におすすめの方法です。 ブログカード風内部リンクを使えば、 ボーダーの「色」や「太さ」の ...
最後に
ブロックエディタに慣れている方は、クラシック版の段落でブログカードを作ることにめんどくささを感じると思います。
基本、段落に直接URLを貼り付けるやり方が楽です。
「ブログカードを目立たせたい！」
という場合は、ふきだしを付けてアニメーションを追加する方法もおすすめです。
やり方については、こちらの記事を参考にしてください！
-
-
100%目立つ！WEBアイコンやふきだしを動かす方法
AFFINGER6には「アニメーション」機能があります。 アニメーションを使うことで、ボックスのアイコンを動かしたり、ブロック全体を動かしたりということが簡単にできます。 たとえば、 注意 ふきだしを ...
