WordPressでブログカードを簡単に作る方法｜自動表示・プラグイン・カスタマイズ完全ガイド
「WordPressのブログで、他の人みたいにURLを貼るだけでおしゃれなカードを表示したい」
そう思ったことはありませんか？
そんな時にはブログカードがオススメです
ブログカードは、ただのリンクよりも見た目が整い、クリック率が上がる便利な機能です。
内部リンクの回遊率を高めたり、外部サイトをわかりやすく紹介できるなど、SEO面でもメリットがあります。
この記事では、WordPressでブログカードを設置する3つの方法を中心に、初心者でもすぐに実践できる手順を解説します。
さらに、人気テーマ別の設定方法や、おしゃれに見せるデザインのコツ、SEO上の注意点まで徹底的に紹介します。
ブログカードとは？【WordPressでの意味と役割】
ブログカードとは、URLをテキストリンクとして貼る代わりに、
タイトル・サムネイル画像・抜粋文などを自動でカード化して表示する機能のことです。
たとえば「関連記事はこちら」とURLを貼るだけでは地味ですが、ブログカードなら画像付きで目を引きます。
このブログでいうと、下記のようなものがブログカードとなります。
ユーザーが直感的に「このリンクはどんな内容なのか」を理解できるため、クリック率（CTR）が向上します。
SEO的にも、内部リンクの最適化に役立ちます。
記事同士をカードでつなげることで、滞在時間が伸び、結果的にGoogleからの評価も上がりやすくなるのです。
WordPressでブログカードを作る3つの方法
WordPressでは、次の3つの方法でブログカードを実装できます。
① テーマ機能で自動ブログカードを使う
最近のWordPressテーマには、URLを貼るだけでブログカードを自動生成する機能が備わっています。
代表的なテーマは以下の通りです。
- Cocoon：内部リンク・外部リンクともに自動カード化可能
- SWELL：専用ブロックで美しいデザインカードを挿入可能
- JIN・AFFINGER：カスタムショートコードで柔軟な設定が可能
たとえばCocoonの場合、投稿画面でURLを1行だけ貼れば、自動的にカード形式で表示されます。
外部サイトをカード化する際は、Cocoon設定で「外部リンクカードを有効にする」にチェックを入れるだけです。
WordPressのオススメテーマについては過去の記事でもご紹介しています。
ECサイト向けのテーマという形で紹介していますが、CocoonやLightning等はブログにもオススメなテーマです。
② プラグインでブログカードを作る
テーマに機能がない場合は、プラグインを使う方法が簡単です。
中でも人気なのが「Pz-LinkCard」です。
インストール方法：
- WordPress管理画面 → プラグイン → 新規追加
- 「Pz-LinkCard」で検索
- インストール → 有効化
設定方法：
投稿画面でURLを1行貼ると、自動でカード化されます。
外部リンクのサムネイルや抜粋文を取得し、デザインも自由に変更可能です。
管理画面から「リンクカード設定」を開くと、枠線の色・背景色・フォントなどを細かく調整できます。
テーマデザインに合わせて統一感を出せるのが魅力です。
③ 手動でHTML＋CSSを使って自作する方法
「プラグインを増やしたくない」「表示速度を重視したい」という方には、 HTML＋CSSでの自作もおすすめです。
以下のようなシンプルなコードでブログカードを作ることができます。
<div class="blog-card"> <a href="https://example.com"> <img src="https://example.com/thumbnail.jpg" alt="記事タイトル" /></a> <div class="card-content"> <h3>記事タイトル</h3> ここに短い説明文を入れます。 </div> </div>
そしてCSSでデザインを調整します。
.blog-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
display: flex;
margin: 16px 0;
}
.blog-card img {
width: 120px;
height: 80px;
object-fit: cover;
}
.blog-card .card-content {
padding: 8px 12px;
}
この方法は軽量で、自由にカスタマイズできます。
WordPressのoEmbed機能を使えば、URLから自動的にタイトル・画像を取得することも可能です。
人気テーマ別｜ブログカードの設定方法まとめ
Cocoonの場合
URLをそのまま貼るだけで自動カード化。
外部リンクカードはCocoon設定 →「カード」タブで有効化。
デザインの変更もテーマ設定で簡単に行える。
SWELLの場合
「ブログカードブロック」を使うと、カードデザインを自由にカスタマイズ可能。
内部リンクをカード化して、関連記事への導線を自然に作れます。
JIN・AFFINGERの場合
独自のショートコードを使ってカードを挿入可能。
クリック率を分析したい場合、AFFINGERのリンク管理機能も便利。
おしゃれなブログカードを作るデザインのコツ
- サムネイル画像を明るく統一する
暗い画像はクリック率が下がる傾向があります。 - カードの余白と枠線で整える
シンプルでも清潔感があり、テーマ全体に馴染みやすくなります。 - ホバーエフェクトを追加する
マウスを載せたときに軽く浮くようなアニメーションを付けると、かなり本格的なブログという印象になります。
ブログカードを使う時のSEO注意点
- 同一ページ内に同じリンクカードを複数配置しすぎない
- 外部リンクカードには rel=”nofollow noopener noreferrer” を付与
- サムネイル画像は圧縮して表示速度を落とさない
また、Googleは「画像や内部リンクを使ってコンテンツの関連性を示すこと」を推奨しています。
その意味でも、ブログカードはSEO的に有効な内部リンク強化手段といえます。
ブログカードが表示されない時の対処法
- URLの先頭に「https://」が抜けていないか確認
- oEmbed機能（埋め込み機能）が無効になっていないか確認
- キャッシュプラグインの影響で表示が更新されない場合は、一度削除して再保存
テーマやプラグインの競合も原因になりやすいため、トラブルが発生したら一度すべて無効化して確認しましょう。
SNSカードとの違い
ブログカードはサイト内のリンク装飾用ですが、
SNSカード（OGP設定）はTwitterやLINEなどで共有したときの見た目を整えるものです。
どちらも「見た目＋クリック率」を高める点では共通しているため、
ブログカードとOGPの両方を整えることで、ブログ全体の印象が大きく向上します。
まとめ：WordPressのブログカードで回遊率と見栄えをアップ！
ブログカードは、読者の離脱を防ぎ、記事の回遊率を高める強力な武器です。
URLを貼るだけで自動カード化できるテーマを使うのが最も手軽ですが、
こだわるならプラグインやHTMLで自作して、自分好みのデザインにするのもおすすめです。
SEO的にも、カード化された内部リンクはクリック率・滞在時間・サイト構造の明確化に貢献します。
ぜひ、あなたのWordPressサイトにも「見た目と機能を両立したブログカード」を導入してみましょう。
