ブログ運営

【AFFINGER6】内部リンク用ブログカードを表示させる方法(初心者向け)Gutenberg対応

Gutenbergのアフィンガー6でブログカードを表示させる方法

今回は、ブログによく見られる「ブログカード」の表示方法を解説します。

▼ブログカードとはこちらのこと▼
ブログの離脱率を低くでき、ブログ運営を効果的に進められます。

あわせて読みたい

Gutenbergになって、ブログカードを表示させるのに迷った経験があったので、今回は覚え書き用に記事にしています。

記事IDもいらず、作成がとても簡単になったので、アフィンガー5からの変更点も含めて、解説していきますね。

ブログカードの作り方

「埋め込み」のブロックを追加する

ブロックの追加(+ボタン)を押して、「埋め込み」を選択します。
「埋め込み」ボタンが出てこない時は、この記事の下に対処法を書いています。

ブロックの追加(+ボタン)を押して、「埋め込み」を選択

URLを入力する

入力ボックスに表示させたい「URL」を貼り付けし「埋め込み」ボタンかEnterキーを押します。

入力ボックスに表示させたい「URL」を貼り付け

【AFFINGER5▶︎6の変更点】記事IDではなく、URLを入力する方式になりました。

入力が終わると、管理画面ではこんな風になります。

ブログカードに「ラベル」を表示する方法

次に、ブログカードの右上のリボン部分(ラベル)をつくっていきます。

ブログカードの右上のリボン部分(ラベル)をつける

【AFFINGER5▶︎6の変更点】ラベルが左側から右側に移動しています。

AFFINGER5では、たすき掛けタイプとリボンタイプが選べましたが、リボンタイプ1種類になったみたいです。

ラベルの文字を入力する

ラベルの文字は、「キャプション」に入力していきます。

「キャプション」を表示させるには、ブログカードの少し下の辺りをクリックします。

ブログカードの右上のリボン部分(ラベル)をつける

「キャプション」と出てくるので、表示したい文字を入力します。

ブログカードの右上のリボン部分(ラベル)をつけるためのキャプションを表示

これで、リボン部分ができあがりです。

リボンの色を変更する

リボンの色は、カスタマイザーから変更できます。
カスタマイザー>「オプション(その他)」>「ブログカード / ラベル」と進んでください。

ブログカードのカスタマイズ

いちばん下のラベルデザインは「リボンデザイン」しか使えないようです。(「デフォルト」を選んでも変更されませんでした。)

「埋め込み」が出てこない時の対処法

もしも「埋め込み」ブロックが選択できない時は、画面の右上の点々「:」をクリック。

次に、「ブロックマネージャー」を選択します。

グーテンベルグのブロックマネージャーの表示方法

ブロックマネージャーで「埋め込み」が選択になっていないと、ブロックを追加しようとしても出てこないので、チェックを入れておきます。

ブロックマネージャーの表示方法

まとめ

今回は、AFFINGER6(Gutenberg)で内部リンク用ブログカードを表示させる方法を解説しました。

いったんできるようになれば、簡単に使えるので、ぜひやってみてくださいね!

-ブログ運営