AFFINGER6で記事の中にブログカードを表示させる方法を徹底解説！【画像・動画】

2024年1月8日 2024年5月12日

前回の記事

: 【画像と動画で】AFFINGER6で記事カードを表示させる方法『３つ』を徹底解説！
AFFINGER6を使っているサイト・ブログでトップページに記事カードを表示させる方法を画像と動画を使ってやさしく・くわしく徹底解説しちゃいます！
続きを見る

ブログ内に、上にあるような『ブログカード』を表示しているサイトをよく見かけると思います。

アイキャッチ画像と記事タイトル、記事の抜粋などが表示され、ついついクリックしたくなるブログカード。

これやってみたかったんだよね。どうやってやるの？

後輩ネコ

と思っている皆さんに、今回の記事ではAFFINGER6で記事内にブログカードを表示させる方法を画像と動画を使って初心者さん向けにやさしく詳しく解説してみたいと思います。

解説ポイント

ブログ内の他のページ(内部リンク)をブログカードで表示する方法
外部サイトのページ(外部リンク)をブログカードで表示する方法

ブログカードがあればボクのサイトの見栄えがもっと良くなるかな…。

後輩ネコ

とのぽん

見栄えの良いブログカードはサイトの回遊率アップにもつながる可能性があるからしっかり見ていこう！

ブログ内の他のページ(内部リンク)をブログカードで表示する方法

字幕動画解説

クラシックブロック『カード』で表示させる方法
クラシックブロック『タグ』で表示させる方法

AFFINGER6には内部リンクを見栄えのいいブログカードとして表示させる機能が標準で備わっています。

ブログ内の他のページ(内部リンク)を記事内にブログカードで表示させる方法は上記の2点があるのでそれぞれ見ていきましょう。

ブロックエディターでなくクラシックエディターを使っている方も多いかと思いますが、クラシックブロックはクラシックエディターをブロック状にしたものなので、以下の方法はクラシックエディターでもほぼ同じ操作になります。

クラシックブロックの『カード』で表示させる方法

まずはクラシックブロックの『カード』で内部リンクをブログカードで表示させる方法について解説していきます。

操作手順

段落ブロック右の『＋』ボタンをクリック
一覧から『クラシック』ブロックを選択して記事内に挿入
- 一覧にない場合は『すべて表示』から探す。
クラシックブロックのツールバーにある『カード』をクリック
- ブロック内にショートコードが挿入されます。
ショートコード内の『id=""』にブログカードにしたい記事のIDを入力
- 記事IDが『225』なら『id="225"』のようになります。

クラシックブロックの『カード』を使って内部リンクをブログカード表示する方法は、上の画像と、流れを確認しながら操作をおこなってみてください。

記事IDとは

記事IDはワードプレスの投稿一覧の記事タイトル横に表示されています。

上の画像のように、タブにある『ID』列にある数字が記事IDになります。

カスタマイズ

ショートコード内でカスタマイズ
カスタマイザーでカスタマイズ

クラシックブロックの『カード』で表示したブログカードの見た目などをカスタマイズするには上記2点の方法があります。

それぞれについてみていきましょう。

ショートコード内でカスタマイズ

カスタマイズ項目(一部省略)

ショートコードの単語	『""』内に入力した時の変化
label	カードにラベルが付き、入力した文字がラベルに表示される
name	もともとあるタイトルが書き替えられる
bgcolor	HTMLカラーコード入力でラベルの背景色を変更
color	HTMLカラーコード入力でラベル内の文字色を変更

表は左右にスライドできます。

クラシックブロック『カード』のショートコード内で、その都度カスタマイズをする方法は上記の画像を参考に操作してみてください。

記事を書くその都度カスタマイズするのが面倒くさいという場合は、カスタマイザーを使ってデフォルトのカードの見た目を変更することもできます。

カスタマイザーによるデフォルト変更方法は以下で解説していきます。

カスタマイザーでカスタマイズ

ワードプレスサイドバーより『外観』⇒『カスタマイズ』とすすむ
右画面(ライブプレビュー)にブログカードを表示させておく
- 公開済みの記事内にあるブログカードを表示させましょう。
サイドバーから『オプション(その他)』をクリック
サイドバーから『ブログカード/ラベル』をクリック

ワードプレスのカスタマイザーを使って、カードの初期状態(デフォルト)の見た目を変更しておく方法を解説します。

まずは、画像と、上記の流れを見ながら操作を進めてください。

カスタマイズ項目	変化する点
枠線	ブログカードに指定した色の枠線がつく
枠線を太くする(3px)	チェックを入れると枠線が太くなる
ラベル背景色	ラベルの背景色が指定した色に変更
ラベルテキスト色	ラベル内文字色が指定した色に変更
ラベルデザイン	チェックをつけたデザインにラベルデザインが変更

表は左右にスライドできます。

ブログカードは上記の5つの項目をカスタマイズして、デフォルトの見た目を簡単に変更できます。

記事内に挿入したショートコードをいちいち変更するのではなく、常に決まったデザインでブログカードを呼び起こしたいという場合は、こちらであらかじめカスタマイズしておくといいでしょう。

クラシックブロックの『タグ』で表示させる方法

続いて、クラシックブロックの『タグ』を使って内部リンクをブログカードで表示させる方法について解説していきます。

クラシックブロック『カード』はデフォルトではややシンプルでカスタマイズの必要がありました。

一方『タグ』ではカラーを除いたデザインが初めからいくつか用意されています。

操作手順

段落ブロック右の『＋』ボタンをクリック
一覧から『クラシック』ブロックを選択して記事内に挿入
- 一覧にない場合は『すべて表示』から探す。
クラシックブロックのツールバーにある『タグ』をクリック
ドロップダウンで『記事一覧/カード』にカーソルを合わせる
ドロップダウンで『ブログカード』にカーソルを合わせる

まずは画像と、上記を見ながら操作を進めてください。

『タグ』の『ブログカード』には4つのデザインが用意されているのでこれを適宜挿入していきます。

『タグ』の『ブログカード』には上の画像にあるように

参考
CHECK(ふきだし)
サムネイルなし
影なし

の4つのデザインが用意されています。

ラベルカラーなどはあとでお好みに変更する必要がありますが、最初からデザインが決まっているので手間が省けるでしょう。

画像では割愛していますが、ショートコード内の『id=""』に記事IDを入力してご利用ください。

カスタマイズ

クラシックブロック『タグ』で表示したブログカードの

参考
サムネイルなし
影なし

のカスタマイズについては基本的に、クラシックブロックの『カード』で表示させたブログカードのショートコード内でのカスタマイズと同じ方法でカスタマイズできるので割愛します。

CHECK(ふきだし)に関しては吹き出しのカラー変更が少し他と違うのでこちらを見ていきます。

CHECK(ふきだし)のブログカードはショートコードがふきだし部分とカード部分で分かれています。

ふきだし部分のショートコードは

[st-minihukidashi webicon="st-svg-check" fontsize="" fontweight="bold" bgcolor="#FFECB3" color="" margin="0 0 0 0" radius="30" position="" add_boxstyle=""]こちらもCHECK[/st-minihukidashi]

の部分で、これを変更することでふきだしをカスタマイズできます。

基本的にはふきだしの背景色・文字色を変更する(上のコードの赤マーカーが引かれた2つ)というのが良く使うカスタマイズなので、そちらを画像に載せておきました。

『こちらもCHECK』という文章も適宜変更してみてください。