SWELLのパンくずリストを非表示にする方法【超簡単です】

SWELLでサイトを作っていると、「パンくずリスト、ちょっと邪魔だな」「このページだけ消したいな」と感じることってありませんか。

そこでこの記事では、SWELLのパンくずリストを非表示にする具体的な方法と、消す前に知っておきたいポイントをまとめておきます。

結論から言うと、なんとなく全部のページで消してしまうのではなく、「ページごと」「端末ごと」にパンくずリストの表示と非表示を使い分けるのがおすすめです。

SWELLでパンくずリストを非表示にしたいときの全体像

SWELLでパンくずリストを非表示にしたい理由を整理しよう

最初に、「なぜパンくずリストを消したいのか」をはっきりさせておくと、あとから「やっぱり残しておけばよかった」と後悔しにくくなります。

よくあるパターンをざっくり表にすると、こんなイメージです。

想定しているページ	状況・悩み	パンくずリスト非表示の方針
ブログ記事	ファーストビューがごちゃごちゃして見える	スマホだけ非表示にして、PCでは表示を残す
固定ページ（プロフィール・問い合わせなど）	余計な要素を減らしてシンプルに見せたい	そのページだけパンくずリストを非表示にする
LP・セールスページ	ひとつの行動に集中してほしい	基本的にはパンくずリストを出さない
階層が深いカテゴリー記事	「いまどこにいるか」が分かりにくい	パンくずリストは積極的に表示しておく

「なんとなく見た目が好きじゃないから全部消す」というよりも、読者がどんなページを見ていて、そのページでどんな行動をしてほしいのかを考えながら、SWELLでパンくずリストを非表示にするかどうかを決めると失敗しにくくなります。

パンくずリストを残した方がいい場合もある

正直に言うと、私も一度「パンくずは邪魔だし、全部消しちゃおう」と思って、SWELLのパンくずリストを非表示にしたことがあります。

ただ、そのあとで次のようなデメリットを感じました。

• 階層が深い記事で、いまどのカテゴリーにいるのか分かりにくくなる
• ひとつ上の階層やカテゴリーに戻るリンクが減り、回遊しにくくなる
• 検索結果に表示されるパンくずと、サイト内のナビがちぐはぐに感じられることがある

パンくずリストは、読者にとっての「現在地表示」と「戻るボタン」の役割を兼ねています。SWELLでは標準でパンくずが表示されるので、完全に消してしまう前に、「どのページまでは残した方が良さそうか」を一度考えておくと安心です。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

 

パンくずリストの役割とSWELLで非表示にする前の注意点

パンくずリストの基本的な役割

パンくずリストには、主に次のような役割があります。

• 読者に「サイト内のどの位置にいるか」を一目で伝える
• ひとつ上のページやカテゴリーに、ワンクリックで戻れるようにする
• 階層が深いサイトほど、迷子を減らすナビとして機能する

たとえば、次のような表示です。

ホーム ＞ ブログ ＞ WordPress ＞ SWELLの使い方

これを見れば、「このページは『ブログ ＞ WordPress ＞ SWELLの使い方』の中の1記事なんだな」と、読者がすぐに理解できます。

パンくずリストを非表示にするメリット・デメリット

一方で、SWELLのパンくずを非表示にすることで得られるメリットもありますが、同時に失うものもあります。

ざっくりメリットとデメリットを整理すると、次のようなイメージです。

項目	メリット	デメリット
デザイン	ファーストビューをすっきりさせやすい	ページ上部のナビが減り、戻り先が分かりにくくなる
読者目線	余計な要素が減り、コンテンツに集中しやすい	「どこから来たページなのか」を見失いやすくなる
SEO目線	重要でないリンクを減らせる場合もある	回遊性が落ちると、評価にマイナスになる可能性もある

SWELLのパンくずリストを非表示にするかどうかは、「ただ消したいから消す」ではなく、「このサイトの構成なら、どのページでは残した方がいいか」を考えながら判断するのが大事です。

SWELL標準機能でパンくずリストを目立たなくする設定

カスタマイザーからパンくずリストの位置を変更する

SWELLでは、カスタマイザーからパンくずリストの位置や表示方法をある程度コントロールできます。

大まかな手順は次の通りです。

• WordPress管理画面の「外観」から「カスタマイズ」を開く
• 「サイト全体設定」→「パンくずリスト」のメニューを探す
• パンくずリストの表示位置や文字などを調整する

よく使う設定項目をまとめると、次のようになります。

設定項目の例	内容	おすすめの使い方
表示位置	ページ上部・下部などから選べる	上部で邪魔に感じるなら、まず下部に移動して様子を見る
ホームの文字	「ホーム」「TOP」など好きな文言に変更可能	サイトの雰囲気に合わせて変えると、違和感が減る
区切り記号	「>」や「/」などから選べることが多い	見づらいと感じたら、シンプルな記号に変更する
背景やライン	背景色やラインの有無などを調整	目立ちすぎると感じたら、装飾をシンプルにする

パンくずリストを完全に非表示にする前に、こうした設定で「少し控えめな見た目」に寄せてみると、それだけで悩みが解消するケースもあります。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

パンくずの文字やデザインを調整して一旦解決する

設定画面で足りない部分は、SWELLのデザイン機能や簡単なカスタマイズで調整できます。

• 文字サイズを少し小さめにして、主張を弱める
• 上下の余白を少し詰めて、コンパクトな見た目にする
• 背景色や枠線をなくして、普通のテキストに近づける

これだけでも、「残しておきたいけれど目立たせたくない」というときにはちょうどいい落としどころになります。デザインと機能のバランスを取りたい場合は、いきなり非表示にせず、この段階で一度試してみてください。

CSSでSWELLのパンくずリストを非表示にする3つの方法

大きく分けると、次の3パターンです。

• サイト全体で非表示にする
• 特定のページだけ非表示にする
• スマホだけ、またはPCだけ非表示にする

それぞれの特徴を先に表でざっくり比較しておきます。

方法	対象	難易度	向いているケース
方法1	全ページ	かんたん	パンくずリストを基本的に使わないサイト
方法2	特定ページのみ	ふつう	LPや問い合わせページだけ非表示にしたい場合
方法3	スマホだけなど端末別	ややふつう	スマホのファーストビューだけスッキリさせたい場合

方法1：サイト全体でパンくずリストを非表示にする

まずは一番シンプルな、「すべてのページでパンくずリストを消す方法」です。

流れとしては次のイメージです。

• 「外観」→「カスタマイズ」→「追加CSS」を開く
• 自分のサイトのパンくずリストのクラス名やIDを調べる
• そのクラスやIDに対して、display:none; を指定する

SWELLのバージョンや環境によって多少違いはありますが、パンくずには「#breadcrumb」や「.p-breadcrumb」といった名前が使われていることが多いです。

ざっくりしたイメージとしては、次のようなCSSになります。

例：サイト全体のパンくずリストを非表示にするイメージ

#breadcrumb { display: none; }

または

.p-breadcrumb { display: none; }

ただし、必ず自分のサイトで実際に使われているクラス名やIDを、ブラウザの検証ツールなどで確認してから書いてください。書いたあとは、ブラウザやキャッシュプラグインのキャッシュをクリアして、反映されているかチェックします。

方法2：特定ページだけパンくずリストを非表示にする

「LPだけパンくずを消したい」「お問い合わせページだけスッキリさせたい」といった場合は、そのページにだけ付いているIDクラスを使うのが定番です。

WordPressの固定ページや投稿ページには、「page-id-◯◯◯」「postid-◯◯◯」のようなクラスが付いています。これとパンくずのクラスを組み合わせることで、特定ページだけSWELLのパンくずリストを非表示にできます。

例として、次のような書き方になります。

例：固定ページIDが「10」のページだけパンくずを非表示にするイメージ

.page-id-10 .p-breadcrumb { display: none; }

例：投稿IDが「123」の記事だけパンくずを非表示にするイメージ

.postid-123 #breadcrumb { display: none; }

IDの数字部分は、編集画面のURL（post=◯◯の部分）や、投稿一覧でマウスを合わせたときのURLに表示されるIDを見れば確認できます。

いきなり全ページから消すのが不安な場合は、まず1ページだけ試してみて、問題なければLPや問い合わせページなど、消したいページを少しずつ増やしていくと安心です。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

1. センスが必要
2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

方法3：スマホだけ・PCだけパンくずリストを非表示にする

「PCではパンくずを残したいけれど、スマホだとファーストビューで邪魔に感じる」という方も多いと思います。

その場合は、メディアクエリを使って、画面の幅に応じてパンくずリストの表示・非表示を切り替える方法が便利です。

たとえば、画面幅が768px以下のときだけパンくずを隠したいなら、次のようなCSSを追加するイメージになります。

@media (max-width: 768px) {

  .p-breadcrumb { display: none; }

}

逆に、スマホでは表示してPCだけ非表示にしたい場合は、min-widthを使う形になります。

こうしておけば、スマホではファーストビューをきれいに見せつつ、PCではパンくずリストを活かすことができます。「スマホではとにかく記事を読ませたい」という場合は、一度この方法を検討してみてください。

サイト種類別のSWELLのパンくずリスト非表示おすすめパターン

ブログ・メディアサイトの場合

ブログやメディアサイトのように、記事が増えていく前提のサイトでは、基本的にはパンくずリストを活用した方が便利です。

おすすめは次のような方針です。

• PCではパンくずリストを表示する
• スマホでは邪魔に感じるなら、下部表示や非表示を検討する
• カテゴリや階層が複雑になってきたら、むしろ積極的に表示する

ブログ向けのざっくりした目安を表にすると、こんなイメージです。

サイトの状態	パンくず表示のおすすめ	一言メモ
記事数が少ないうち	表示してもしなくてもOK	カテゴリー構造がまだシンプルなら影響は小さめ
記事数が増えてきた	基本的に表示する	どこに何の記事があるか、パンくずがあると理解しやすい
階層が深くなってきた	できるだけ表示する	読者が迷子になりやすいので、道しるべとして重要

「SWELLのパンくずリストを非表示にしたい」と思っている方でも、ブログ運営がメインなら、完全に消すのではなく、「スマホだけ非表示」「一部ページだけ非表示」といった使い分けを考えてみる価値があります。

コーポレートサイトの場合

コーポレートサイトの場合は、ページ数がそこまで多くなかったり、メインの導線がグローバルメニューに集中していたりすることが多いです。

この場合は、次のような方針もありです。

• トップページや会社概要ページでは、パンくずリストを非表示にする
• 採用情報やブログなど、階層が深いコンテンツでは表示しておく
• 問い合わせページなどは、シンプルに見せるために非表示でもOK

SWELLのパンくずリストは、全ページ同じ表示にしなくても大丈夫です。会社として見せたい導線やブランドイメージに合わせて、「どこで見せて、どこで消すか」を決めていくイメージで設計すると、全体のまとまりが良くなります。

LP・セールスページの場合

LPやセールスページでは、パンくずリストを非表示にすることが多いです。理由はシンプルで、ページの目的がはっきりしていて、読者に特定の行動に集中してほしいからです。

LP向けのおすすめ設定を、ざっくり表にしておきます。

ページタイプ	パンくずリストの設定	ポイント
LP（縦長1ページ）	基本的に非表示	1ページ完結に集中してもらう
キャンペーンページ	非表示または下部だけ表示	離脱につながるリンクはできるだけ減らす
問い合わせ完了ページ	非表示でも問題なし	迷子になりにくいページなので、なくても大丈夫なことが多い

こうしたページでは、固定ページごとのIDクラスを使って、そのページだけパンくずリストを隠す方法が扱いやすいです。

 

---

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

1. 実際に10万稼いだキーワード
2. 今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

---

 

SWELLでパンくずリストを非表示にしたときのトラブル対処

CSSが効かない・反映されないとき

「追加CSSに書いたのに、パンくずリストが全然消えない…」という相談はよくあります。原因はだいたい次のどれかです。

• クラス名やIDが実際のHTMLと違っている
• 他のCSSに上書きされていて、優先度で負けている
• キャッシュプラグインやブラウザのキャッシュが残っている

よくある症状と原因、対処法を整理すると、次のようになります。

症状	考えられる原因	対処法
まったく消えない	クラス名やIDが正しくない	検証ツールで実際の要素名を確認して書き直す
一部だけ消えない	セレクタが限定的すぎる	.page .p-breadcrumb のように親要素も含めて指定する
一度は消えたのに、いつの間にか戻った	キャッシュの影響	ブラウザとキャッシュプラグインのキャッシュを削除する
PCでは消えているのにスマホだけ残っている	レスポンシブ用CSSの影響	メディアクエリの条件や記述箇所を見直す

CSSを書く前に、必ずブラウザの検証ツールで「どの要素にどんなクラスが付いているか」を確認しておくと、無駄な試行錯誤を減らせます。

パンくずを消したらデザインが崩れたとき

パンくずリストだけを消したつもりが、「なぜか余白だけ残っている」「ラインだけ表示されている」といった見た目の崩れが起きることがあります。

その場合は、次の点をチェックしてみてください。

• パンくずリストの親要素に余白や線が設定されていないか
• パンくずの下にだけボーダーが入っていないか
• 実はパンくず本体ではなく、周辺のコンテナにスタイルが当たっていないか

必要であれば、パンくず本体だけでなく、親要素に対しても余白やボーダーを調整するCSSを書いて、見た目を整えてください。

構造化データや検索結果が不安なとき

SWELLは、テーマ側でパンくずリストなどの構造化データを自動生成してくれる機能を持っています。投稿ページではパンくず用の構造化データが出力されることが多く、CSSで見た目だけ非表示にしても、構造化データ自体は残るケースがあります。

一方で、固定ページの扱いなどはテーマのバージョンや設定によって変わることもあるので、「絶対こうなる」とは言い切れません。

もし検索結果への影響が気になる場合は、次のようなチェックをしておくと安心です。

CSSで見た目だけ非表示にする分には、検索エンジン向けの情報はそのまま残ることが多いので、まずは構造化データのエラーが出ていないかだけチェックしておけば十分な場合も多いです。

 

---

★初心者さん必見★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

よくある質問（SWELLのパンくずリスト非表示）

Q1.SWELLでパンくずリストを非表示にするとSEOに悪影響はありますか？

パンくずリスト自体は、サイト構造を分かりやすくするための要素なので、ある程度はSEOにもプラスに働きます。SWELLのパンくずリストを完全に非表示にすると、特に階層が深いサイトでは、回遊性が少し落ちる可能性はあります。

とはいえ、パンくずを一部のページで非表示にしたからといって、それだけで検索順位が大きく落ちるようなケースはそう多くありません。ブログ記事などでは表示を残し、LPや完了ページだけ非表示にする、スマホだけ非表示にしてPCでは表示するなど、状況に合わせて使い分けるのがおすすめです。

Q2.子テーマを使わずにSWELLのパンくずリストを非表示にしても大丈夫ですか？

CSSだけでSWELLのパンくずリストを非表示にするのであれば、子テーマを使わずに「追加CSS」に書いても問題ありません。テーマ本体のファイルを書き換えるわけではないので、アップデートで消えてしまうリスクも比較的少ないです。

ただし、functions.phpを編集してパンくずの出力そのものを止めたり、テンプレートファイルを直接書き換えたりするようなカスタマイズをする場合は、必ず子テーマを使うのがおすすめです。テーマ本体を直接いじると、アップデートのたびに作業がやり直しになってしまいます。

Q3.プラグインで出しているパンくずリストも一緒に非表示にしたいです

Yoast SEOやBreadcrumb NavXTなど、プラグインでパンくずリストを表示している場合は、プラグイン側の設定で非表示にするか、プラグインで出している要素だけCSSで非表示にする方法があります。

SWELLにはテーマ標準のパンくず機能があるので、プラグインのパンくずと二重表示になっているなら、どちらか片方に統一した方がスッキリします。プラグイン側を使わないなら、その出力部分のクラス名を調べて、SWELLのパンくずと同じようにdisplay:none;で非表示にすると、見た目を整えやすいです。

まとめ｜SWELLでパンくずリストを非表示にしてデザインとSEOを両立しよう

ここまでの内容を整理しておきます

今日の最初の一歩としては、PCとスマホの両方で自分のサイトをざっと見直して、「このページはパンくずがあった方が安心」「このページはなくてもいいかも」というメモを作ってみてください。

そのうえで、この記事で紹介した3つの方法のうち、まずは1ページだけ試せそうなやり方を選んで、テスト用のページでSWELLのパンくずリストを非表示にしてみると、安全に調整が進められます。

少しずつ慣れていけば、「見た目はスッキリ、でも読者や検索エンジンにもやさしい」バランスを自分のサイトに合った形で作っていけるはずです。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ