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