はじめに
この章では、本記事の目的と読み方、対象読者をやさしくご案内します。WordPressの無料テーマ「Cocoon」を使う方が、パンくずリストを正しく理解し、設定や配置の変更、非表示化などを迷わずできるように構成しました。
目的
Cocoonでのパンくずリスト設定方法を、初心者にもわかりやすく手順化して解説します。設定画面の場所や各項目の意味、よくある配置パターン、投稿・固定ページごとの具体的手順、そして表示されないときの確認点まで網羅します。
対象読者
・WordPress初心者でCocoonを使っている方
・パンくずリストの見栄えやSEO効果を最適化したい方
・設定を変更したいが何を触ればよいかわからない方
記事の構成と読み方
全7章で段階的に説明します。まず基本の意味とメリットを理解し、次にCocoonの設定画面の使い方を確認します。中盤で具体的な配置パターンと操作手順を示し、最後に非表示や表示トラブルの対処法を扱います。各章は独立して読むこともできます。
次の第2章では、パンくずリストとは何か、Cocoonで表示する意味をやさしく説明します。
パンくずリストとは？Cocoonで表示する意味
パンくずリストの基本
パンくずリストは、現在のページがサイト内のどの階層にあるかを示すナビゲーションです。一般的には「ホーム ＞ カテゴリー ＞ 記事タイトル」のように横並びで表示します。訪問者は自分の位置を把握しやすくなり、上位ページへ戻る動線が明確になります。
Cocoonで表示する利点
Cocoonはパンくずリスト機能を標準で備えており、テーマの設定画面から有効化や配置変更ができます。主な利点は次の通りです。
- ユーザー利便性の向上：階層が分かるため回遊が増え、離脱を減らせます。
- SEOへの貢献：Googleはパンくず形式を検索結果に表示することがあり、構造化データに対応すると認識されやすくなります。
- クローラ巡回の促進：内部リンクが増えることで、検索エンジンがサイト内を見つけやすくなります。
実際の運用で気を付けること
ページ構成が単純なサイトや、1ページ完結のランディングでは不要な場合があります。Cocoonでは表示位置や区切り記号、表示項目を変更できますので、サイト構成に合わせて調整してください。
Cocoonでパンくずリストを設定できる場所と基本項目
概要
Cocoonでは投稿・カテゴリーページ用と固定ページ用の2か所でパンくずリストを設定できます。それぞれ別々に設定できるため、ページ種類ごとに見せ方を変えられます。
設定場所（操作手順）
- 投稿・カテゴリーページ: WordPress管理画面 → 「Cocoon設定」→「投稿」タブ
- 固定ページ: WordPress管理画面 → 「Cocoon設定」→「固定ページ」タブ
それぞれのタブ内にパンくずに関する項目が並びます。
主な設定項目
- 配置位置（5種類）: ヘッダー下、タイトル上、タイトル下、本文上、本文下などから選べます。
- 記事タイトルを含めるか: 最後に記事タイトルを表示するかどうかの切替です。
- 表示／非表示の切替: ページ単位でパンくずを非表示にできます。
- 区切り文字やホームへのリンク表示（補助項目）: 見た目を調整する簡単な設定です。
各項目のポイント
- 配置位置は読みやすさやデザインに影響します。例: タイトル下は自然に辿れる配置です。
- 記事タイトルを含めると現在地が明確になり、含めないと短くすっきりします。
- 投稿と固定ページで別々に設定できるため、サイト構成に合わせて調整してください。
Cocoonでのパンくずリストの配置パターン（5種類）
概要
Cocoonではパンくずリストを5つの位置から選べます。ユーザーの現在位置が分かりやすい配置や、画面をすっきり見せる配置など目的に合わせて選びます。
1. メインカラムトップ（記事本文上部）
- 説明：本文の最上部に表示します。記事ヘッダーの直後に来る配置です。
- 長所：読者がページ構造をすぐ把握できます。導線が明確です。
- 短所：画面の上部がやや込み合うことがあります。
- 向くサイト：情報量の多いブログやECサイト。
2. メインカラムボトム（記事本文下部）
- 説明：本文の最後に表示します。
- 長所：本文を読み終えた後に別ページへ誘導しやすいです。
- 短所：初見で現在位置が分かりにくい場合があります。
- 向くサイト：読み物重視で最初の見た目をすっきりさせたい場合。
3. タイトル上（記事タイトルの上）
- 説明：タイトルの上に表示します。
- 長所：目立ちやすく、位置把握が即座にできます。
- 短所：タイトルとの距離ができるためデザイン次第で違和感が出ます。
- 向くサイト：構造的な案内を優先したい場合。
4. タイトル下（記事タイトルのすぐ下）
- 説明：タイトル直下に表示します。
- 長所：見た目がすっきりし、タイトルとの関連性が強まります。
- 短所：目立ちにくく、見落とされる可能性があります。
- 向くサイト：シンプルなデザインを重視する場合。
5. 表示しない（非表示）
- 説明：パンくずリストを表示しません。
- 長所：画面が一段とクリーンになります。
- 短所：サイト内の位置関係が分かりにくくなる場合があります。
- 向くサイト：ランディングページや極端に簡潔な構成のサイト。
選び方のポイント
- ユーザーが迷いやすい構造なら「メインカラムトップ」か「タイトル上」を推奨します。
- デザインのすっきり感を優先するなら「タイトル下」や「メインカラムボトム」を検討してください。
- SEOやアクセシビリティでは、表示することで利点が出ることが多いです。
第5章: 投稿・カテゴリーページのパンくずリスト設定手順
概要
投稿やカテゴリーページでのパンくずは、Cocoonの「投稿」タブ内で設定します。配置や記事タイトルの有無を切り替え、見やすさを調整します。
設定手順（手順に沿って操作してください）
- WordPress管理画面にログインし、[Cocoon設定]を開きます。
- 上部タブで[投稿]を選びます。
- 下にスクロールして[パンくずリストの設定]セクションを探します。
- 配置を選びます（例：タイトル上／タイトル下／コンテンツ上など）。配置で見た目が大きく変わります。
- 「パンくずに記事タイトルを含める」をON／OFFで切り替えます。タイトルを含めると階層が長くなり、スマホで窮屈になることがあります。短くしたい場合はOFFがおすすめです。
- カテゴリーページやタグページで表示するかの設定があれば調整します。
- 変更が終わったら[変更をまとめて保存]をクリックして反映します。
注意点と確認
保存後は実際の投稿とカテゴリーページを表示して、PCとスマホ両方で見やすさを確認してください。キャッシュプラグインを使っている場合はキャッシュをクリアしてから確認すると確実です。
固定ページのパンくずリスト設定手順
固定ページのパンくずリスト設定は投稿・カテゴリーページとほぼ同様です。ここでは迷わないように、順を追って設定方法を説明します。
1. Cocoon設定を開く
WordPress管理画面で「Cocoon設定」→「固定ページ」タブを開きます。
2. 表示のON/OFFを決める
「パンくずリストを表示」などの項目で、固定ページに表示するかを選びます。サイト全体の導線を整えるため、表示にすることをおすすめします。
3. 配置場所を選ぶ
表示位置（例：タイトルの上・タイトルの下・本文の上など）を選びます。タイトルのすぐ下に置くとページ構造が分かりやすくなります。
4. 記事タイトルや階層表示の有無
パンくずに記事タイトルを含めるか、親ページ（階層）を表示するかを設定します。冗長に感じる場合はタイトルを省くこともできます。
5. 変更を保存する
設定を終えたら「変更をまとめて保存」をクリックして反映させます。
6. ページ単位での上書き
個別ページで表示を切り替えたい場合は、ページ編集画面のCocoon設定（エディターのサイドバーや下部のメタボックス）で上書きできます。
7. 確認とキャッシュのクリア
公開ページを開いて表示を確認します。キャッシュプラグインを使っている場合はキャッシュをクリアして最新の表示を確認してください。
投稿・カテゴリーページと固定ページで設定を統一すると、サイト全体の見た目やナビゲーションが揃い、ユーザーに優しい構造になります。
Cocoonでパンくずリストを非表示にする方法
概要
パンくずリストを完全に非表示にする手順を分かりやすく説明します。全体設定と個別ページごとの設定、プラグインや独自コードとの二重表示対策も紹介します。
Cocoon設定で一括非表示（サイト全体）
- WordPress管理画面の「Cocoon設定」を開きます。
- 「パンくずリスト」タブを選びます。
- 「パンくずリストの配置」で「表示しない」を選択して保存します。これでサイト全体からパンくずが消えます。
投稿・カテゴリーページで個別に非表示
投稿やカテゴリー一覧で個別に制御したい場合は、該当の編集画面にある「Cocoon設定」パネルを確認します。パンくず表示の項目のチェックを外して更新してください。
固定ページでの非表示
固定ページも同様に、編集画面のCocoon設定でパンくず表示をオフにできます。特定のページだけ非表示にしたいときに便利です。
プラグインや独自コードとの二重表示対策
既にパンくず用プラグインやテーマ外のコードで出している場合は、片方を無効にしてください。CSSで隠す場合は「外観→カスタマイズ→追加CSS」に次を追加します。
.breadcrumb, .breadcrumbs {display: none !important;}
表示確認とキャッシュ
設定変更後はブラウザやキャッシュプラグインのキャッシュをクリアして表示を確認してください。プレビューやシークレットウィンドウでもチェックすると確実です。
注意点
パンくずは閲覧者の移動を助け、SEOでも有益です。本当に不要な場合のみ非表示にすることをおすすめします。
