こんにちは。まっきーです!
本記事では、AFFINGER5でブログカードを作成する方法を解説します!
ブログカードはこんな感じです。
-
-
【ブログ運営報告】ブログ毎日更新3ヶ月経過!pv数と収益は?
続きを見る
ちょー簡単に設定できて見栄えもよいです!
ブログカードの作り方を覚えて、有効活用しましょう!
本記事の内容
- AFFINGER5でブログカードを作成する手順
- 簡単なカスタマイズ方法
ブロックエディタ(Gutenberg)での解説になります。
目次
ブログカード作成の手順
ブログカードは下記3つの手順で簡単に作成できます。
- クラシック版の段落を選択
- ラベルを選択
- IDを入力
クラシック版の段落を選択
ブロックエディタを新規追加して「クラシック版の段落」を選択します。

「クラシック版の段落」はプラグイン「TinyMCE Advanced」を有効化すると使用できます。
カードを選択
カードをクリックします。

カードがないという方は、「タグ」→「記事一覧/カード」→「ブログカード」で使えます。
IDを入力
カードをクリックすると以下のようなコードが表示されると思います。
1 |
[st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""] |
リンクをしたい記事のidを入力したら完成です!
id="ここにidを入力"
- idの確認方法
idはWordpress管理画面の「投稿一覧」で確認することができます(下記写真参照)

プレビューを表示させてみてください。ブログカードができているはずです!
各コードの解説
次に各コードの役割を解説します。
ここを理解しておくと、少し細かな設定ができますよ!
1 |
[st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type=""] |
st-card id | id |
label | 文字を入れると、文字入りのラベルを表示 |
pc_height | PC(パソコン)閲覧時のカードの高さを指定 |
name | ここに入力した文字がタイトルになる |
bgcolor | ラベルの背景色を変更(カラーコード) |
color | ラベルの文字色を変更(カラーコード) |
readmore | onで続きを見るを表示,offで非表示 |
type | type="text"でラベルがテキストタイプに |
具体例を見た方が早いと思いますので下のようにコードを入力した場合のブログカードを見てみてください。

カラーコード参考→HTMLカラーコード: WEB色見本 原色大辞典
デフォルトのブログカード
-
-
【ブログ運営報告】ブログ毎日更新3ヶ月経過!pv数と収益は?
続きを見る
イメージはつかんでいただけたかなと思います。次に、もう少し細かな設定を解説しますね!
細かなカスタマイズ方法
カスタマイズ2つ
ブログカード内の文字数調節
ラベルの形状を変える
ブログカード内の文字数調節
WordPress管理画面から「AFFINGER5 管理」→「デザイン」→「抜粋設定」へ移動します。
抜粋の文字数を変更することで、ブログカードに表示される文字数を変更することが可能です。

他にも、抜粋を非表示にしたり、スマホ画面での抜粋をONにできたりします。
個人的に、抜粋は少なめもしくは無しが良いと思います。
何事もユーザーファーストで!
ラベルの形状を変える
WordPress管理画面から「外観」→「カスタマイズ」→「オプションカラー設定」→「ブログカード/ラベル」へ移動します。

ラベルデザインでリボンデザインにするとこんな感じです。

まとめ
AFFINGER 5ではおしゃれなブログカードが簡単に作れます。
お気に入りのブログカードを作成して、読者のサイト回遊率を上げましょう!
-
-
Affinger5 会話風吹き出しの使い方とカスタマイズ方法
続きを見る