Gutenberg(WordPressブロックエディタ)でブログカードを埋め込む方法

WordPressはデフォルトでサイト内のページをブログカードとして表示することができるようになっています。関連する記事などをURLを記述することで、カード形式で表示してくれます。

ブログカードを埋め込むには記事内のカードを表示させたいところに移動し段落を作成します。アイテムをすべて表示 → WordPressを選択します。

編集エリアに WordPress URL が表示されるので、表示したいページのURLを記述します。WordPressのブログカードはサイト内のコンテンツ(内部リンク)が対象になっています。外部サイトのURLでも表示されますが安定して表示されない場合もあります。

*段落に直接URLを記述しても同様の結果は得られます。

カードにはリンク先のページタイトル、ページの説明文、サイトアイコンとサイト名が表示されます。例では表示させていませんが、アイキャッチ画像を設定していればサムネとして右上に表示されます。ページの説明文はアイキャッチを表示をすると短くされてしまうこともあり、外部リンクを使用する場合は注意が必要です。また、リンク先を新しい窓で開く設定はできません。

ブログカードとは

リンクの設置方法の1つで、リンク先のタイトルやアイキャッチ画像、説明文などをカード形式で表示するものです。内部リンクと外部リンク用にそれぞれ設定することができ、通常のテキストリンクよりもリンク先の内容を分かりやすく、目立たせることができます。

ブログカードのメリットとしては、次のようなことが挙げられます。

  • ユーザーの視認性が高い
  • 遷移先のページの内容を伝えやすい

ブログカードは、見出しごとの文末やページの下部にリンクを挿入する際に適しています。

ブログカードの配列

ブログカードを2カラムに配置し、横並びで表示することもできます。PCでは横に配列されますが、スマートフォンなどのデバイスでは左側のカードから縦に配列されます。そして、ページの説明文は短めになってしまいます。

ブログカードの注意点

  • カードの対象は自サイトの内部リンク
  • リンク先を新しい窓で開けない
  • 記事内に多数のカードを配置するとブログカードとして表示されないことがある
  • ページの説明文の長さは自動で調整される