こんにちは。まっきーです！
本記事では、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 会話風吹き出しの使い方とカスタマイズ方法
続きを見る