今回は、ブログによく見られる「ブログカード」の表示方法を解説します。
▼ブログカードとはこちらのこと▼
ブログの離脱率を低くでき、ブログ運営を効果的に進められます。
Gutenbergになって、ブログカードを表示させるのに迷った経験があったので、今回は覚え書き用に記事にしています。
記事IDもいらず、作成がとても簡単になったので、アフィンガー5からの変更点も含めて、解説していきますね。
ブログカードの作り方
「埋め込み」のブロックを追加する
ブロックの追加(+ボタン)を押して、「埋め込み」を選択します。
「埋め込み」ボタンが出てこない時は、この記事の下に対処法を書いています。
![ブロックの追加(+ボタン)を押して、「埋め込み」を選択](https://kobitoliving.net/wp-content/uploads/2021/01/スクリーンショット-2021-01-31-12.06.45.png)
URLを入力する
入力ボックスに表示させたい「URL」を貼り付けし「埋め込み」ボタンかEnterキーを押します。
![入力ボックスに表示させたい「URL」を貼り付け](https://kobitoliving.net/wp-content/uploads/2021/01/スクリーンショット-2021-01-31-12.08.58.png)
【AFFINGER5▶︎6の変更点】記事IDではなく、URLを入力する方式になりました。
入力が終わると、管理画面ではこんな風になります。
![](https://kobitoliving.net/wp-content/uploads/2021/01/スクリーンショット-2021-01-31-12.09.28.png)
ブログカードに「ラベル」を表示する方法
次に、ブログカードの右上のリボン部分(ラベル)をつくっていきます。
![ブログカードの右上のリボン部分(ラベル)をつける](https://kobitoliving.net/wp-content/uploads/2021/02/スクリーンショット-2021-02-10-13.00.04.png)
【AFFINGER5▶︎6の変更点】ラベルが左側から右側に移動しています。
AFFINGER5では、たすき掛けタイプとリボンタイプが選べましたが、リボンタイプ1種類になったみたいです。
ラベルの文字を入力する
ラベルの文字は、「キャプション」に入力していきます。
「キャプション」を表示させるには、ブログカードの少し下の辺りをクリックします。
![ブログカードの右上のリボン部分(ラベル)をつける](https://kobitoliving.net/wp-content/uploads/2021/01/スクリーンショット-2021-01-31-12.23.53.png)
「キャプション」と出てくるので、表示したい文字を入力します。
![ブログカードの右上のリボン部分(ラベル)をつけるためのキャプションを表示](https://kobitoliving.net/wp-content/uploads/2021/01/スクリーンショット-2021-01-31-12.25.25.png)
これで、リボン部分ができあがりです。
リボンの色を変更する
リボンの色は、カスタマイザーから変更できます。
カスタマイザー>「オプション(その他)」>「ブログカード / ラベル」と進んでください。
![ブログカードのカスタマイズ](https://kobitoliving.net/wp-content/uploads/2021/02/スクリーンショット-2021-02-10-13.20.09.png)
いちばん下のラベルデザインは「リボンデザイン」しか使えないようです。(「デフォルト」を選んでも変更されませんでした。)
「埋め込み」が出てこない時の対処法
もしも「埋め込み」ブロックが選択できない時は、画面の右上の点々「:」をクリック。
次に、「ブロックマネージャー」を選択します。
![グーテンベルグのブロックマネージャーの表示方法](https://kobitoliving.net/wp-content/uploads/2021/01/スクリーンショット-2021-01-31-12.16.52.png)
ブロックマネージャーで「埋め込み」が選択になっていないと、ブロックを追加しようとしても出てこないので、チェックを入れておきます。
![ブロックマネージャーの表示方法](https://kobitoliving.net/wp-content/uploads/2021/01/スクリーンショット-2021-01-31-11.57.12-1.png)
まとめ
今回は、AFFINGER6(Gutenberg)で内部リンク用ブログカードを表示させる方法を解説しました。
いったんできるようになれば、簡単に使えるので、ぜひやってみてくださいね!