SWELLのパンくずリスト背景色を変える方法【簡単設定】

SWELLでサイトを作ったのに、パンくずリストだけグレーの箱が浮いて見えてモヤっとしたことはありませんか。

この記事を読めば、パンくずリストの背景周りの仕組みと整え方がひと通り分かります。

SWELLのパンくずリストと背景色を整えると何が変わる？

パンくずリストとは？SEOとユーザーの迷子防止に効く

パンくずリストは、いま見ているページがサイトのどの位置にいるかを示すためのナビゲーションです。例えば「ホーム > ブログ > カスタマイズ > パンくずリストの背景色」のような表示ですね。

パンくずリストを設置する主なメリットは次の3つです。

• ユーザーが「サイト内のどこにいるか」をすぐ把握できる
• 上位の階層ページにワンクリックで戻れる
• 検索エンジンにもサイト構造が伝わりやすくなる

イメージしやすいように、パンくずリストの有無と背景の整い具合で比べてみます。

状態	ユーザー側の印象	サイト運営側のメリット
パンくずなし	今どこにいるか分かりにくい、戻りづらい	回遊されにくく、離脱につながりやすい
パンくずあり（背景がちぐはぐ）	情報は分かるが、デザイン的に少し違和感	機能はしているが、世界観がやや崩れがち
パンくずあり（背景がサイトと統一）	迷わず、スッと読み進めやすい	回遊しやすく、全体にまとまりが出る

SWELLはパンくずリスト機能が最初から用意されているので、背景や文字色まで丁寧に整えてあげると、サイト全体の印象が一段階引き締まります。

SWELLのパンくずリストの表示位置と基本仕様

SWELLでは、パンくずリストをカスタマイザーから簡単にオン・オフできます。大まかな操作の流れは次のようなイメージです。

• 外観 → カスタマイズを開く
• サイト全体に関する項目からパンくずリスト設定を選ぶ
• パンくずリストを表示するかどうか、どこに表示するかを選択する

実際にどこに表示するかで、使い心地も少し変わってきます。

表示位置	向いているサイト	特徴
タイトル直下	ブログ型、メディア型	読み始める前に現在位置が分かりやすい
本文の一番上	解説記事、マニュアル系	コンテンツの一部として自然に見せられる
フッターの手前	縦長のLP風ページ	読み終わったあと上位ページに戻りやすい

この記事では、タイトル付近や本文上部にパンくずリストを置くケースを前提に、背景色の整え方を解説していきます。

SWELLでパンくずリストの背景色を変える前に知っておきたいこと

SWELLの「パンくずリストの背景効果」とは？

SWELLのパンくずリストには「背景効果」という設定があります。このチェックがオンになっていると、パンくずリスト部分に専用の背景と影が付き、グレーの箱がふんわり浮いたようなデザインになります。

イメージとしては次のような違いです。

• 背景効果オン：グレーの背景と影が付き、ボックスっぽく見える
• 背景効果オフ：周囲の背景となじんだフラットな見た目になる

初期状態のままだと、このグレーの箱がサイト全体のカラーと合わず、「ここだけテンプレ感が強い」と感じることがあります。逆に、白背景でシンプルに作っているブログでは、背景効果をあえて残すことで「ナビゲーションっぽさ」を出すのも一つの手です。

サイト全体の背景色とパンくずリストの関係

パンくずリストの背景だけをいじろうとすると行き詰まりやすいのは、SWELLがサイト全体の背景設定もまとめて扱っているからです。実際には次のような項目が関係してきます。

設定項目	変更する場所のイメージ	パンくずリストへの影響
サイト全体の背景色	サイト全体のカラーをまとめて変える設定	背景効果オフ時のベースカラーになる
コンテンツ背景を白にする設定	記事本文やボックス部分の背景	本文の白とパンくずのコントラストに影響する
パンくずリストの背景効果	パンくず専用の見た目を切り替える設定	オンだとグレーの箱、オフだと周囲の背景と同化しやすい

つまり、パンくずリストの背景をきれいに見せたいときは、次の3点をセットで考えてあげるとスムーズです。

• サイト全体の背景色
• 本文（コンテンツ部分）の背景色
• パンくずリストの背景効果のオン・オフ

この関係を頭の片隅に置いたうえで、具体的な調整に入っていきます。

SWELLでパンくずリストの背景色を変える4つのステップ

ステップ1：パンくずリストを表示しているか確認する

当たり前のようですが、そもそもパンくずリストが表示されていないと、いくら背景色を変えても画面には何も出てきません。まずは表示設定をチェックしましょう。

大まかな流れは次のようになります。

「そういえばパンくずリストをオフにしていたかも」という方は、このタイミングでオンにしておきましょう。

ステップ2：背景効果のオン・オフを決める

次に決めるのは、「パンくずリストの背景効果を使うかどうか」です。ここでサイトの雰囲気が大きく変わります。

ざっくりした目安は次のとおりです。

サイトデザイン	背景効果のおすすめ設定	理由
白ベースのシンプルなブログ	オンでもオフでもOK	オンだと情報のまとまりが強調される
背景色にカラーを使っているサイト	基本的にはオフ	グレーの箱が浮いて見えやすい
写真や画像が多いポートフォリオ	オフ寄り	ボックス感を消してスッキリ見せやすい

私自身は、装飾が少なくフラットなデザインが好きなこともあり、背景効果オフで使うことが多いです。一方で、解説記事やマニュアル系で「ここはナビゲーションです」と分かりやすくしたいときは、背景効果をオンにしてボックス感を残すこともあります。

ステップ3：背景色の方向性をざっくり決める

背景効果のオン・オフを決めたら、つぎは「どんな雰囲気の背景にしたいか」をざっくり決めます。この段階ではまだCSSは書かず、イメージを固めるのが目的です。

サイトタイプ別のおすすめイメージをまとめると、こんな感じです。

サイトタイプ	パンくず背景のイメージ	文字色の目安
シンプルなブログ	白かごく薄いグレー	黒〜濃いグレー
コーポレートサイト	サイト全体の薄いベースカラー	黒〜ダークグレー
ブランドカラーを強く使うサイト	ブランドカラーを薄めたトーン	黒か白（コントラスト重視）
写真・イラスト中心のサイト	背景効果オフでほぼ透明	背景に負けない少し濃い色

ここで「自分のサイトではこうしたいな」という方向性が決まっていれば、このあとのCSS調整も迷いにくくなります。

ステップ4：追加CSSで背景色と文字色を微調整する

カスタマイザーだけでもある程度整えられますが、細かい部分までこだわりたいなら、追加CSSを少しだけ使うのがおすすめです。難しいコードを書く必要はなく、「どこを指定するのか」を知っておけば十分です。

パンくずリストでよく使う主なセレクタは次のとおりです。

セレクタの例	役割	イメージ
#breadcrumb	パンくずリスト全体	箱の色や余白をまとめて調整
#breadcrumb a	パンくず内のリンク文字	クリックできる部分の色など
#breadcrumb .current	現在位置の文字	いまのページ名を強調
#breadcrumb li::before	区切りの記号部分	「>」などの色を変えたいとき

これらを組み合わせながら、少しずつ自分のイメージに近づけていきます。

よく使うCSSコードでSWELL パンくずリスト 背景色を整える

テキスト色・リンク色を変える基本コード

背景色をいじる前に、文字色を読みやすくしておくと全体が整って見えます。まずはテキストとリンクの色を調整しましょう。

イメージとしては、次のような指定を使います。

• パンくず全体の文字を濃いグレーにする
  #breadcrumb { color: #333333; }
• リンク文字をサイトのアクセントカラー寄りにする
  #breadcrumb a { color: #0077aa; }
• 現在位置だけ太字にして色も少し変える
  #breadcrumb .current { font-weight: bold; color: #000000; }

どこを触れば何が変わるのかを、もう少し整理するとこうなります。

やりたいこと	指定する場所	設定のイメージ
文字全体の色を変えたい	#breadcrumb	colorでベースの文字色を決める
リンク部分だけ色を変えたい	#breadcrumb a	色をアクセントカラーに合わせる
現在位置をはっきり目立たせたい	#breadcrumb .current	太字＋濃い色で「今ここ」を示す

この3つを触るだけでも、「なんとなく読みにくいパンくず」がかなり改善されます。

背景色・枠線・余白を整えて「浮いて見えない」パンくずにする

つぎは、パンくずリスト自体の背景色や枠線、余白を整えていきます。ここは好みが分かれますが、個人的によく使うパターンは次の2つです。

• うっすらグレーの背景に細い線を入れる
  #breadcrumb { background-color: #f8f8f8; border: 1px solid #e0e0e0; padding: 8px 12px; }
• 背景は白のまま、下にだけ細い線を引く
  #breadcrumb { background-color: #ffffff; border-bottom: 1px solid #eeeeee; padding: 4px 0; }

それぞれの指定がどんな役割を持っているか整理すると、次のようになります。

プロパティ	役割	パンくずへの見え方
background-color	背景色を決める	箱の色そのものが変わる
border	枠線を付ける	情報のまとまりを強調できる
padding	内側の余白を決める	文字が詰まりすぎず、読みやすくなる
margin	外側の余白を決める	前後のコンテンツとの距離感を調整

少しずつ数値を変えながら、見出しや本文とのバランスを見て調整してみてください。パンくずが主役ではないので、「控えめだけど、ちゃんとそこにいる」という雰囲気を目指すとしっくりきます。

トラブル別：SWELLのパンくずリスト背景色が変わらないときのチェックポイント

背景効果が優先されてCSSが効いていないパターン

一番よくあるのが、パンくずリストの背景効果がオンのままで、CSSの背景指定がうまく反映されていないように見えるケースです。

こんな順番で確認してみてください。

それでも変わらないときは、原因切り分けのために一時的に
#breadcrumb { background-color: #f8f8f8 !important; }
のように!importantを付けてみる方法もあります。あくまで確認用なので、そのまま常用せず、原因が分かったらできるだけ!importantなしで書き直すのがおすすめです。

背景色は変わったが文字が読みにくくなったパターン

パンくずリストの背景色を変えたあと、「色は気に入ったのに、文字がぼんやりして読みにくい」という相談もよくあります。たいていは、背景と文字のコントラストが足りないことが原因です。

対処の流れは次のとおりです。

ポイントは、「一瞬見ただけで内容が読めるかどうか」です。背景も文字も中間的なトーンにしてしまうと、どうしても目が疲れやすくなります。迷ったときは、文字色を一段階だけ濃くしてみると、ぐっと読みやすくなります。

スマホだけ窮屈に見える・パンくずが長すぎて気になるパターン

カテゴリ名や記事タイトルが長いと、パンくずリストも自然と長くなります。PCでは問題なくても、スマホで見ると窮屈に感じたり、行がガタついたように見えることがあります。

そんなときは、次のような調整を検討してみてください。

• スマホ向けにフォントサイズを少しだけ小さくする
• 内側の余白（padding）をスマホでは気持ち少なめにする
• カテゴリ名や階層を必要以上に細かくしすぎていないか見直す

よくあるトラブルと、ざっくりした対処の方向性をまとめるとこうなります。

トラブル内容	考えられる原因	対処の方向性
背景色が変わらない	背景効果がオン、CSSの指定が届いていない	背景効果をオフにして、セレクタを見直す
文字が読みにくい	背景と文字のコントラスト不足	文字色を濃くするか、背景を明るくする
スマホで窮屈に見える	PC前提の文字サイズと余白	スマホ向けにフォントとpaddingを少し調整

パンくずリストは主役ではありませんが、閲覧体験を静かに支えてくれる存在です。目立ちすぎず、かといって読みにくくもない、ちょうど良いバランスを探してみてください。

よくある質問（SWELL パンくずリスト 背景色編）

Q1. パンくずリストは完全に非表示にしてもいいですか？

A. 完全に非表示にしてもサイトは問題なく動きますが、私は基本的にどこかで表示しておくほうをおすすめしています。理由はシンプルで、「いまどこにいるか」が分からないと、ユーザーが迷いやすくなるからです。

どうしてもデザイン上邪魔に感じる場合は、トップページや特定のページだけ非表示にするなど、場面によって出し分ける方法もあります。そのうえで、パンくずリストの背景色を抑えめに整えると、存在感を強調しすぎずにナビゲーションとして機能させることができます。

Q2. パンくずリストの背景色は何色にするのが無難ですか？

A. 一番失敗が少ないのは、「白またはごく薄いグレーの背景」＋「濃いグレーの文字」の組み合わせです。コーポレートサイトなどでブランドカラーがはっきりしている場合は、そのカラーを少しだけ薄めたトーンを背景に使うのもきれいです。

大事なのは、ボタンや見出しよりパンくずリストのほうが目立ってしまわないことです。パンくずが一番派手な色になっていると、「どこを押すべきか」が直感的に分かりにくくなるので注意してみてください。

Q3. CSSを書くのが苦手ですが、カスタマイザーだけで何とかなりますか？

A. 背景効果のオン・オフや、サイト全体の背景色、コンテンツ背景の設定を調整するだけでも、かなり印象は変わります。パンくずリストの背景色だけが極端に浮いている状態は、それだけで解消できることも多いです。

ただ、「文字色はこの色」「枠線は入れたい」「余白ももう少し整えたい」といった細かい部分までこだわるなら、追加CSSを少しだけ使ったほうが自由度は高くなります。この記事で紹介した程度のコードであれば、コピペして色だけ自分のサイトに合わせて変えるだけなので、挑戦しやすいと思います。

まとめ：SWELLのパンくずリスト背景色を整えて「世界観のズレ」をなくそう

この記事の内容を振り返っておきます

今日できる最初の一歩として、まずは自分のサイトを開き、パンくずリストだけに注目して眺めてみてください。ヘッダーや見出しと比べて浮いていないか、文字は読みやすいかをチェックして、気になったところから一つずつ直していきましょう。

ほんの少し背景色や余白を調整するだけでも、「ちゃんと作り込まれているサイトだな」という印象は大きく変わります。ぜひ、自分のサイトに合ったパンくずリストの背景を探してみてください。