WordPressブロックエディタでブログカードを表示させる
WordPressはデフォルトでサイト内のページをブログカードとして表示することができるようになっています。関連する記事などをURLを記述することで、カード形式で表示してくれます。WordPressはデフォルトでサイト内のページをブログカードとして表示することができるようになっています。関連する記事などをURLを記述することで、カード形式で表示してくれます。
>> ブロックエディターハンドブック 公式ページ
ブログカードの作り方
ブログカードを埋め込むには記事内のカードを表示させたいところに移動し段落を作成します。アイテムをすべて表示 → WordPress を選択します。
編集エリアに WordPress URL が表示されるので、表示したいページのURLを記述します。WordPressのブログカードはサイト内のコンテンツ(内部リンク)が対象になっています。外部サイトのURLでも表示されますが安定して表示されない時もあります。
ブログカードとは
ブログカードとは、ブログにリンクを設置する際に使用される機能の1つで、リンク先のタイトルやキャプション、アイキャッチ画像、説明文などをカード形式でまとめて表示します。通常のテキストリンクよりも視認性が高く、遷移先のページの内容を伝えやすいのが特徴です。
ブログカードは、内部リンクと外部リンクのそれぞれに設定することができます。(※WordPressのデフォルトブログカードは原則内部リンク)はてなブログなどのブログサービスでは、リンク先のURLを指定するだけで自動的に生成される場合もあります。
*段落に直接URLを記述しても同様の結果は得られます。
カードにはリンク先のページタイトル、ページの説明文、サイトアイコンとサイト名が表示されます。例では表示させていませんが、アイキャッチ画像を設定していればサムネとして右上に表示されます。ページの説明文はアイキャッチを表示をすると短くされてしまうこともあり、外部リンクを使用する場合は注意が必要です。また、リンク先を新しい窓で開く設定はできません。
プラグインで作成されるブログカードのようにサムネイルの位置を変更したり、補足文の長さを変更したりする機能はありません。デザインを変更するには css(スタイルシート)で対応するしかありません。
ブログカードの配列
ブログカードを2カラムに配置し、横並びで表示することもできます。PCでは横に配列されますが、スマートフォンなどのデバイスでは左側のカードから縦に配列されます。そして、ページの説明文は短めになってしまいます。(ブログカードを横に並べるにはカラムやグリッドを利用して表示させます。)
ブログカードを作成するプラグイン
WordPressにはブログカードを作成してくれるプラグインがあります。URLを入力すれば自動的にカードデザインで表示してくれます。ただし、ブログカードはサーバーのリソースを消費することがあり、表示速度が落ちたりすることもあり注意が必要です。また、デザインが広告に似ていることもあり、ページに広告を表示させている場合には、デザインにも注意が必要です。
ブログカードの注意点
- カードの対象は自サイトの内部リンク
- リンク先を新しい窓で開けない
- 記事内に多数のカードを配置するとブログカードとして表示されないことがある
- ページの説明文の長さは自動で調整される
WordPressのブロックエディタ(Gutenberg)は直感的に編集できる優れたエディタですが、記事を装飾したり、レイアウトデザインをしたいときには少し戸惑うこともあるかもしれません。編集機能がサポートされているテーマを利用すと悩みを解決できるかも。凝ったデザインや複雑なレイアウトを提供してくれる業者やフリーターを探すサービスも利用価値があるのでは?
ブロックエディタの使い方
-
WordPressブロックエディタのグリッドとカラムの使い方
ブロックエディタにはレイアウトをデザインするために カラム と グリッドがあります。どちらもブロックを分割して…
-
WordPressブロックエディタの編集モードの使い方
WordPressには記事を編集するためのエディタとして、ブロック・ビジュアル・テキストの3のエディタが用意さ…
-
WordPressブロックエディタでブログカードを表示させる
WordPressはデフォルトでサイト内のページをブログカードとして表示することができるようになっています。関…
-
WordPressブロックエディター再利用ブロックの使い方
WordPressのデフォルトエディタ Gutenberg には指定したブロックを簡単に違う記事に貼り付けるこ…
-
WordPressブロックエディタのレスポンシブ対応カラムデザインの使い方
CSSをカスタマイズしなくてもカラムデザインが簡単にできます。ページを 2 ~ 3列に分割して、それぞれに画像…
-
WordPressGutenbergのコードエディタの使い方
Gutenberg は、 ブロックエディタとも呼ばれ、段落(文章)や画像、見出し等をブロック単位でHTMLやC…
-
WordPressブロックエディターでタグをチェックボックスにして使いやすくする
WordPressでは編集時にタグ名を直接入力する仕様になっていて、使いがっては少し不便です。カテゴリーのよう…
-
WordPress【Gutenberg】のブロック要素の使い方を解説
Gutenbergは、WordPress サイトの構築および発行におけるまったく新しいパラダイムのコードネーム…
-
Gutenberg(WordPressブロックエディタ)は何時から使用(移行)すべきか
WordPress Ver.5.0以上からのビジュアルエディターになりました。Gutenberg は、ブロック…
ブロックエディタ関連のプラグイン
-
SimpleTOCはGutenbergブロックで目次を作成するプラグイン
SimpleTOCは投稿やページに目次ブロックを追加します。TOC は、記事またはページで見つかったすべての見…
-
VK Block Patternsはブロックパターンを記事に貼り付けるプラグイン
VK Block Patternsはブロックパターンを登録し記事に貼り付けることができるプラグインです。ブログ…
-
Gutenberg Editor Full Width Blocks Borderは編集画面で段落を枠線で見やすくするプラグイン
Gutenberg Editor Full Width Blocks Borderはページ編集画面で段落を枠線…
-
VK Block PatternはGutenbergのブロックパターンを作成するプラグイン
VK Block Patternsは有効化すると、カスタムブロックパターン用のカスタム投稿タイプが作成できるプ…
-
Classic EditorはGutenbergと旧エディタを切り替えるプラグイン
Classic EditorはWordPress 5.0から採用された新しいエディタ Gutenberg を旧…
プロモーション
wordpress.org で公開されているテーマは無料で利用できることが魅力ですが、カスタマイズやプラグインの導入などが必要です。その点、有料テーマはカスタマイズの柔軟性が高く、プラグインを利用しなくてもサイトの運用が可能です。