【コピペOK】パンくずリストの設置方法（便利なプラグインも紹介）

ユーザーが今どのページを見ているのか分かりやすくするため、パンくずリストを設置しているサイトが多いですね。今回は、そんな「パンくずリスト」についてご紹介します。

パンくずリストの例

弊社のサイトに設置しているパンくずリストの例です。

現在どのページを見ているのか把握でき、また、階層が上のページに戻ることができるようになっています。

パンくずリストのコード例

実際にコードの例を見ていきたいと思います。

パンくずリストのコード例（HTML）

<ol>
  <li><a herf="https://hoge.com">トップ</a></li>
  <li><a herf="https://hoge.com/project/">事業内容</a></li>
  <li>事業内容Aのタイトルタイトルタイトルタイトル</li>
</ol>

パンくずリストは、順番に意味があるリストですので、ulではなくolを使用するのが適切です。

ul/ol/dlの使い分けについては、こちらをチェック

[card url=”https://note.spiqa.design/wp/list-style-type/”]

パンくずリストのコード例（CSS）

.pankuzu ol{
  display:flex;
  white-space: nowrap;
}

.pankuzu ol li{
  list-style:none;
  padding-right:30px;
}

.pankuzu ol li:not(:last-child) {
 position:relative;
 padding-right:50px;
}

.pankuzu ol li:not(:last-child) ::after{
  content: ">";
  display: block;
  position: absolute;
  width: 10px;
  height: 15px;
  top: 0px;
  right: 20px;
}

.pankuzu ol li a{
  cursor:pointer;
}
.pankuzu ol li a:hover{
  opacity:.7;
} 

パンくずリストは、横並びになっているものが多いので、こちらではdisplay:flex;で横並びにしています。

忘れないように気を付けたいポイントは、white-space: nowrap;です。

これは、文字列を折り返さないようにするための指定です。
この指定を行わずに、画面幅を狭くすると文字が折り返してしまって、格好の悪い見た目になってしまいます。

　なお、画面幅が狭い時の見せ方については、下でご紹介いたします！

パンくずリストの完成形

上記をコピペしていただくと、以下のようなパンくずリストが完成します。

画面幅が狭い時（スマートフォン）の見せ方

パンくずリストは、下層ページでは、横に長くなりがちです。

画面幅が狭くなったら折り返す

折り返して表示したい場合は、.pankuzu ol に flex-wrap:wrap; の折り返し指定を追記します。

.pankuzu ol{
  display:flex;
  white-space: nowrap;
  flex-wrap:wrap;  /*  << 追記  */
}

こちらに例を作成したので、右上のEDIT ON CODEPEN をクリックして、画面幅を変えてみてください！

See the Pen by spiqa design (@spiqa_design) on CodePen.

画面幅が狭くなったらスクロールさせる

こちらは、スクロールさせる例です。

See the Pen by spiqa design (@spiqa_design) on CodePen.

スクロールの例については、こちらの記事に詳しく書いていますので、ぜひ見てみてください！

[card url=”https://note.spiqa.design/wp/pankuzu-scroll/”]

簡単にパンくずリストを作成できるWPプラグイン

WordPressでWebサイトを作っている場合、パンくずリストが簡単に作成できるプラグインがあります。
Breadcrumb NavXT というプラグインがおすすめです。

プラグインの使い方については、こちらの記事で詳しく紹介されていますので、参考にしてみてください。

とにかく簡単にパンくずリストを作成したい！という方は、プラグインを導入しちゃいましょう。

まとめ

今回は、パンくずリストについてご紹介しました。

パンくずリストの設置で、ユーザーにとって分かりやすいWebサイトにできると良いですね！

こちらもおすすめ

[card url=”https://note.spiqa.design/wp/parallax/”]