Affinger

AFFINGER5のブログカード作り方、カスタマイズ方法を解説

スポンサーリンク

こんにちは。まっきーです!

本記事では、AFFINGER5でブログカードを作成する方法を解説します!

ブログカードはこんな感じです。

【ブログ運営報告】ブログ毎日更新3ヶ月経過!pv数と収益は?

続きを見る

ちょー簡単に設定できて見栄えもよいです!

ブログカードの作り方を覚えて、有効活用しましょう!

本記事の内容

  • AFFINGER5でブログカードを作成する手順
  • 簡単なカスタマイズ方法

ブロックエディタ(Gutenberg)での解説になります。

ブログカード作成の手順

ブログカードは下記3つの手順で簡単に作成できます。

  • クラシック版の段落を選択
  • ラベルを選択
  • IDを入力

クラシック版の段落を選択

ブロックエディタを新規追加して「クラシック版の段落」を選択します。

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

カードを選択

カードをクリックします。

カードがないという方は、「タグ」→「記事一覧/カード」→「ブログカード」で使えます。

IDを入力

カードをクリックすると以下のようなコードが表示されると思います。

リンクをしたい記事のidを入力したら完成です!

id="ここにidを入力"

  • idの確認方法

idはWordpress管理画面の「投稿一覧」で確認することができます(下記写真参照)

プレビューを表示させてみてください。ブログカードができているはずです!

各コードの解説

次に各コードの役割を解説します。

ここを理解しておくと、少し細かな設定ができますよ!

st-card id id
label 文字を入れると、文字入りのラベルを表示
pc_height PC(パソコン)閲覧時のカードの高さを指定
name ここに入力した文字がタイトルになる
bgcolor ラベルの背景色を変更(カラーコード)
color ラベルの文字色を変更(カラーコード)
readmore onで続きを見るを表示,offで非表示
type type="text"でラベルがテキストタイプに

具体例を見た方が早いと思いますので下のようにコードを入力した場合のブログカードを見てみてください。

カラーコード参考→HTMLカラーコード: WEB色見本 原色大辞典

参考
ブログ3ヶ月

続きを見る

デフォルトのブログカード

【ブログ運営報告】ブログ毎日更新3ヶ月経過!pv数と収益は?

続きを見る

イメージはつかんでいただけたかなと思います。次に、もう少し細かな設定を解説しますね!

細かなカスタマイズ方法

カスタマイズ2つ

ブログカード内の文字数調節

ラベルの形状を変える

ブログカード内の文字数調節

WordPress管理画面から「AFFINGER5 管理」→「デザイン」→「抜粋設定」へ移動します。

抜粋の文字数を変更することで、ブログカードに表示される文字数を変更することが可能です。

他にも、抜粋を非表示にしたり、スマホ画面での抜粋をONにできたりします。

個人的に、抜粋は少なめもしくは無しが良いと思います。

何事もユーザーファーストで!

ラベルの形状を変える

WordPress管理画面から「外観」→「カスタマイズ」→「オプションカラー設定」→「ブログカード/ラベル」へ移動します。

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

まとめ

AFFINGER 5ではおしゃれなブログカードが簡単に作れます。

お気に入りのブログカードを作成して、読者のサイト回遊率を上げましょう!

関連記事
Affinger5 会話風吹き出しの使い方とカスタマイズ方法

続きを見る

スポンサーリンク

-Affinger

© 2021 まきろぐ Powered by AFFINGER5