WordPressブロックエディタでブログカードを表示させる

ブロックエディタでブログカード

ブログカードは、他の記事へのリンクを視覚的に魅力的に表示するのに役立ちます。

主に以下の2つの方法があります。

1. 「サイトエディター」ブロックを使う（推奨）
2. プラグインを使う

それぞれ詳しく説明します。

1. 「サイトエディター」ブロックを使う（推奨）

WordPress 5.9以降で導入された「サイトエディター」（または「投稿埋め込み」）ブロックは、WordPressのネイティブ機能としてブログカードを作成する最も簡単な方法です。

手順:

1. WordPressの投稿または固定ページを開く: ブロックエディタ（Gutenberg）で編集画面を開きます。
2. 新しいブロックを追加: プラスアイコン（ブロックを追加）をクリックします。
3. 「埋め込み」セクションを探す: 検索バーに「埋め込み」と入力するか、「埋め込み」セクションまでスクロールします。
4. 「投稿埋め込み」または「サイトエディター」ブロックを選択: ブロックによっては「投稿埋め込み」という名称の場合もあります。これをクリックして選択します。
5. URLを入力: ブロックが追加されたら、ブログカードとして表示したい記事のURLをテキストボックスに入力します。
6. 「埋め込み」をクリック: URLを入力したら、「埋め込み」ボタンをクリックします。
7. 自動でブログカードが生成される: WordPressが自動的にURLを解析し、記事のタイトル、アイキャッチ画像、抜粋などを含むブログカード形式で表示してくれます。

この方法の利点:

• WordPressのネイティブ機能: 追加のプラグインが不要で、WordPressの標準機能として動作します。
• 軽量: プラグインに比べてサイトのパフォーマンスに影響を与えにくいです。
• 簡単: URLを入力するだけで自動的に生成されます。

2. プラグインを使う

より高度なカスタマイズオプションや、特定のデザインを求める場合は、プラグインを利用する方法もあります。多くのプラグインが存在しますが、ここでは一般的なものを紹介します。

人気のあるプラグインの例:

• Pz-LinkCard: 日本のユーザーに人気のあるプラグインで、非常に多機能です。デザインのカスタマイズ性が高く、外部リンクだけでなく内部リンクにも対応しています。
• Rich Link Card: シンプルながらも豊富なカスタマイズオプションを持つプラグインです。
• EmbedPress: YouTube動画、Facebook投稿、Googleマップなど、様々な種類の埋め込みに対応しているため、ブログカード以外の埋め込みにも利用できます。

プラグインを使用する一般的な手順:

1. WordPressダッシュボードにログイン:
2. 「プラグイン」>「新規追加」へ移動:
3. プラグインを検索: 上記で紹介したプラグイン名などを検索バーに入力します。
4. インストールして有効化: 目的のプラグインが見つかったら、「今すぐインストール」をクリックし、その後「有効化」をクリックします。
5. 設定（必要に応じて）: プラグインによっては、有効化後に設定画面でデザインや表示方法をカスタマイズする必要があります。
6. ブログカードを作成: ブロックエディタに戻り、プラグインによって追加された専用のブロック（例: Pz-LinkCardのブロック）を探し、そこにリンクしたい記事のURLを入力します。プラグインによってはショートコードを使用する場合もあります。

プラグインの利点:

• 高いカスタマイズ性: デザイン、表示項目（画像、抜粋、公開日など）、ボタンの有無など、細かく設定できることが多いです。
• 特定の機能: 記事の評価、SNSシェアボタンの追加など、ブログカードに付加価値を加える機能を持つものもあります。

プラグインの注意点:

• サイトのパフォーマンス: 多くの機能を持つプラグインは、サイトの表示速度に影響を与える可能性があります。
• 互換性: 他のプラグインやテーマとの相性問題が発生する可能性があります。
• 更新: プラグインが定期的に更新されているか確認し、セキュリティリスクを避けるようにしましょう。

どちらの方法を選ぶべきか？

• シンプルにブログカードを表示したいだけなら、「サイトエディター」ブロックが最も手軽で推奨されます。
• デザインを細かくカスタマイズしたい、または特定の機能を追加したい場合は、プラグインの導入を検討してください。

まずは「サイトエディター」ブロックを試してみて、必要であればプラグインの導入を検討するのが良いでしょう。

メリットとデメリット

WordPressのブログカード（リンクカード）には、記事の見た目やクリック率の向上といったメリットがある一方で、ページの表示速度やユーザビリティに関するデメリットもあります。

以下に主なメリットとデメリットをまとめます。

メリット

1. 視覚的な訴求力の向上:
   • アイキャッチ画像や記事のタイトル、概要などがカード形式で表示されるため、通常のテキストリンクよりも目立ち、読者の興味を引きつけやすいです。
   • 記事のデザイン性が向上し、見栄えが良くなります。
2. クリック率（CTR）の向上:
   • リンク先の情報が分かりやすくなるため、ユーザーが安心してクリックしやすくなり、結果としてクリック率の向上が期待できます。
3. サイト内回遊率の向上・離脱率の低下:
   • 関連記事への導線が分かりやすくなるため、ユーザーがサイト内の他の記事を続けて読む可能性が高まり、サイトの回遊率が向上し、離脱率の低下に繋がります。
4. SEOへの間接的な好影響:
   • 回遊率や滞在時間が増加することは、ユーザー体験が良いとみなされ、間接的にSEOにプラスの影響を与える可能性があります。
5. リンク切れの心配が少ない（内部リンクの場合）:
   • 記事IDを使ってリンクを生成する方式の場合、URLが変わってもリンク切れになりにくいという利点があります（テーマやプラグインによる）。

デメリット

1. ページの読み込み速度の低下:
   • テキストリンクに比べて、画像や多くの情報（タイトル、概要など）を読み込む必要があるため、ブログカードを多用しすぎるとページの表示速度が遅くなる可能性があります。
2. ユーザビリティの低下の可能性:
   • リンク自体が大きくなるため、特にスマートフォンの画面ではスペースを取りすぎてしまい、文章の途中に大量に挿入すると読みにくくなるなど、かえってユーザビリティを損なう場合があります。
3. 広告と間違われる可能性:
   • デザインによってはバナー広告のように見え、ユーザーに敬遠されてクリックされにくくなる可能性があります。
4. リンクの設置場所の制約:
   • テキストリンクのように文章の途中のごく一部の文字間にさりげなく挿入するのは難しく、文章の区切りが良い場所や記事の最後などに設置するのが一般的です。

ブログカードは視覚的に魅力的ですが、上記デメリットを考慮し、多用を避け、記事の内容や文脈に応じてテキストリンクと使い分けることが重要です。

ブログカードとは

ブログカードとは、ウェブサイトやブログ記事へのリンクを、タイトル、アイキャッチ画像、説明文などをまとめて「カード形式」で視覚的に魅力的に表示する方法のことです。通常のテキストリンク（青い下線付きの文字リンク）とは異なり、より多くの情報を一目で伝えられるのが特徴です。

ブログカードの主な構成要素

• タイトル: リンク先の記事のタイトル。
• アイキャッチ画像（サムネイル画像）: リンク先の記事を象徴する画像。
• 説明文（抜粋文）: リンク先の記事の簡単な概要。
• （オプション）ファビコン、サイト名、ソーシャルカウント（いいね数など）

ブログカードのメリット

• 視認性の向上: 画像や装飾があるため、ユーザーの目を引きやすく、リンクの存在が分かりやすくなります。
• クリック率（CTR）の向上: リンク先の情報が視覚的に伝わるため、ユーザーが興味を持ちやすく、クリックされやすくなります。
• ユーザー体験（UX）の向上: リンク先のコンテンツ内容を事前に把握できるため、ユーザーが安心してクリックでき、サイトの回遊率が高まります。
• デザイン性の向上: ページ全体に統一感のあるデザインをもたらし、見た目を良くします。
• SEOへの好影響: ユーザーのサイト滞在時間の増加や回遊率の向上は、SEOにも良い影響を与える可能性があります。

ブログカードのデメリット

• 表示速度の低下: 画像などの情報を読み込むため、多用しすぎるとページの表示速度が遅くなる可能性があります。表示速度はSEOにも影響するため、適切な使用が重要です。
• 広告と間違われやすい: デザインによっては、ユーザーが広告と誤解する可能性があります。

ブログカードの活用例

• 関連記事の紹介: 記事の最後に、関連する他の記事をブログカードで紹介することで、読者の回遊を促します。
• 外部サイトへの紹介: 参考にした情報源や、おすすめのサイトなどをブログカードで紹介し、読者の利便性を高めます。

ブログカードは、ユーザーにとって分かりやすく、魅力的な情報提供を行うための有効なツールです。WordPressなどのCMSでは、専用のブロックやプラグインを利用することで簡単に実装できます。

WordPressブロックエディタでブログカードを表示させる

ブログカードの注意点

ブログカードは、ブログ記事内で他の記事やウェブサイトへのリンクを視覚的に魅力的に表示する方法として広く利用されています。しかし、その利用にはいくつかの注意点があります。以下に主な注意点を挙げます。

1. 読み込み速度への影響

ブログカードは、通常のテキストリンクに比べて画像やメタデータを読み込むため、ページの読み込み速度に影響を与える可能性があります。特に、多くのブログカードを設置したり、表示される画像が大きい場合、サイト全体のパフォーマンスが低下し、ユーザーエクスペリエンスを損なう恐れがあります。

• 対策:
  • ブログカードの数を必要最小限に抑える。
  • 軽量なブログカードプラグインやスクリプトを選ぶ。
  • 画像の遅延読み込み（Lazy Load）を導入する。
  • キャッシュプラグインなどを利用してページの表示速度を最適化する。

2. 表示の崩れや互換性の問題

使用しているテーマやプラグイン、ブラウザのバージョンによって、ブログカードの表示が崩れたり、意図しないレイアウトになったりする可能性があります。また、SNSシェアボタンなど他の要素との干渉も考えられます。

• 対策:
  • 様々なデバイス（PC、スマートフォン、タブレット）やブラウザで表示を確認する。
  • テーマやプラグインのアップデート情報を確認し、互換性の問題が解消されているか確認する。
  • もし表示が崩れる場合は、CSSで調整するか、別のブログカード形式を検討する。

3. 情報の鮮度と正確性

ブログカードは、リンク先のタイトル、ディスクリプション、画像などを自動的に取得して表示することが多いです。しかし、リンク先の情報が更新された場合でも、ブログカードの情報が自動的に更新されないことがあります。古い情報が表示され続けると、ユーザーに誤解を与える可能性があります。

• 対策:
  • 定期的にブログカードの表示内容を確認し、必要に応じて手動で更新する。
  • リンク先の情報が頻繁に変わる可能性のあるものについては、ブログカードの使用を慎重に検討する。

4. 検索エンジン最適化（SEO）への影響

ブログカードがJavaScriptなどで生成されている場合、検索エンジンのクローラーがその内容を正しく認識できない可能性があります。これにより、リンクの評価が伝わりにくくなったり、関連キーワードの認識に影響が出たりする場合があります。

• 対策:
  • HTMLで適切なaタグが生成されているか確認する。
  • rel="nofollow" などが意図せず付与されていないか確認する。
  • セマンティックなマークアップを意識したブログカードを使用する。

5. デザインの一貫性

ブログカードのデザインがサイト全体のデザインと合っていない場合、統一感がなくなり、プロフェッショナルな印象を損なう可能性があります。

• 対策:
  • サイトのテーマやブランドイメージに合ったデザインのブログカードを選ぶか、カスタマイズする。
  • 色、フォント、レイアウトなどをサイト全体で統一する。

6. アクセシビリティ

画像のみで構成されたブログカードや、コントラストが低いデザインのブログカードは、視覚障がいのあるユーザーにとって情報が伝わりにくくなる可能性があります。

• 対策:
  • alt属性を適切に設定し、画像の内容をテキストで説明する。
  • 十分なコントラスト比を確保したデザインにする。
  • キーボード操作でのナビゲーションが可能か確認する。

これらの注意点を理解し、適切に対処することで、ブログカードを効果的に活用し、ユーザーエクスペリエンスの向上とサイトのパフォーマンス維持を両立させることができます。

WordPressは使いやすい

WordPressは、一般的に使いやすいと言えます。

特に、以下のような点で評価されています。

• 直感的な操作性: プログラミングの知識がなくても、見たままの操作で記事の作成や画像の挿入、レイアウト調整などがしやすいように設計されています。
• 豊富な情報とコミュニティ: 世界中で最も使われているCMS（コンテンツ管理システム）の一つであるため、使い方に関する情報がインターネット上に豊富にあり、困ったときも解決策を見つけやすいです。
• カスタマイズの自由度: 「テーマ」と呼ばれるテンプレートや、「プラグイン」という機能拡張のためのプログラムが豊富に用意されており、デザインや機能を追加・変更しやすいです。
• 複数人での管理のしやすさ: ユーザー権限を設定することで、複数の担当者で分担してウェブサイトの更新・運用が可能です。

ただし、デメリットとして、以下のような側面もあります。

• 初期設定の手間: サーバーやドメインの契約、WordPressのインストールなど、ブログサービスなどと比べると初期設定に手間がかかる場合があります。
• セキュリティ対策の必要性: 世界的なシェアが高いため、攻撃の対象になりやすく、自身でセキュリティ対策（定期的なアップデートなど）を行う必要があります。
• カスタマイズには知識が必要な場合も: 高度なデザインの変更や、特定の機能を実現するためには、HTML/CSSなどの専門知識が必要になることもあります。

コンテンツ（記事など）の更新が中心であれば、初心者の方でも比較的容易に始められるツールだと言えるでしょう。

有料WordPressテーマは使いやすい

有料のWordPressテーマは、一般的に使いやすいと言えます。

特に初心者の方にとっては、無料テーマよりも効率よく、質の高いサイトを構築しやすいというメリットが多くあります。

使いやすさに関連する主なメリットは以下の通りです。

• プロが作ったデザインテンプレート: おしゃれで洗練されたデザインが最初から用意されており、手間をかけずに見た目の良いサイトが作れます。
• 豊富な機能とカスタマイズ性:
  • SEO対策や高速表示など、サイト運営に重要な機能が標準で搭載されていることが多いです。
  • コードの知識がなくても、管理画面から直感的にデザインやレイアウトのカスタマイズができるテーマが多いです。
• サポート体制の充実:
  • 初心者向けのマニュアルが充実していたり、購入者専用のサポートフォーラムやメールサポートが用意されていることが多く、困った時に安心です。
• アップデートの保証: セキュリティ対策や新機能への対応など、テーマの定期的なアップデートが保証されているため、長く安心して使い続けられます。

ただし、有料テーマでも高機能ゆえに設定項目が多く、最初はどこから手を付けていいか戸惑う可能性もあります。

購入前にデモサイトやマニュアルの充実度、サポート体制などを確認し、ご自身の目的やスキルレベルに合ったテーマを選ぶことが重要です。

テーマ名	主な特徴・強み	適したサイト
ザ・トール (THE THOR)	国内最高クラスのSEO最適化と高速表示 プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり） アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援	アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト
エマノン (Emanon)	Web集客・ビジネス利用に特化した機能が豊富 CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成 企業サイト、オウンドメディアに適したデザイン WooCommerce対応でネットショップにも利用可能（Premium）	コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト
ストークSE (STORK SE)	「誰が使っても美しいデザイン」を追求したモバイルファースト設計 シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い ブロックエディタに最適化され、直感的な操作が可能 シンプルかつ洗練されたデザインで、汎用性が高い	商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ
リキッドプレス (LIQUID PRESS)	用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている 高いSEO対策と構造化データ対応 多言語対応機能（LIQUID CORPORATEなど） カスタマイザーでの直感的な編集が可能	メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト