パンくずリストとは？作り方とCSSデザインサンプル12選

記事内に商品プロモーションが含まれる場合があります

今回は、ウェブサイトやブログなどに設置するパンくずリストについて解説します。「パンくずリストとは何？」というところから具体的な設置方法や、CSSのデザインサンプルまでまとめていきたいと思います。

パンくずリストとは

パンくずリストとは、ユーザーが今WEBサイト上のどこにいるのかを伝える階層順のリストのことです。英語では「breadcrumbs」と言われます。

例えばこれはモスバーガーのパンくずリストです。サイトの階層が分かりやすく示されています。

上のパンくずリストは「今あなたはメニューカテゴリーのハンバーガーページにいますよ」ということを示しているのですね。

また、下の階層のテキストはリンクになっています。

例えば「サイドメニューが見たいなぁ…」というときは、サクッと「メニュー」に戻って探すことができるのです。

パンくずリストを設置するメリット

パンくずリストの設置には２つの意味があります。1つはユーザーにとっての意味、2つめはSEO上の意味です。

ユーザーが迷いにくくなる

カテゴリーの構造が明確になるので「今どこにいるのか」がすぐに分かります。さらに前の階層のテキストはリンクになっているため、サイトを巡回しやすくなります。

さらにパンくずリストを設置すると、Googleの検索結果にも反映されるようになります。

アクセス前から検索ユーザーに対して、カテゴリー構造を伝えることができるわけですね。

SEO効果が期待できる

サイトを分かりやすいカテゴリー構造にしたうえで、正しくぱんくずリストを作れば、SEO上の効果も期待できます。ぱんくずリストのリンクテキスト（アンカーテキスト）にキーワードを入れることができるからです。

例えば、ウェブサイトを以下のような理想的なカテゴリー構造で設計するとします。

「ハンバーガー」「デザート」「サイドメニュー」と分かれており、その下に個別の記事ページがぶら下がっています。ここにパンくずリストを設置してみましょう。

パンくずリストにより「ハンバーガー」のカテゴリーページにすぐ戻ることができます。

パンくずリストのリンクテキスト（アンカーテキスト）には「ハンバーガー」が含まれています。これにより「ハンバーガー」というキーワードをSEO強化しやすくなります。

つまり、カテゴリーページに「ハンバーガー」というキーワードが含まれるリンクが集まるため、検索エンジンに対して「このカテゴリーはハンバーガーに関する内容なんですよ」と伝わりやすくなるわけです。
また、検索エンジンがサイトを巡回（クロール）する際に、サイト構造を把握しやすくなるという効果も期待できます。

カテゴリーを最適化することが重要

カテゴリーが分かりづらかったり、分類の基準があいまいだったりすると、せっかくパンくずリストを設置しても効果は期待できません。上記のメリットは、分かりやすいカテゴリー構造になっていることが前提となります。

パンくずリストについてのQ&A（設置場所など）

作成方法を解説する前に、パンくずリストの分かりづらい部分についてまとめておきます。

ページの上部にのせないとダメ？

下部にのせてもGoogleはパンくずリストを認識してくれます。とはいえ、ほとんどのサイトではページの上部に配置されています。ユーザーにとって馴染みがあり、分かりやすい位置は上部と言えるでしょう。

複数のパンくずリストを設置しても良い？

複数設置した場合、Googleは1つめのパンくずリストを採用するようです。詳しくは海外SEO情報ブログさんの記事が参考になります。

そのページ自体を含める？

そのページ自体をパンくずリストに含めるかどうかは、サイトによってまちまちです。当サイトでは、含めていません。記事のタイトルまでリストに含めると長くなってしまい、ユーザービリティを損ねると考えたからです。

設置場所は？

bodyタグ内のユーザーにとって分かりやすい位置に設置しましょう。「h1タグの上に設置しなければいけない」というようなルールはないのでご安心ください。

Googleはどうやって認識している？

HTMLでパンくずリストを作成する際に「構造化データ」という決まりに則った書き方をします。Googleは決まり通りに書かれたコードを見て「ここがパンくずリストなんだな」と正しく認識してくれます。
といってもよく分からないかと思うので、以下で詳しく解説していきます。

パンくずリストの作り方（HTML）

ここからは具体的な書き方について解説していきます。

【その前に】WordPressの場合

テーマによっては、はじめからパンくずリストが設置されていたりします。でなくとも、Breadcrumb NavXTというプラグインを使えば、簡単に設置ができます。使い方は下の記事が参考になるはずです。

参考

Breadcrumb NavXTの使い方

AdminWebさんの記事です。

ぱんくずリストの書き方

【2020年1月追記】Google検索がdata-vocabulary.orgのサポートを終了したため、schema.orgの書き方に変更しました。

今回は最も一般的なMicrodata（schema.org）という方式での書き方を説明します。

基本的な書き方

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <!-- 1つめ -->
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="ホームのURL">
        <span itemprop="name">ホーム</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>

  <!-- 2つめ -->
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="カテゴリーのURL">
        <span itemprop="name">カテゴリー名</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>

  <!-- 3つめ -->
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="子カテゴリーのURL">
        <span itemprop="name">子カテゴリー名</span>
    </a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

<li>〜</li>の1つのカタマリが1つのパンくず（階層）を表しています。そのため、カテゴリーの階層数によって<li>〜</li>の数は変わります。
少し長くて分かりづらいかと思うので、1つのパンくずを詳しく見てみたいと思います。

1つのパンくずを詳しく見る

<li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
  <a itemprop="item" href="カテゴリーのURL">
      <span itemprop="name">カテゴリー名</span>
  </a>
  <meta itemprop="position" content="2" />
</li>

青色の部分がポイントです。

itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”
liタグの中がパンくずリストであることを示しています。

itemprop=”item”
パンくずのリンク（aタグ）に指定します。

itemprop=”name”
パンくずのタイトル（ホームやカテゴリー名）を含むタグに指定します。

書き方例

実際の書き方の1例を紹介します。例えば、この記事のパンくずリストは、以下のようになります。

HTML

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://saruwakakun.com">
        <span itemprop="name">ホーム</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>

  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://saruwakakun.com/html-css">
        <span itemprop="name">HTML & CSS</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>

  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://saruwakakun.com/html-css/basic">
        <span itemprop="name">入門講座</span>
    </a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

正しく機能するかテストしよう

Googleの構造化データテストツールでパンくずリストが正常に正しく書かれているかどうかをチェックすることができます。

構造化データテスト

テスト手順は以下のようになります。

ページをURLを入力してチェックすることもできますが、パンくずリストのコードだけを貼り付けてテストすることもできます。コードでテストをする場合には［コードスニペット］をクリックします。

パンくずリストのコードを貼り付けて［テストを実行］をクリックします。

パンくずリストに含まれる階層数だけ「Breadcrumb」ボックスが並びます。「エラーなし」かつ「url」と「title」がきちんと表示されていれば、正しく機能しています。

パンくずリストのCSSデザイン例12

ここからはパンくずリストのCSSデザイン例を紹介します。例として使用するHTMLコードは以下になります。CSSで指定するセレクタ（class名など）は、必要に応じて変更して頂ければと思います。 classとはセレクタとは

HTML

<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="ホームのURL">
        <span itemprop="name">ホーム</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>

  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="カテゴリー1のURL">
        <span itemprop="name">カテゴリー1</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>

  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="カテゴリー2のURL">
        <span itemprop="name">カテゴリー2</span>
    </a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

それでは早速紹介していきます。

ベーシックなデザイン

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #52b5ee;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

まずはシンプルなデザインから。>は疑似要素を使って表示しています（一番最後のパンくずに対しては、非表示にするようにしています）。文字色は（color:~の部分）はサイトの雰囲気に合わせて変えて頂ければと思います。
また、フォントは太字にしていますが、font-weight: normalとすれば通常の太さになります。

家のアイコンを表示

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {
  /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: gray;
}

.breadcrumb li:first-child a:before {
  /*家アイコン*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
  color: #2e7fea;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

FontAwesmomeにより「ホーム」の前に家アイコンを表示しています。FontAwesome導入済であれば、コピペでそのまま使えます。導入方法は下の記事をご覧くださいませ。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

なお、FontAwesome5をご利用の場合には、font-family: "Font Awesome 5 Free";に変更してくださいませ。

> の代わりに

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* ▶を表示*/
  font-family: FontAwesome;
  content: '\f0da';
  padding: 0 0.2em;
  color: silver;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #888;
}

.breadcrumb li:first-child a:before {
  /*家アイコン*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
  color: #f3948f;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

FontAwesomeを使用して「>」の代わりに「」を表示しています。また、家のアイコン色も少し変えてみました。
FontAwesome5をご利用の場合には、font-family: "Font Awesome 5 Free";に変更してくださいませ。

パンくずの背景を塗りつぶし

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {
  /* ▶を表示*/
  font-family: FontAwesome;
  content: '\f0da';
  padding: 0 0.3em;
  color: #72a1f7;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  display: inline-block;
  padding: 0.2em 0.8em;
  border-radius: 15px;
  text-decoration: none;
  color: #72a1f7;
  background: #c6e2ff;
  font-size: 0.9em;
}

.breadcrumb li a:hover {
  background: #c9dbfb;
}

それぞれのパンくず部分を薄い水色で塗りつぶしています。「押せるボタン」感が出て良いかもしれませんね。なお「」はFontAwesomeです。
FontAwesome5をご利用の場合には、font-family: "Font Awesome 5 Free";に変更してくださいませ。

FontAwesomeを使わない場合

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {
  /* ▶を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #72a1f7;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  display: inline-block;
  padding: 0.2em .8em;
  border-radius: 15px;
  text-decoration: none;
  color: #72a1f7;
  background: #c6e2ff;
  font-size: 0.9em;
}

.breadcrumb li a:hover {
  background: #c9dbfb;
}

さきほどとほぼ同じですがアイコンフォント「」の代わりに「>」を使っています。

フローなデザイン

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  position: relative;
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  margin-right: 0.8em;
}
.breadcrumb li:after {/*三角の部分*/
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  border-style: solid;
  border-color: transparent;
  border-left-color: #aedfc6;/*背景色*/
  border-width: 14px 12px;
  width: 0;
  height: 0;
}

.breadcrumb li a {
  display: inline-block;
  padding: 0 3px 0 7px;
  height: 28px;
  line-height: 28px;
  text-decoration: none;
  color: #747772;
  background: #aedfc6;/*背景色*/
  font-size: 13px;
}

.breadcrumb li a:hover {
	color: #FFF;
}

右角を尖らせて、フローチャート風にしてみました。もっと派手にすることも考えたのですが、あまりに目をひくパンくずリストも目障りかなと考えたので、このくらいでおさえました。

吹き出し風

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  position: relative;
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  margin-right: 0.3em;
}
.breadcrumb li:after {
  content: "";
  position: absolute;
  top: 7px;
  right: -19px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #feebcc;
  border-width: 7px 12px;
  width: 0;
  height: 0;
}

.breadcrumb li a {
  display: inline-block;
  padding: 0 7px;
  height: 28px;
  line-height: 28px;
  text-decoration: none;
  color: #9b9b9b;
  background: #feebcc;
  font-size: 13px;
  border-radius: 20px;
  transition: 0.3s;
}

.breadcrumb li a:hover {
  transform: translateY(-3px);
}

吹き出しが並んでいくようなユニークなデザインにしてみました。

吹き出し風その2

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  position: relative;
  display: inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  margin-right: 0.2em;
}

.breadcrumb li:after {
  content: "";
  position: absolute;
  top: 7px;
  right: -19px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #e2e2e2;
  border-width: 7px 12px;
  width: 0;
  height: 0;
}

.breadcrumb li:last-child:after {
  content: none;
}

.breadcrumb li a {
  display: inline-block;
  padding: 0 0.3em;
  height: 28px;
  line-height: 28px;
  text-decoration: none;
  color: #9b9b9b;
  background: #e2e2e2;
  font-size: 13px;
  border-radius: 3px;
  transition: 0.3s;
}

.breadcrumb li a:hover {
  transform: translateY(-3px);
}

さきほどのものから背景色を控えめにし、さらに角を少し直角に近づけてみました。このくらい控えめなものがちょうど良いかもしれませんね。

背景をダークカラーで塗りつぶし

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 1em;
  list-style: none;
  background: #555;
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #828282;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #a8a8a8;
}

.breadcrumb li:first-child a:before {
  /*家アイコンに*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

背景全体を暗く塗りつぶしてみました。FontAwesome5をご利用の場合には、font-family: "Font Awesome 5 Free";に変更してくださいませ。そもそも家のアイコンが不要であれば.breadcrumb li:first-child a:before {~}の部分をまるっと削除して頂ければと思います。

明るめの配色に

CSSを表示

CSS

.breadcrumb {
  margin:0;
  padding: 1em;
  list-style: none;
  background: #fef2d6;
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {
  /* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: #8e8270;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #feaa23;
}

.breadcrumb li:first-child a:before {
  /*家アイコンに*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

さきほどのものから配色を明るめに変えてみました。

爽やかな配色に

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 1em;
  list-style: none;
  background: #51a8ff;
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.2em;
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
}

.breadcrumb li:first-child a:before {/*家アイコンに*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

配色を水色系統にして爽やかな雰囲気がでるようにしてみました。

やっぱりシンプル

CSSを表示

CSS

.breadcrumb {
  margin: 0;
  padding: 1.1em 1em;
  list-style: none;
  background: #e9edf5;
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
}

.breadcrumb li:after {
  /* >を表示*/
  font-family: FontAwesome;
  content: '\f101';
  padding: 0 0.2em;
  color: #8186a0;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #273376;
}

.breadcrumb li:first-child a:before {/*家アイコンに*/
  font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

配色を控えめなものにしてみました。このくらいシンプルなものが個人的には良いのではないかと感じています。 FontAwesome5をご利用の場合には、font-family: "Font Awesome 5 Free";に変更してくださいませ。

デザイン指定がうまくいかないときは…

CSSがうまく反映されないときはこちらの記事を参考にしてみてください。

CSSが効かない・反映されないときの対処法まとめ

こちらの記事もどうぞ

CSSで中央寄せする9つの方法（縦・横にセンタリング）

HTMLとCSSの勉強におすすめの本8冊（初心者〜中級者向け）