CSS

2021.08.03

【コピペ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の使い分けについては、こちらをチェック

パンくずリストのコード例(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 olflex-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.

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

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

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

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

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

まとめ

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

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

こちらもおすすめ

関連記事

  • 2021.07.29

    【おすすめ書籍】一冊で固められる基礎!超欲張りな参考書

    CSS

    HTML5

    JavaScript

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    CSS

おすすめ記事

  • 2021.08.24

    現場で使える!WordPressおすすめ書籍(書評)

    WordPress

  • 2021.08.11

    初心者必見!最初に読んでおきたいgoogleアナリティクスのおすすめ書籍

    その他

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!