はじめに
ブログ運営の悩み
「ブログの記事をどう書けばいいかわからない」「記事がうまくまとまらない……」という悩みを持つ方は多いです。本記事は、WordPressテーマ『SWELL』で自動表示されるパンくずリストに焦点を当て、役割や非表示・カスタマイズ方法をやさしく解説します。
この記事の目的
- パンくずリストの役割を理解する
- SWELLでどこに表示されるか確認する（例：投稿タイトルの上、固定ページの上）
- CSSや設定で非表示にする方法を確認する
- SEOやユーザー導線への影響に注意点を紹介する
対象読者
初心者から中級者のブロガーやサイト運営者を想定します。専門用語は最小限にし、具体例を交えて説明します。コードを使う場合はコピーして貼り付けられる形式で示します。
パンくずリストとは？SWELLで自動表示される理由
パンくずリストとは
パンくずリストは、現在のページがサイト内のどの位置にあるかを示すナビゲーションです。一般的には「ホーム > カテゴリ > 記事名」のように階層を順に表示します。ユーザーが現在地を把握しやすくなり、戻る操作も簡単になります。
SWELLでの表示位置と動作
SWELLでは、固定ページや投稿の上部やコンテンツ下部に自動で表示されることが多いです。テーマに組み込まれた機能でページ階層を判定し、適切な順序でリンクを生成します。トップページや単一の階層しかないページでは表示が省略される場合があります。
なぜ自動表示されるのか（理由）
SWELLは使いやすさを重視して、パンくずリストをテーマ側で実装しています。これにより、個別にプラグインを入れなくてもナビゲーションが整います。さらに、検索エンジン向けにページ構造を伝えるためのマークアップも合わせて出力することが一般的です。したがって、検索エンジンがサイト構造を理解しやすくなり、SEO面での利点が期待できます。
ユーザーと運営者にとってのメリット
ユーザーは現在地を直感的に把握でき、関連記事や上位ページに移動しやすくなります。運営者はサイト全体の構造を示せるため、訪問者の回遊を促せます。しかし、すべてのサイトで必須というわけではないので、デザインや目的に合わせて表示可否を検討するとよいでしょう。
次章では、SWELLでのパンくずリストのカスタマイズ方法と非表示の手順をわかりやすく解説します。
SWELLでのパンくずリストのカスタマイズと非表示の方法
パンくずリストの位置を変更する手順
- WordPress管理画面で「外観」→「カスタマイズ」を開きます。
- 「サイト全体設定」→「パンくずリスト」を選びます。
- 表示位置を選択して保存します。
位置を「ページ下部」に設定すると、フッターウィジェットの直前にパンくずリストが表示されます。つまり本文エリアの下、フッターの上に現れるため、ページの末尾付近で目に入る配置です。
パンくずリストを全ページで非表示にする方法
SWELLのカスタマイズ画面に直接「非表示」設定がない場合は、追加CSSで非表示にします。外観→カスタマイズ→追加CSSに以下を貼り付けてください。
breadcrumb
これを保存すると、サイト内の全ページでパンくずリストが隠れます。
特定のページだけ非表示にする方法
特定ページだけ隠したいときは、そのページのIDを使います。ページ編集画面のURLでIDを確認し、次のように記述します。
body.page-id-123 #breadcrumb { display: none; }
複数ページをまとめて指定する場合はカンマで区切ります。
モバイルだけ非表示にする方法
画面幅で切り替えるにはメディアクエリを使います。例：
@media (max-width: 768px) {
#breadcrumb { display: none; }
}
注意点
・追加CSSを追加後はブラウザとキャッシュプラグインのキャッシュをクリアして反映を確認してください。
・パンくずリストは訪問者の回遊やサイトの構造理解に役立ちます。非表示にするとナビゲーション性が下がる可能性がある点にご注意ください。
その他のカスタマイズと注意点
ホーム文字列の変更方法
SWELLはテーマ側で「ホーム」や「トップ」などの表示を変更できる設定がある場合が多いです。設定が見つからなければ、子テーマのfunctions.phpやコードスニペットでラベルを書き換えます。例えば英語表記にしたいときはテーマの翻訳ファイル（.po/.mo）を編集する方法も有効です。
背景や境界の装飾
パンくずの背景や矢印、間隔はCSSで簡単に調整できます。例：
.breadcrumb{background:linear-gradient(#fff,#f7f7f7);padding:8px 12px;border-radius:6px}
.breadcrumb a{color:#2b6cb0;text-decoration:none}
視認性を高めるため、コントラストと余白を意識してください。
非表示にする際のSEOと運用上の注意
パンくずはユーザー導線とクローラの理解を助ける構造化要素です。したがって、記事やカテゴリが多いサイトでは表示を推奨します。導線が単純なランディングページ中心のサイトでは非表示でも問題が少ないことが多いです。しかし、非表示にする場合は内部リンクやカテゴリ構成を別で分かりやすくしておきましょう。
最後に
変更前にバックアップを取り、子テーマやスニペットで管理すると安全です。
まとめ・よくある質問
この記事のポイントを簡潔にまとめます。
-
SWELLでパンくずリストを非表示にする最も簡単な方法はCSSです。テーマ側の設定を触らずに見た目だけ制御できます。
-
特定ページのみ非表示にする場合は、ページ固有のbodyクラス（例：.page-id-123）を使った指定が便利です。複雑な条件が必要なときはPHPや条件分岐を使いますが、CSSで対応できることが多いです。
-
非表示にしたあとでも、管理画面の設定や追加したCSSを削除すれば再表示できます。変更後はキャッシュをクリアして表示を確認してください。
よくある質問（FAQ）
Q1: 表示を消すとSEOに悪影響ありますか？
A1: パンくずはユーザーと検索エンジンの導線に役立ちます。完全に非表示にしても即座に大きなペナルティになることは少ないですが、ユーザービリティを考えて必要な箇所だけ非表示にするのがおすすめです。
Q2: CSSが効かないときは？
A2: キャッシュの影響やセレクタが合っていない可能性があります。ブラウザの検証ツールで要素を確認し、!important を追加して試してください。
Q3: 具体的なCSS例は？
A3: 全ページ非表示例：
.breadcrumbs { display:none !important; }
特定ページのみ：
.page-id-123 .breadcrumbs { display:none !important; }
最後に：パンくずは訪問者の利便性向上に役立ちます。非表示にする際は、目的を明確にし、表示・非表示の切替を簡単に戻せるようにしておくと安心です。
