WordPressブロックエディタでブログカードを表示させる
WordPressはデフォルトでサイト内のページをブログカードとして表示することができるようになっています。関連する記事などをURLを記述することで、カード形式で表示してくれます。WordPressはデフォルトでサイト内のページをブログカードとして表示することができるようになっています。関連する記事などをURLを記述することで、カード形式で表示してくれます。
目次
ブログカードの作り方
ブログカードを埋め込むには記事内のカードを表示させたいところに移動し段落を作成します。アイテムをすべて表示 → WordPress を選択します。
編集エリアに WordPress URL が表示されるので、表示したいページのURLを記述します。WordPressのブログカードはサイト内のコンテンツ（内部リンク）が対象になっています。外部サイトのURLでも表示されますが安定して表示されない時もあります。
ブログカードとは
ブログカードとは、ブログにリンクを設置する際に使用される機能の1つで、リンク先のタイトルやキャプション、アイキャッチ画像、説明文などをカード形式でまとめて表示します。通常のテキストリンクよりも視認性が高く、遷移先のページの内容を伝えやすいのが特徴です。
ブログカードは、内部リンクと外部リンクのそれぞれに設定することができます。（※WordPressのデフォルトブログカードは原則内部リンク）はてなブログなどのブログサービスでは、リンク先のURLを指定するだけで自動的に生成される場合もあります。
＊段落に直接URLを記述しても同様の結果は得られます。
カードにはリンク先のページタイトル、ページの説明文、サイトアイコンとサイト名が表示されます。例では表示させていませんが、アイキャッチ画像を設定していればサムネとして右上に表示されます。ページの説明文はアイキャッチを表示をすると短くされてしまうこともあり、外部リンクを使用する場合は注意が必要です。また、リンク先を新しい窓で開く設定はできません。
プラグインで作成されるブログカードのようにサムネイルの位置を変更したり、補足文の長さを変更したりする機能はありません。デザインを変更するには css（スタイルシート）で対応するしかありません。
ブログカードの配列
ブログカードを２カラムに配置し、横並びで表示することもできます。PCでは横に配列されますが、スマートフォンなどのデバイスでは左側のカードから縦に配列されます。そして、ページの説明文は短めになってしまいます。（ブログカードを横に並べるにはカラムやグリッドを利用して表示させます。）
ブログカードの注意点
- カードの対象は自サイトの内部リンク
- リンク先を新しい窓で開けない
- 記事内に多数のカードを配置するとブログカードとして表示されないことがある
- ページの説明文の長さは自動で調整される
WordPressのブロックエディタ（Gutenberg）は直感的に編集できる優れたエディタですが、記事を装飾したり、レイアウトデザインをしたいときには少し戸惑うこともあるかもしれません。編集機能がサポートされているテーマを利用すと悩みを解決できるかも。凝ったデザインや複雑なレイアウトを提供してくれる業者やフリーターを探すサービスも利用価値があるのでは？
WordPressサイト制作、ウェブデザイン、サイト修正の外注依頼先を探せるココナラです。フリーランスや制作会社所属の腕利きクリエイターが多数登録。制作実績・スキル・料金・口コミなどの情報で簡単に比較検討できます。
Webサイト制作・Webデザインを依頼
