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

パンくずリストとは:書き方とデザイン

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

パンくずリストとは

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

モスバーガーのパンくずリスト

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

パンくずリストの意味

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

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

クリックでメニューに戻ることができる

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

設置するメリット

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

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

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

検索エンジンに表示される

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

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

SEO効果が期待できる

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

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

正しいカテゴリー構造

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

パンくずリスト

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

アンカーテキストにハンバーガーを含める

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

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

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

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

パンくずリストについての疑問(設置場所など)

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

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

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

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

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

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

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

設置場所は?

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

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

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

パンくずリストの作り方(HTML)

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

【その前に】コードとか読んでられない場合

コードを読むと頭痛がしてくる…という方は、以下の方法を取ればサクッと設置ができます。

WordPressの場合

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

参考
Breadcrumb NavXTの使い方
AdminWebさんの記事です。

はてなブログの場合

はてなブログの場合、公式機能でデスクトップ表示にはパンくずリストを表示することができます。一方で、スマホ版の表示には公式対応していません(2017年6月現在)。そこで下の記事を参考に設置するのがおすすめです。

参考
はてなブログでパンくずリスト
池田仮名さんのブログです。

ライブドアブログ

ライブドアブログも公式ではぱんくずリストの表示に対応していません。そこで、以下の記事の方法を取ると良いのではないかと思います。

参考
ライブドアブログでパンくずリスト
「自作とゲームと趣味の日々」さんの記事です。

ぱんくずリストの書き方

今回は最も一般的なMicrodata(マイクロデータ)という方式での書き方を説明します。

基本的な書き方

<ul class="breadcrumb"> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="ホームのURL" itemprop="url"> <span itemprop="title">ホーム</span> </a> </li> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="カテゴリーURL" itemprop="url"> <span itemprop="title">カテゴリー名</span> </a> </li> <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="子カテゴリーのURL" itemprop="url"> <span itemprop="title">子カテゴリー名</span> </a> </li> </ul>

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

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

<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="カテゴリーURL" itemprop="url"> <span itemprop="title">カテゴリー名</span> </a> </li>

青色の部分でそれぞれのタグの役割が示されています。

itemscope=”itemscope” itemtype=”~/Breadcrumb”
liタグの中がパンくずリストであることを示しています。

itemprop=”url”
中にパンくずのURLが含まれていることを示します。。

itemprop=”title”
中がパンくずのタイトル(ホームやカテゴリー名)であることを示します。

書き方例

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

HTML
<ul class="breadcrumb">
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="https://saruwakakun.com" itemprop="url">
      <span itemprop="title">ホーム</span>
    </a>
  </li>
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="https://saruwakakun.com/html-css" itemprop="url">
      <span itemprop="title">HTML&amp;CSS</span>
    </a>
  </li>
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="https://saruwakakun.com/html-css/basic" itemprop="url">
      <span itemprop="title">Webデザイン入門</span>
    </a>
  </li>
</ul>

WordPressでパンくずリストを自動出力する

きちんと作ろうとすると結構たいへんです。記事ページ、カテゴリーページ、検索結果表示ページなどでそれぞれ出力用のコードが異なるからです。プラグインを使わずに自力で実装する場合には、下の記事を参考にすると良いかと思います。とても分かりやすくまとまっています。

参考
WordPressでのパンくずリストの作り方
Web Design Recipeさんの記事です。

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

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

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

コードスニペットをクリック

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

コードを貼り付けて実行

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

エラー無しと出れば成功

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

CSSのデザインサンプル15

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

HTML
<ul class="breadcrumb">
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="" itemprop="url">
      <span itemprop="title">ホーム</span>
    </a>
  </li>
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="" itemprop="url">
      <span itemprop="title">カテゴリー1</span>
    </a>
  </li>
  <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="" itemprop="url">
      <span itemprop="title">カテゴリー2</span>
    </a>
  </li>
</ul>

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

ベーシックなデザイン

デザイン1

CSSを表示
CSS
.breadcrumb {
  padding-left:0;
  margin-left:0;
}

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

.breadcrumb li:after{/* >を表示*/
  content: '>';
  padding: 0 3px;
  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-left:0;
  padding-left:0;
}

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

.breadcrumb li:after{/* >を表示*/
  content: '>';
  padding: 0 3px;
  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導入済であれば、コピペでそのまま使えます。導入方法は下の記事をご覧くださいませ。

> の代わりに

daga-7.png

CSSを表示
CSS
.breadcrumb {
  margin-left: 0;
  padding-left: 0;
}

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

.breadcrumb li:after{/* ▶を表示*/
  font-family: FontAwesome;
  content: '\f0da';
  padding: 0 3px;
  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を使用して「>」の代わりに「」を表示しています。また、家のアイコン色も少し変えてみました。

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

円で囲むデザイン

CSSを表示
CSS
.breadcrumb {
  margin-left: 0;
  padding-left: 0;
}

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

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

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

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

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

それぞれのパンくず部分を薄い水色で塗りつぶしています。「押せるボタン」感が出て良いかもしれませんね。なお「」はFontAwesomeです。

FontAwesomeを使わない場合

別のデザインに

CSSを表示
CSS
.breadcrumb {
  margin-left: 0;
  padding-left: 0;
}

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

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

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

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

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

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

フローなデザイン

フローチャート風

CSSを表示
CSS
.breadcrumb {
  margin-left: 0;
  padding-left: 0;
}

.breadcrumb li{
  position: relative;
  display:inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  margin-right: 12px;
}
.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{
  padding-left:0;
  margin-left:0;
}

.breadcrumb li{
  position: relative;
  display:inline-block;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
  margin-right: 6px;
}
.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

吹き出しその2

CSSを表示
CSS
.breadcrumb {
  margin-left:0;
  padding-left:0;
}

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

.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 7px;
    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-left:0;
  background: #555;
  padding: 9px 10px;
  overflow: hidden;
}

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

.breadcrumb li:after{/* >を表示*/
  content: '>';
  padding: 0 3px;
  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;
}

背景全体を暗く塗りつぶしてみました。家のアイコンが不要であれば.breadcrumb li:first-child a:before{~}の部分をまるっと削除して頂ければと思います。

明るめの配色に

パンくずをオレンジに

CSSを表示
CSS
.breadcrumb {
  margin-left:0;
  background: #fef2d6;
  padding: 9px 10px;
  overflow: hidden;
}

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

.breadcrumb li:after{/* >を表示*/
  content: '>';
  padding: 0 3px;
  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-left:0;
  background: #51a8ff;
  padding: 9px 10px;
  overflow: hidden;
}

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

.breadcrumb li:after{/* >を表示*/
  content: '>';
  padding: 0 3px;
  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-left:0;
  background: #e9edf5;
  padding: 12px 10px;
  overflow: hidden;
}

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

.breadcrumb li:after{/* >を表示*/
  font-family: FontAwesome;
  content: '\f101';
  padding: 0 3px;
  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;
}

配色を控えめなものにしてみました。このくらいシンプルなものが個人的には良いのではないかと感じています。

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

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

サルワカ