この記事では、Cocoonのパンくずリストの基本的な役割から設定方法、おすすめの表示位置、よくあるトラブルの対処、SEOやデザインの考え方まで、ひと通りまとめて解説していきます。
先に結論を一言でまとめると、「Cocoon標準のパンくずリストを、適切な位置と設定で使いこなすだけで、読者にも検索エンジンにもやさしいブログに近づける」です。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
cocoonのパンくずリストとは？まず全体像を押さえよう
最初に、「そもそもパンくずリストとは何なのか」「Cocoonではどこまでできるのか」という全体像をざっくり整理しておきます。
パンくずリストの意味と役割をざっくり整理
パンくずリストは、読者から見たときの「サイト内の現在地ナビ」のようなものです。
ゲームでいうと画面の端に出ているミニマップに近く、「自分がどこにいるのか」「1つ上の階層に戻るにはどこをクリックすればいいのか」を示してくれます。
イメージしやすいように、役割を整理するとこんな感じです。
| 視点 | 役割・メリットのイメージ |
|---|---|
| 読者（ユーザー） | 今いるページの場所が分かる、ひとつ上のカテゴリへすぐ戻れる |
| ブログ運営者 | カテゴリー構造のチェックがしやすい、記事整理のヒントになる |
| 検索エンジン | サイト構造を理解しやすい、関連ページ同士がつながる |
Cocoonには、このパンくずリスト機能が最初から標準で入っています。
わざわざ専用プラグインを追加しなくても、テーマ側の設定だけでかなり柔軟にカスタマイズできるのが大きな強みです。
Cocoonテーマのパンくず機能の特徴
Cocoonのパンくずリストには、主に次のような特徴があります。
- テーマ標準でパンくずリストが有効になっている
- 投稿ページ・固定ページごとに表示位置を細かく設定できる
- カテゴリーの階層に合わせて、自動でパンくずリンクを作ってくれる
- パンくずの最後に記事タイトルを含めるかどうか選べる
- パンくず用の構造化データ（BreadcrumbList）にも対応している
つまり、Cocoonを使っている時点で「パンくずリストに弱い」ということはなくて、基本的な設定さえしておけば十分戦える状態になっている、というイメージでOKです。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
cocoon パンくずリストを表示するメリット3つ
続いて、パンくずリストをちゃんと表示しておくことで、どんな良いことがあるのかを整理しておきます。設定の細かい話に入る前に、「なぜやるのか」を知っておくと、あとで迷いにくくなります。
メリット1：読者の「今どこ？」ストレスを減らせる
パンくずリストがないと、読者は次のような状態になりがちです。
- 自分がどのカテゴリーの記事を読んでいるのか分かりにくい
- 関連記事を何回か押しているうちに、どこの階層をうろうろしているのか分からなくなる
逆に、Cocoonのパンくずリストをきちんと表示しておくと、
- 「ホーム > カテゴリー > 記事タイトル」という流れが一目で分かる
- ひとつ上のカテゴリーにワンクリックで戻れる
- サイト全体が「迷子になりにくいブログ」になる
といった状態を作りやすくなります。
私もパンくず周りを整えたあとに、「前に読んだカテゴリーに戻りやすくなった」と言ってもらえたことがあり、地味ですが効果を実感しました。
メリット2：サイト構造の見直しにも役立つ
パンくずリストは、運営者側の「サイト設計チェックツール」としても役立ちます。
- 実際のパンくずを見ながら、カテゴリーの階層が深すぎないか確認できる
- 似たようなカテゴリーが増えすぎていないかを可視化できる
- 雑記ブログから特化ブログに寄せたいときの整理のヒントになる
パンくずを眺めたときに、カテゴリー名がやたら長かったり、階層がやたら多かったりするなら、それはサイト設計を見直したほうがいいサインです。
メリット3：SEOと内部リンクの土台になる
Cocoonのパンくずリストは、SEOの観点でもメリットがあります。
- パンくずのリンクを通じて、カテゴリーや上位ページへの内部リンクが自動で張られる
- 検索エンジンから見て、サイトの階層構造が理解しやすくなる
- パンくずの構造化データが検索結果に反映されると、ユーザーの目にも分かりやすい表示になる
もちろん、パンくずリストだけで検索順位が大きく変わるわけではありません。
ただ、「ユーザーが迷子にならない」「サイト構造がスッキリしている」という意味で、SEOの土台づくりとしてはかなり重要なパーツだと考えています。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
cocoon パンくずリストの基本設定手順
ここからは、実際にCocoonの管理画面でパンくずリストを設定していく流れを、できるだけ分かりやすく整理します。大きく分けると、「投稿ページ」「固定ページ」「カテゴリーページ」の3種類を意識しておけば十分です。
投稿ページでのcocoon パンくずリスト設定
まずは、一番アクセスが集まりやすい「投稿ページ（ブログ記事）」のパンくず設定から見ていきます。Cocoon設定の該当タブを開くと、パンくずリストに関する項目がいくつか並んでいます。
よく使う項目をざっくり整理すると、次のようなイメージです。
| 項目名のイメージ | 内容のイメージ |
|---|---|
| パンくずリストの配置 | メインカラム手前、トップ、ボトム、フッター手前などから選ぶ |
| パンくずリストを表示するか | 表示する／表示しないの切り替え |
| 記事タイトルを含める | パンくずの最後に記事タイトルを入れるかどうか |
投稿ページで迷ったときは、まず次のような設定にしておくと扱いやすいです。
- パンくずリストの位置は「メインカラム手前」または「メインカラムトップ」あたり
- パンくずリストは「表示する」にしておく
- タイトルが長くなりがちな場合は、パンくずに記事タイトルを含めない
この組み合わせだけでも、見た目と使い勝手がかなり整います。
固定ページのパンくずリスト設定
固定ページ（プロフィール、問い合わせ、会社概要など）にも、Cocoon専用のパンくず設定が用意されています。
投稿ページとはタブが分かれているので、「投稿側だけ直して固定ページはそのまま」というミスをしないように注意しましょう。
固定ページのポイントは次のとおりです。
- パンくずを表示するかどうかは、投稿ページとは別に設定される
- ランディングページ風に見せたい固定ページは、あえてパンくずを非表示にしてスッキリさせるのも選択肢
- サイト全体の「見た目の統一感」を意識しつつ、ページごとの役割で出し分ける
たとえば、長めのプロフィールページやノウハウ系の固定ページにはパンくずを出しておき、縦長のセールスページ的な固定ページではあえてパンくずを消す、という使い方もよくあります。
カテゴリーページでのパンくず挙動を理解する
カテゴリーページでのパンくずリストの出方は、多くの場合「投稿ページ側の設定」と連動しています。
ここを理解していないと、「カテゴリーページだけパンくずの位置が変えられない」と悩んでしまう原因になります。
ざっくりまとめると、イメージはこんな感じです。
| ページの種類 | パンくずの設定元 | 注意しておきたいポイント |
|---|---|---|
| 投稿ページ | 投稿タブのパンくず設定 | もっともアクセスが多いので、ここを基準に考える |
| 固定ページ | 固定ページタブのパンくず設定 | LP的なページは非表示にする選択肢もある |
| カテゴリーページ | 基本的に投稿設定に準拠 | カテゴリーページだけを細かく変えられないことがある |
「カテゴリーページのパンくず位置を変えたいのに変わらない」というときは、投稿設定側のパンくず配置を見直すと解決することが多いです。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
パンくずリストの表示位置とおすすめパターン
ここからは、Cocoonのパンくずリストを「どこに表示するか」という位置の話をしていきます。少し抽象的に感じるかもしれませんが、ここを決めておくとサイト全体の見た目がかなり安定します。
表示位置5パターンの違いを比較する
Cocoonの設定画面では、主に次のような表示位置が選べます。
それぞれのイメージを表にすると、次のようになります。
| 位置の名前のイメージ | 実際の位置のイメージ | おすすめ度 |
|---|---|---|
| メインカラム手前 | ヘッダーの下で、記事タイトルより少し上 | ◎ |
| メインカラムトップ | 記事タイトルのすぐ上 | ○ |
| メインカラムボトム | 記事本文の一番下 | △ |
| フッター手前 | フッターの直前で、サイト全体の一番下に近い位置 | △ |
| 表示しない | パンくずリストを非表示にする | ▲ |
私のおすすめは、「メインカラム手前」か「メインカラムトップ」です。
理由はシンプルで、ページを開いた瞬間に現在地が分かりやすく、読者の目線にも自然に入りやすいからです。
逆に、ボトム側だけに置いてしまうと、記事を最後まで読まないと気づかれないパンくずになりやすいので、明確な狙いがない限りは避けたほうが無難です。
ブログタイプ別のおすすめ表示位置
ブログのジャンルや目的によっても、Cocoonのパンくずリストに向いている位置は少し変わります。
ざっくりとした目安はこんな感じです。
| ブログタイプのイメージ | おすすめのパンくず位置 | 理由のイメージ |
|---|---|---|
| 雑記ブログ | メインカラム手前 | カテゴリーが増えやすいので、現在地を強調したい |
| 特化ブログ | メインカラムトップ | 記事タイトルとの一体感を出して、専門性を印象づけたい |
| 企業サイト・オウンドメディア | メインカラム手前またはトップ | 読者に迷わせないことが最優先になりやすい |
| LP寄りのページが多いサイト | ページによって表示と非表示を使い分け | セールスページでは余計な要素を減らしたいことが多い |
あくまで目安なので、自分のサイトで実際に確認してみて、「しっくり来るかどうか」を基準に微調整していくのが一番です。
記事タイトルをパンくずに含めるかどうか
Cocoonには、「パンくずリストの最後に記事タイトルを入れるかどうか」を切り替える設定があります。
ここも迷いポイントですが、次のように考えると判断しやすくなります。
- タイトルが短めで、カテゴリー階層も浅めのブログ
→ パンくずに記事タイトルを含めても見やすいことが多い - タイトルが長くなりがち、またはカテゴリー階層が深めのブログ
→ パンくずが2行以上になるようなら、タイトルは含めないほうが読みやすい
特にスマホ表示を優先して考えると、「記事タイトルはパンくずに入れない」設定にしているサイトのほうが、スッキリ見えることが多い印象です。
パンくずリストが表示されない・おかしいときのチェック
ここからは、Cocoonのパンくずリストでよく起きる「トラブル系」の話をしていきます。「設定したのに表示されない」「一部のページだけおかしい」という場合は、次のチェックリストを順番に見ていってください。
まず確認したい5つのチェックポイント
パンくずリスト周りの不具合は、意外と基本的なところでつまずいていることが多いです。
まずは、次のポイントを1つずつ確認してみてください。
| チェック項目のイメージ | 確認する場所・ポイント |
|---|---|
| そもそも「表示しない」になっていないか | Cocoon設定の投稿・固定ページタブのパンくず設定 |
| カテゴリーが正しく設定されているか | 投稿編集画面のカテゴリー設定、メインカテゴリーの指定 |
| 表示位置が極端に下になっていないか | フッター手前などにしていて、単に気づいていないだけではないか |
| スキンがパンくずを独自制御していないか | スキンの説明やデモ、カスタマイズ済みのCSSの有無 |
| 子テーマやCSSで非表示にしていないか | style.cssなどでdisplay: noneが指定されていないか |
【稼げるキーワード教えます】
▼ ▼ ▼
このあたりを一通り確認するだけで、「設定で非表示にしていただけだった」というパターンもよく見つかります。
プラグイン競合やキャッシュが原因の場合
Cocoonのパンくずリストは、ほかのプラグインと機能がかぶると、二重表示になったり、逆に片方が消えたりすることがあります。
よくあるパターンとしては、次のようなものがあります。
- SEO系プラグインが独自のパンくずリスト機能を持っている
- キャッシュ系プラグインやサーバーキャッシュが効いていて、設定変更がすぐに反映されない
- デザイン系プラグインが、見た目を整えるつもりでパンくずの表示に影響を与えている
対処の順番としては、
- パンくずリスト系のプラグインが入っていないか確認する
- キャッシュプラグインがあれば、一度キャッシュを削除してみる
- テーマをCocoon子テーマからCocoon本体に一時的に切り替えて、症状が変わるか確認する
といった流れが分かりやすいです。
プラグインのオン・オフで症状が変わるかを見るだけでも、原因の切り分けがかなり進みます。
それでも解決しないときの動き方
「設定も見直した」「プラグインもチェックした」「キャッシュも削除した」
それでもCocoonのパンくずリストがおかしい場合は、次のような情報を整理してから、フォーラムや詳しい人に相談するのがおすすめです。
- どのページで、どんなふうにおかしいのか（スクリーンショットがあるとベスト）
- 最近追加したプラグインや、直前に行ったカスタマイズの内容
- 子テーマを使っているかどうか、使っているならどのファイルを編集したか
このあたりが分かっていると、第三者でも原因を推測しやすくなります。
イメージとしては、「お医者さんに症状を伝えるときのメモ」を作る感覚に近いです。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
cocoon パンくずリストのデザイン・カスタマイズの考え方
ここからは、見た目やデザイン周りの話をしていきます。コードをガッツリ書くというより、「どの方向で整えれば読みやすくなるか」という視点を中心にお伝えします。
まずは「読みやすさ」と「一行以内」を意識する
デザインをいじりたくなる気持ちはよく分かりますが、Cocoonのパンくずリストで最優先にしたいのは次の2つです。
- スマホでもパッと見て読めること
- できれば一行以内に収まること
この2点を意識するだけで、見た目のストレスはかなり減ります。
たとえば、こんな工夫が考えられます。
- フォントサイズを少し小さめにする
- 余白（padding）をほどよくとって、窮屈さをなくす
- 長いタイトルをパンくずに含めない設定にする
- カテゴリー名を短め・シンプルに整理しておく
CSSで細かく調整する前に、こうした「設計側の工夫」でスッキリさせておくと、その後のカスタマイズもしやすくなります。
色やアイコンの調整で「自分のブログらしさ」を出す
Cocoonでは、パンくずリストの文字色や区切りの記号（「>」の部分）をCSSでカスタマイズすることもできます。
具体的なコードはここでは省きますが、方向性としては次のような感じです。
- リンク文字色を、サイト全体のアクセントカラーと合わせる
- ホバーしたときに少しだけ色を変える
- 区切り記号を「>」から「/」や小さなアイコンに変える
こういった軽めの調整だけでも、「このブログは細かいところまで手が入っているな」という印象につながります。
パンくずリストはサイトの世界観をさりげなく見せる場所でもあるので、ほんの少しだけこだわってみるのも楽しいところです。
子テーマでテキストを変えたいときの考え方
中級者向けになりますが、「ホーム」という文字を「ブログトップ」などに変えたい人もいると思います。
その場合は、Cocoon子テーマでパンくず関連のテンプレートファイルをコピーして、テキスト部分を書き換えるという方法があります。
ただし、この作業は難易度が少し上がるので注意が必要です。
- テーマ更新時に上書きされないよう、必ず子テーマ側で編集すること
- パンくずのテキストだけでなく、構造化データとの整合性も崩さないようにすること
- 作業前にバックアップを取っておくこと
ここを雑に扱うと、Cocoonのパンくずリストがうまく動かなくなったり、エラーの原因になったりします。
少しでも不安があるなら、テキストの変更は無理せず、標準のまま使うのも十分「あり」だと私は思っています。
cocoon パンくずリストと構造化データ・SEOの関係
ここでは、パンくずリストと構造化データの関係について、かみ砕いて触れておきます。難しい単語が出てきますが、雰囲気だけでもつかんでもらえればOKです。
構造化データとしてのパンくずリスト
Cocoonのパンくずリストは、見た目だけでなく、検索エンジン向けの「構造化データ」としても出力されます。
構造化データは、「ここはパンくずです」「ここはレビューです」といった情報を、機械にも分かりやすい形で伝えるためのルールのようなものです。
パンくずの場合は、次のような特徴があります。
- BreadcrumbList（ブレッドクラムリスト）という形式でマークアップされることが多い
- 検索エンジンのヘルプでも、パンくず構造は推奨されている
- うまく認識されると、検索結果にパンくずが表示される場合がある
Cocoonのパンくずリストは、このあたりをテーマ側でかなりカバーしてくれています。
基本的な設定さえしておけば、難しいコードを意識せずとも恩恵を受けやすい仕組みです。
SEO的に気をつけたいポイント
構造化データ周りで、Cocoonのパンくずリストと相性が悪くなりやすいのが「二重出力」です。
- テーマ側（Cocoon）がパンくずの構造化データを出している
- SEOプラグイン側も、パンくずや構造化データを出している
このように、同じ種類の情報が二重になってしまうと、検索エンジンから見たときに「どちらを信じればいいのか」が分かりにくくなります。
対策としては、次のポイントを意識すると安心です。
- パンくずリストについては、基本的にCocoon側に一本化する
- SEOプラグインのパンくず機能はオフにしておく
- 構造化データの検証ツールで、エラーや警告が出ていないかをときどき確認する
Cocoonのパンくずリストを中心に据えておけば、大きく迷うことは少ないと思います。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問（FAQ）cocoon パンくずリスト編
ここでは、Cocoonのパンくずリストについてよく聞かれがちな質問を、Q&A形式でまとめておきます。細かい疑問が残っている場合は、このあたりも参考にしてみてください。
Q1：cocoon パンくずリストは必ず表示したほうがいいですか？
A：基本的には「表示したほうがいい」と考えています。
理由としては、
- 読者が迷子になりにくくなる
- サイトの階層構造が整理されて見える
- 内部リンクの観点でも、デメリットがほとんどない
といった点が挙げられます。
ただし、ランディングページ風の固定ページや、1ページ完結で見せたいセールスページなどでは、あえてCocoonのパンくずリストを非表示にするケースもあります。
そのページでパンくずが邪魔になっていないか、世界観を崩していないか、といった観点で判断するとよいと思います。
Q2：cocoon パンくずリストが投稿だけ表示されません。なぜですか？
A：多くの場合、「投稿タブ側のパンくず設定」か「カテゴリー設定」が原因になっていることが多いです。
- 投稿タブの設定で、パンくずリストが「表示しない」になっていないか
- 投稿にカテゴリーがきちんと設定されているか
- メインカテゴリーの指定がおかしくなっていないか
このあたりをまず確認してみてください。
また、プラグインとの競合やキャッシュが原因でCocoonのパンくずリストが表示されない場合もあるので、
- パンくず系のプラグインを一度オフにしてみる
- キャッシュプラグインのキャッシュを削除してみる
といった対応も試してみるのがおすすめです。
Q3：パンくずリストの順番を変えたいのですが、cocoonだけでできますか？
A：シンプルな「ホーム > カテゴリー > 記事」という流れなら、Cocoonのパンくずリストの標準機能だけで十分です。
ただ、「タグも入れたい」「別の階層構造で見せたい」といった少し変わった順番にしたい場合は、
- 子テーマ側でパンくずのテンプレートを編集する
- 自作関数でパンくずのルールを定義する
といった、中級者向けのカスタマイズが必要になることもあります。
最初のうちは、標準のCocoonのパンくずリストの動きに慣れてから、どうしても必要になったタイミングでカスタマイズに挑戦するのがおすすめです。
まとめ：cocoon パンくずリストのおすすめ設定と最初の一歩
ここまでの内容を簡単に整理しておきます
- Cocoonのパンくずリストは、読者の「現在地ナビ」としてもSEOの土台としても重要なパーツ
- 表示位置は「メインカラム手前」か「メインカラムトップ」が扱いやすくておすすめ
- 投稿・固定・カテゴリーページごとに、どの設定がどこに効いているかを理解しておくと迷わない
- 表示されない・挙動がおかしいときは、設定・カテゴリー・スキン・プラグイン・キャッシュの順でチェックする
- デザインやカスタマイズは、「読みやすさ」と「一行以内」を優先しつつ、少しずつ整えていけばOK
この記事を読み終えたあとにできる最初の一歩としては、次のような流れがおすすめです。
- Cocoon設定の「投稿」「固定ページ」タブを開き、パンくずリストの表示有無と表示位置を確認する。
- テスト用の記事ページを1つ開き、スマホとPCの両方でCocoonのパンくずリストの見え方をチェックする。
- 位置が下すぎる、行数が多すぎるなど気になる点があれば、表示位置とタイトルを含めるかどうかだけでも調整してみる。
この3ステップを済ませるだけでも、ブログ全体の「分かりやすさ」はかなり変わってきます。
Cocoonのパンくずリストは、一度しっかり整えておけば、あとは記事を増やしていくだけで自動的に内部リンクも育っていくので、早めに手を入れておくのがおすすめです。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
