はじめに
この記事の目的
この連載では、WordPressのCocoonテーマで内部リンクを「ブログカード」形式で貼る方法を、初心者の方にも分かりやすく解説します。設定手順からラベルの付け方、表示されないときの原因と対処、見た目のカスタマイズまでを網羅します。
対象読者と前提
- WordPressを使っている方
- Cocoonテーマが有効になっていること
- 投稿や固定ページの編集ができること
なぜブログカードを使うか
ブログカードは記事へのリンクをカード形式で表示し、タイトル・サムネイル・説明が一目で分かります。見た目が整い、読者のクリック率向上が期待できます。スマホでも見やすく、関連記事や導線を自然に示せます。
本連載で学べること（簡単な一覧）
- Cocoonでのブログカード有効化と内部リンクの貼り方
- ラベルや文言の設定方法
- 表示されないときのチェックポイントと解決策
- CSSやレイアウトでの見た目調整の基本
次章からは、実際の操作手順を画面イメージに沿って丁寧に説明していきます。初心者の方も安心して進めてください。
ブログカードとは？
概要
ブログカードは、リンク先の記事の情報をカード形式で表示する機能です。Cocoonテーマで使える機能として、タイトル・アイキャッチ画像・説明文（抜粋）などを視覚的に見せられます。内部リンク・外部リンクの両方に対応し、読者にとって分かりやすい導線を作れます。
主な構成要素
- アイキャッチ画像：記事の雰囲気を伝えます。
- タイトル：リンク先の主題が一目で分かります。
- 説明文（抜粋）：短い要約で興味を引きます。
- URLや投稿日（テーマ設定により表示）
内部リンクと外部リンクの違い
内部リンクはサイト内の記事を指し、Cocoonは自動で抜粋やサムネイルを引き出します。外部リンクは相手サイトのOGPやメタ情報を参照してカードを生成するため、表示が限定されることがあります。
利点と利用場面
- 視覚的に目を引き、クリック率が上がりやすいです。
- 関連記事の紹介や記事下の導線、サイドバーでの表示に向きます。
具体例（イメージ）
記事Aの末尾に「関連記事」としてブログカードを並べると、読者が他の記事に移動しやすくなり、回遊が促進されます。
次章では、Cocoonでの具体的な設定手順（内部リンクの場合）を丁寧に説明します。
ブログカードの設定手順（内部リンクの場合）
概要
記事内に自分のサイトの別記事を簡単に紹介できる「ブログカード」を、内部リンクで設定する手順を丁寧に説明します。スマホでも同様の操作が可能です。
手順（ステップごと）
- 記事編集画面で「ブロックを追加」をクリックします。
- 検索窓に「ブログカード」と入力し、表示された「ブログカード」ブロックを選択します。
- リンク先のURLを用意します。サイト内の記事なら、記事一覧からURLをコピーするか、該当記事を開いてアドレスバーのURLをコピーしてください。
- ブログカードブロックにURLを貼り付けます。相対パス（例：/2025/01/sample）でもフルURLでも動作します。
- Enterキーを押して確定すると、自動でプレビューが表示されます。
- 表示を確認し、問題なければ保存して公開します。
注意点とコツ
- プレビューが出ない場合はURLの末尾のスラッシュを削除して再試行してください。公開前の記事はプレビューできないことがあります。
- 誤クリックを避けるため、説明文やラベルは分かりやすく書きます（ラベル設定は第4章で詳述）。
- テストとして、公開済みの別記事に貼って動作を確認すると安心です。
ブログカードのラベル設定
ラベルとは
ブログカードに表示する短いテキストです。デフォルトは「ラベルなし」ですが、表示することで読者にリンクの目的を伝えやすくなります。たとえば「関連記事」「あわせて読みたい」「解説」などが使われます。
設定方法（簡単手順）
- 編集画面で該当のブログカードを選択します。
- 右側の設定ウィンドウを開きます。
- 「ラベル」項目から既定の候補を選ぶか、テキスト欄に任意の文字を入力します。
- 保存してプレビューで確認します。
おすすめのラベルと使い分け
- 関連記事：同じテーマの別記事へ誘導するとき
- あわせて読みたい：補足情報や入門向けの記事へ導くとき
- 解説：専門用語や背景説明の記事に付けると効果的です
デザインと長さのコツ
ラベルは1〜3語にまとめます。長すぎるとカードの見た目が崩れやすいです。フォントサイズや余白もチェックして視認性を保ちましょう。
アクセシビリティの配慮
ラベルは意味が伝わる語を選んでください。画面リーダーを使う読者にもわかる簡潔な表現が望ましいです。
ブログカードの表示がされない場合の原因と解決方法
はじめに
ブログカードが表示されないときは原因を順に潰すと早く直せます。ここではよくある原因と、対処手順をわかりやすく案内します。
1. Cocoon設定で「ブログカード表示を有効にする」がチェックされていない
- 原因：テーマの設定で機能がオフになっていると、どんなにURLを入れても表示されません。
- 解決方法：
- WordPress管理画面→Cocoon設定を開きます。
- 「ブログカード表示を有効にする」にチェックを入れます。
- 保存して、表示を確認します。キャッシュがある場合はブラウザやサイトキャッシュをクリアしてください。
2. URLの入力が間違っている
- 原因：URLにタイプミスがある、HTTP/HTTPSの違い、パラメータや末尾のスラッシュのせいで認識されないことがあります。
- 解決方法：
- 表示したいページのアドレスバーからURLをコピーします。例：https://example.com/sample-post
- ブログカードに貼り付けて保存します。余分な文字や追跡パラメータ（?utm=…）があれば削除してください。
- 別のブラウザやプライベートウィンドウで確認すると確実です。
3. ブログカードブロックが正しく挿入されていない
- 原因：ブロックエディタで別のブロック（段落やリンク）として挿入しているとカード表示になりません。
- 解決方法：
- 投稿編集画面でブロック追加→「ブログカード」または「Cocoonブログカード」を選びます。
- 専用ブロックのURL入力欄にリンクを入れます。
- 保存して公開ページで見たときにカードになるか確認します。
その他の確認項目
- キャッシュの影響：キャッシュ系プラグインやCDNを使っている場合は一度キャッシュをクリアしてください。
- プラグインの競合：一時的にプラグインを無効にして表示を確認します。特にキャッシュやコード最適化系が影響しやすいです。
- テーマ・WordPressの更新：古いバージョンだと不具合が出ることがあります。更新前にバックアップを取ってから実行してください。
- パーマリンク設定の再保存：設定→パーマリンクで「変更を保存」を押すと解決する場合があります。
トラブルが続く場合
自分で直せない場合は、問題が起きている画面のスクリーンショットと発生手順を用意して、CocoonサポートやWordPressフォーラムに相談してください。バックアップをとってから作業すると安心です。
ブログカードのカスタマイズ方法
概要
ブログカードはCSSと少しのHTMLで見た目を大きく変えられます。初心者でもコピー＆ペーストで試せる具体例を中心に説明します。
色やラベルの変更
ラベル（例：「関連記事」「あわせて読みたい」）は背景色と文字色を変えるだけで印象が変わります。例:
.card-label{background:#FFB74D;color:#fff;padding:4px 8px;border-radius:4px}
レイアウト調整（画像・テキストの配置）
サムネイルを左、テキストを右にする基本レイアウト:
.card{display:flex;gap:12px;align-items:center}
.card img{width:120px;height:80px;object-fit:cover;border-radius:6px}
ホバー効果と影
マウスを乗せたときに立体感を出す例:
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,0.12);transform:translateY(-4px);transition:.18s}
実践：コピペで使えるHTML
<a class="card" href="/sample-post">
<img src="/thumb.jpg" alt="">
<div>
<div class="card-label">関連記事</div>
<h3>記事タイトル</h3>
<p>導入文の一部を表示します。</p>
</div>
</a>
実装の注意点
- CSSはテーマの追加CSSか子テーマのstyle.cssに入れてください。
- スマホでは画像サイズを小さくするなどレスポンシブ対応を行ってください。メディアクエリを使うと便利です。
- デザインは一度に大幅変更せず、少しずつ調整すると失敗が少ないです。
ブログカードとテキストリンクの違い
概要
ブログカードは本文外にカード形式で関連記事やページを視覚的に示します。テキストリンクは本文中の語句にリンクを張る方法です。目的や読み手の流れに応じて使い分けると効果的です。
見た目と目的
- ブログカード：サムネイルやタイトル、説明が一目で分かるため、注目させたい記事に向いています。
- テキストリンク：文章の流れを壊さず自然に関連情報へ誘導できます。短い補足やキーワードからの誘導に便利です。
クリック率とSEO効果
- ブログカードは視覚的に目立つためクリック率が上がる傾向があります。ただし設置場所やデザイン次第です。
- テキストリンクは文脈の関連性が高いとSEO上の評価につながりやすいです。内部リンクのアンカーテキストを工夫すると効果的です。
ユーザー体験（読みやすさ）
- ブログカードは一覧性が高く、スマホ利用時にも選びやすい利点があります。
- テキストリンクは読む集中を妨げにくく、記事の信頼感を保ちやすいです。
使い分けの目安
- 記事の途中で補足や根拠を示すならテキストリンクを使う。例：関連の統計や以前の記事への移動。
- 関連記事をまとめて紹介したい場合や離脱を促さず目を引きたい場合はブログカードを使う。
- 両方を組み合わせると効果的です。記事内ではテキストリンクで自然に導き、記事末やサイドバーでブログカードを並べて興味を引きつけます。
まとめ
要点の振り返り
Cocoonで内部リンクをブログカードにする方法は、初心者でも取り組みやすいです。ブログカードは視覚的に目を引き、読者が関連情報へ移動しやすくなります。デザイン面でも統一感が出て、記事の見栄えがよくなります。
すぐに押さえたいポイント
- 設定は管理画面やショートコードで簡単に行えます。
- ラベルを付けると目的別に案内できます（例：関連記事・参考リンク）。
- 表示されない場合はURLの形式やキャッシュ、テーマの設定を確認します。
応用とおすすめの使い方
- 主要な内部リンクをブログカードに置き換えて回遊性を高めます。
- 同一カテゴリの記事をまとめて表示すると読者の滞在時間が伸びます。
- デザインやラベルは試しながら調整すると効果が分かりやすいです。
ぜひ実際のページで試して、自分のブログに合った表示を見つけてください。使い方次第で読者に優しい導線を作れます。
