はじめに
「SWELLのパンくずリストは、どこから非表示にできるの？」
「特定のページだけ消したい場合は、CSSで設定する必要があるの？」と迷っていませんか。
WordPressでSWELLを使ってサイトを整えていると、固定ページや投稿ページの下部に表示されるパンくずリストがデザインに合わず、消し方が分からないまま設定画面を探し続けてしまうこともありますよね。
この記事では、SWELLの設定からパンくずリストを非表示にする方法と、CSSを使って表示を調整する方法が分かります。
SWELLのパンくずリストを非表示にする方法は？
SWELLのパンくずリストを見えないようにしたい場合は、表示位置を変更する方法とCSSで非表示にする方法があります。
ここでは、SWELLの設定でパンくずリストを下部へ移動する方法、CSSで非表示にする方法、特定のページだけ非表示にする方法を順に説明します。
SWELLの設定でパンくずリストを下部へ移動する
SWELLでは、「外観」→「カスタマイズ」→「サイト全体設定」→「パンくずリスト」から表示位置を変更できます。
「パンくずリストの位置」で「コンテンツ下」を選ぶと、本文の下へ移動できます。
完全に非表示になるわけではないため、表示位置だけを変えたい場合に利用しましょう。
CSSでパンくずリストを非表示にする
パンくずリストをサイト全体で非表示にしたい場合は、「外観」→「カスタマイズ」→「追加CSS」に非表示用のCSSを追加します。
パンくずリストのクラスに「display: none;」を指定すれば、画面上から非表示にできます。
設定後はサイトを開き、正しく非表示になっているか確認しておきましょう。
特定のページだけパンくずリストを非表示にする
特定のページだけ非表示にしたい場合は、ページごとのbodyクラスとパンくずリストのクラスを組み合わせてCSSを指定します。
固定ページや投稿のIDを含むクラスを使えば、対象ページだけに「display: none;」を適用できます。
設定後は、ほかのページのパンくずリストまで消えていないか確認しておくと安心です。
「ページIDや投稿IDがどこにあるのか分からない場合は、先に確認方法を知っておくとCSSを指定しやすくなります。」
▶WordPressのページID・投稿IDを確認する方法
パンくずリストを非表示にしたあとに確認すること
パンくずリストを非表示にしたあとは、実際にページを開いて正しく消えているか確認しましょう。
PCとスマホの両方で表示を確認し、パンくずリストが残っていないかチェックします。
CSSを使った場合は、対象ページだけに反映され、ほかのページまで非表示になっていないかも確認しておくと安心です。
「CSSを追加したのに表示が変わらない場合は、キャッシュやCSSの反映状況もあわせて確認してみましょう。」
▶WordPressでCSSが反映されない原因と対処法
まとめ
SWELLのパンくずリストは、表示位置を変えたいのか、完全に非表示にしたいのかによって設定方法が異なります。
まずはSWELLの設定で対応できるか確認し、必要に応じてCSSを使い分けるとよいでしょう。
設定後はPCとスマホで表示を確認し、ほかのページに影響が出ていないかもチェックしておくと安心です。
