はじめに
ブログやサイトを運営していると、「パンくずリスト（Breadcrumbs）」を見かけます。パンくずリストは、現在のページがサイト内のどこにあるかを示す小さなナビゲーションです。訪問者がページの位置を把握しやすくなるため、ユーザービリティ向上に役立ちます。また検索エンジンにも有益な情報を伝えられることが多いです。
この記事では、WordPressの人気テーマ「SWELL」を使っている方向けに、パンくずリストを非表示にする方法や表示位置を変更する手順を丁寧に解説します。設定画面だけで完了する方法と、必要に応じてコードを使って調整する方法の両方を扱いますので、初心者の方でも対応できるようにしています。
本章では、パンくずリストの役割や非表示にする理由、記事全体の流れを簡単にご説明します。実際の操作に入る前に、なぜ非表示にしたいのか、影響範囲を確認しておくと作業がスムーズになります。
パンくずリストとは
概要
パンくずリストは、Webサイト内で現在のページがどこに属するかを示すナビゲーションです。画面上では「トップ > カテゴリ > 記事」のように表示され、ユーザーが自分の位置を直感的に把握できます。
主な種類と例
- 階層型：サイトの階層構造を示します。例）トップ > 家具 > 椅子
- 属性型：商品の属性やカテゴリを示します。例）トップ > メンズ > サイズ：L
- 履歴型（トレイル型）：ユーザーが辿った経路を表示します。例）ホーム > 検索結果 > 記事
主なメリット
- ナビゲーションを簡単にし、離脱を減らします。
- ページ構造をユーザーと検索エンジンに伝え、SEOに寄与します。
- 内部リンクが増えるためサイト全体の巡回性が向上します。
非表示にしたいケース
- ページ数が少なく階層が浅いサイト
- ランディングページやキャンペーンページで視覚をシンプルに保ちたい場合
- デザイン上どうしても干渉する場合
注意点（次章の予告）
多くのテーマやプラグインは自動でパンくずを生成します。第3章で、SWELLテーマでの表示位置の変更や非表示にする方法を具体的に解説します。
SWELLテーマでパンくずリストの表示位置を変更・非表示にする方法
表示位置を下部に変更する手順
- WordPress管理画面にログインします。
- 「外観」→「カスタマイズ」を開きます。
- 「サイト全体設定」→「パンくずリスト」を選択します。
- 「パンくずリストの位置」から「ページ下部」を選びます。
- 右上の「公開」を押して保存します。
これで全ページのパンくずリストが記事下部やページ下部に表示されます。変更後、キャッシュ系プラグインを使っている場合はキャッシュをクリアしてください。
完全に非表示にする手順（追加CSSを使う）
- 管理画面で「外観」→「カスタマイズ」→「追加CSS」を開きます。
- 以下のコードを貼り付けます。
#breadcrumb {
display: none;
}
- 「公開」を押して保存します。
この方法は全ページでパンくずリストを非表示にします。特定ページだけ非表示にしたい場合は、次の方法をお使いください。
特定ページだけ非表示にする例
ページIDが123の場合:
body.page-id-123 #breadcrumb { display: none; }
注意点
- テーマや将来のアップデートでIDやクラス名が変わることがあります。表示されない場合はブラウザの検証ツールで要素名を確認してください。
- 見た目が崩れたときはキャッシュのクリアやブラウザの再読み込みをお試しください。
- テンプレートファイルを直接編集する場合は、子テーマを作成してから行うと安全です。
注意点・カスタマイズのポイント
SEOと表示の関係
パンくずリストは内部リンクを整理し、検索エンジンにページ構造を伝える役割があります。完全に削除すると利便性やSEOの恩恵が減る可能性があるため、目的を明確にして判断してください。
非表示にする際の注意
外観だけ隠すのか、構造化データ（スニペット）まで消すのかで対応が変わります。見た目だけを消すならCSSで対応できますが、構造化データを消すにはテーマやプラグインの設定を変更する必要があります。プラグインがパンくずを出力している場合は、二重出力や設定の競合に注意してください。
CSSでの非表示（簡単な手順と例）
- ブラウザの検証ツールでパンくずのクラスやIDを確認します。
- 外観→カスタマイズ→追加CSSに記述します。
例（クラス名はテーマにより異なります）
.your-breadcrumb-class { display: none; }
必要に応じてメディアクエリでモバイルのみ非表示にすることもできます。
アクセシビリティと代替案
display:none; は視覚・音声ともに要素を隠します。画面読み上げでは読み上げられなくなります。視覚だけ隠してスクリーンリーダーに残す場合は、アクセシビリティ用のクラスを使う方法があります（テーマに既存のクラスがあるか確認してください）。
カスタマイズのポイント
- クラス名やIDはテーマやプラグインで異なるため、必ず検証ツールで特定してください。
- 子テーマや追加CSSを使うとアップデートで上書きされにくくなります。
- 構造化データを削除する場合は、SEOへの影響を考えてバックアップを取ってから変更してください。
テストとキャッシュ対策
変更後はブラウザのキャッシュ、サイトのキャッシュ、CDNをクリアして表示を確認します。スマホ・PC両方で表示と動作をチェックして問題がないか確かめてください。
まとめ
この記事では、SWELLテーマのWordPressサイトでパンくずリストをページ下部に移動する方法と、完全に非表示にする方法を解説しました。
ポイントを簡潔にまとめます。
- 方法は大きく2つ：カスタマイザーでの表示設定（簡単）とCSS・コードでの調整（柔軟）。
- カスタマイザーは初心者向けで、数クリックで表示・非表示を切り替えられます。すぐに試したい場合はこちらが便利です。
- CSSやテーマのテンプレート編集は柔軟性が高く、デザインに合わせた細かい配置変更が可能です。例として、完全に非表示にするCSSは次の通りです：
.breadcrumb { display: none !important; }
- パンくずの移動は、単に位置を変えるだけでなく、ユーザビリティやSEOに影響する可能性があります。構造化データ（schema.org）の扱いに注意し、移動後も検索エンジンに正しく伝わっているか確認してください。
- 変更前にバックアップを取り、スマホ・PC両方で表示確認してください。意図しない崩れや見え方の違いが起きやすい箇所です。
最後に一言：デザインやサイト運用方針に合わせて柔軟に調整しましょう。操作に不安がある場合は、まずカスタマイザーで試してからCSSやテンプレート編集へ進むと安心です。
