LightningでパンくずリストをCSSで簡単に非表示にする方法

2025 10/29

2025/10/29

はじめに

この記事では、WordPressの人気テーマ「Lightning」で表示されるパンくずリスト（Breadcrumb）を主にCSSで非表示にする方法を分かりやすく説明します。パンくずリストの役割や必要性についても触れ、表示位置の変更や一部だけ非表示にする方法、さらに高度なカスタマイズまで順を追って学べます。

この記事の目的

Lightningテーマで表示されるパンくずリストを安全に非表示にする方法を理解する
CSSだけでできる手順を中心に、表示位置の調整や一部非表示のコツを知る

対象読者

WordPressの管理画面にアクセスできる方
テーマ編集やカスタマイズをこれから学ぶ初心者の方も歓迎します

前提と注意点

子テーマや追加CSS機能を使って変更することを推奨します。直接テーマファイルを編集すると更新で上書きされる恐れがあります。
変更前にサイトのバックアップを取ってください。万が一に備える簡単な対策です。

以降の章で、具体的なCSSの書き方や設定手順、表示位置を変える方法を図解と例で丁寧に説明します。まずは基本の考え方から一緒に進めましょう。

パンくずリストとは？その役割と必要性

1. パンくずリストの定義

パンくずリストは、現在のページがサイト内のどの位置にあるかを示す小さなナビゲーションです。典型的には「ホーム > カテゴリ > 記事」のように階層を矢印や記号でつなぎます。ユーザーが現在地を一目で把握できます。

2. 主な役割

道案内：今いる場所と上位ページへの移動をわかりやすくします。
離脱防止：目的のページに戻りやすく、ユーザーが迷いにくくなります。
閲覧効率の向上：階層をたどって関連ページに移動できます。

3. SEOとアクセシビリティへの効果

検索エンジンは階層構造を理解しやすくなり、リッチリザルトの対象になる場合があります。スクリーンリーダーにも配慮すると、視覚に頼らない利用者にも親切です。

4. 具体例で理解する

例えば商品サイトなら「ホーム > メンズ > ジャケット > 商品名」。この表示でユーザーはカテゴリに戻ったり、同じカテゴリの他商品へ移動できます。

5. Lightningテーマとの関係

Lightningテーマは標準でパンくずリストを表示します。見せたくない場合や位置を変えたい場合は、後の章でCSSや設定による非表示・移動方法を紹介します。

Lightningテーマでパンくずリストを非表示にする方法

Lightningテーマでパンくずリストを簡単に非表示にできます。管理画面から追加CSSを使う方法を中心に、操作手順と注意点をわかりやすく説明します。

手順（初心者向け）

WordPress管理画面で「外観」→「カスタマイズ」を開きます。
左メニューの「追加CSS」を選びます。
下記のコードを貼り付けて「公開」をクリックします。

.breadcrumb,
.breadcrumb-list,
#breadcrumb {
  display: none;
}

このコードは多くのLightning系テーマで使われるクラスやIDに効きます。テーマやカスタマイズ状況でセレクタ名が異なる場合がありますので、ブラウザの開発者ツール（検証）で実際のクラス名やIDを確認してください。

よくある補足

特定のページだけ非表示にしたい場合は、bodyクラスを使ってセレクタを絞ります（例: .home .breadcrumb { display: none; }）。
キャッシュプラグインやブラウザキャッシュをクリアすると変更が反映されやすくなります。
テーマの構造を直接編集すると更新で上書きされるので、追加CSSか子テーマの利用をおすすめします。

ご不明点があれば、実際のHTMLのクラス名を教えていただければ、より正確なCSSを提案します。

パンくずリストの一部をCSSで非表示にする方法

概要

パンくずリストの特定の要素だけを見えなくしたいときは、CSSで対象を指定して非表示にします。最も簡単なのは display:none; を使う方法です。

実例（よく使うセレクタ）

/* 最初の要素（例：「ホーム」）を非表示 */
.breadcrumb-list li:first-child {
  display: none;
}

/* 2番目の要素だけを非表示 */
.breadcrumb-list li:nth-child(2) {
  display: none;
}

/* 特定のクラスを付けた要素を非表示 */
.breadcrumb-list li.hide-item {
  display: none;
}

見え方の違いと使い分け

display:none; は完全に要素を消します。見た目と読み上げの両方から消えます。SEOや音声ユーザーへの影響を考慮してください。
visibility:hidden; は見えなくなりますがレイアウト上の空白は残ります。

見た目だけ隠す（画面リーダーは残す）

視覚だけ隠したい場合はスクリーンリーダー用のクラスを使います。

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

対象のliにclassを付ければ、見た目は消えて読み上げは残せます。

注意点

スマホやキャッシュを必ず確認してください。
リンクを非表示にするとユーザーの回遊に影響します。必要性を検討してから適用してください。

パンくずリストの表示位置を変更するカスタマイズ

管理画面から位置を変える手順

外観 → カスタマイズ → デザイン設定 → パンくずリストを開きます。
表示位置の項目で「ヘッダー下」「コンテンツ上」「フッター上」などを選びます。
プレビューで確認して「公開」を押します。
具体例：ヘッダー下を選ぶとページタイトルの下に表示され、サイト構成がひと目で分かりやすくなります。

PHPフィルタ（vk_breadcrumb_html）でHTML自体を変更する

もっと自由にカスタマイズしたい場合は、vk_breadcrumb_htmlフィルターでHTMLを置き換えます。子テーマのfunctions.phpかカスタムプラグインに以下を追加してください。

add_filter('vk_breadcrumb_html', 'my_custom_breadcrumb');
function my_custom_breadcrumb($html){
  // 例：独自のラッパーを付ける
  $html = '<nav class="my-breadcrumb">' . $html . '</nav>';
  return $html;
}

この方法なら位置変更だけでなく、構造やクラス名、マイクロデータの追加も可能です。変更前に必ずバックアップを取り、子テーマで作業してください。

注意点とおすすめ

管理画面の設定で大半は済みます。小さな見た目調整ならCSSで対応すると簡単です。
HTMLを書き換える場合はマークアップやアクセシビリティに注意してください。

パンくずリストのカスタム・動的変更方法

パンくずリストをページやカテゴリごとに動的に変更するには、フィルターフック vk_breadcrumb_html を使います。通常はテーマの functions.php やカスタムプラグインに記述します。

add_filter('vk_breadcrumb_html', function($breadcrumb_html){
    // 条件に応じて書き換え
    return $breadcrumb_html;
});

以下に実用例を示します。

1) 特定カテゴリではパンくずを非表示にする

add_filter('vk_breadcrumb_html', function($html){
    if(is_category('news')) return '';
    return $html;
});

2) カスタム投稿タイプのアーカイブでラベルを変更する

add_filter('vk_breadcrumb_html', function($html){
    if(is_post_type_archive('product')){
        $html = str_replace('アーカイブ', '商品一覧', $html);
    }
    return $html;
});

3) 最後に動的な項目を追加する（例：ログインユーザー名）

add_filter('vk_breadcrumb_html', function($html){
    if(is_singular('article') && is_user_logged_in()){
        $user = wp_get_current_user();
        $html .= '<span class="vk-breadcrumb-item">'.esc_html($user->display_name).'</span>';
    }
    return wp_kses_post($html);
});

ポイント：条件判定には is_singular(), is_category(), has_term(), get_post_type() などを使います。出力は必ずサニタイズして戻してください。テストは本番前に行ってください。

まとめ：Lightningでパンくずリストを自由に非表示・カスタマイズ

この章では前章までで説明したポイントを整理し、実際の運用でどう選ぶかを分かりやすく説明します。

手軽さ重視：CSSで非表示
追加CSSに.breadcrumbや.breadcrumbsなど該当クラスを指定するだけで隠せます。管理画面だけで済むので、初心者に向きます。
部分的に非表示にする場合
li要素やnth-childで特定の階層だけ消せます。例として特定のパン屑だけ不要ならli:nth-child(1){display:none;}のように指定します。デザイン調整に便利です。
表示位置を変える場合
カスタマイザーやテーマのオプションで位置を変更できます。ヘッダー下、記事上、またはウィジェット領域など、デザインに合わせて移動してください。
高度な制御（動的な表示制御）
PHPのフィルターフックで条件に応じてパンくずを生成・除外できます。カテゴリや投稿タイプごとに出し分けたい場合に向きます。編集前に子テーマやバックアップを準備してください。
SEOへの配慮
パンくずは構造化データとして検索エンジンに有益です。完全に非表示にする前に、サイト構成やユーザー導線、検索結果での見え方を確認してください。視覚的に非表示にしてもHTMLに残す方法や、構造化データだけ残す方法も検討してください。