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.11.12

    【コピペOK】JavaScriptとCSSでタイピングアニメーションを実装

    CSS

    JavaScript

  • 2021.11.02

    CSSのcursor:pointerが効かない時にまず確認したい3つのこと

    CSS

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

おすすめ記事

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    JavaScript

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

  • 2021.08.24

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

    WordPress

WPサービス

×