【コピペでOK】パンくずリストのデザイン3選

こんにちは、ゆうが（@yuuuugablog）です。
今回は、パンくずリストのデザインを紹介していきます。

[box class=”box28″ title=”パンくずリストとは？”]
パンくずリストとは、ブログやWebサイトを見ている人に「現在地」を教えてくれる構造化データのこと。
[/box]

[imgfuki src=”https://cyberprogress.net/wp-content/uploads/2021/02/pankuzu-list.jpg” alt=”パンくずリストのデザイン【CSS】”]
たとえば、ぼくのブログでしたらタイトルの上にある青い文字が「パンくずリスト」になります。
[/imgfuki]

このパンくずリストがあるおかげでページの行き来がしやすくなったり、SEO的にも「ユーザーのためになっている」と良い評価になります。

[box class=”box30″ title=”本記事のもくじ”]

1. パンくずリストのHTML
2. シンプルなパンくずリスト
3. FontAwesomeを使ったパンくずリスト
4. 背景を丸くしたパンくずリスト

[/box]

この記事を書いた人

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細＆記事編集ポリシーはこちら

パンくずリストのHTML

それでは最初に共通のHTMLを紹介していきます。それが下記。

[codebox title=”HTML”]

<nav id="breadcrumb" class="breadcrumb">
      <ul itemscope itemtype="http://schema.org/BreadcrumbList">
        <li
          itemprop="itemListElement"
          itemscope
          itemtype="http://schema.org/ListItem"
        >
          <a href="https://cyberprogress.net" itemprop="item"
            ><span itemprop="name">ホーム</span></a
          ><meta itemprop="position" content="1" />
        </li>
        <li
          itemprop="itemListElement"
          itemscope
          itemtype="http://schema.org/ListItem"
        >
          <a href="https://cyberprogress.net/category/programming" itemprop="item"
            ><span itemprop="name">プログラミング</span></a
          ><meta itemprop="position" content="2" />
        </li>
        <li
          itemprop="itemListElement"
          itemscope
          itemtype="http://schema.org/ListItem"
        >
          <a
            href="https://cyberprogress.net/category/programming/css"
            itemprop="item"
            ><span itemprop="name">CSS</span></a
          ><meta itemprop="position" content="3" />
        </li>
      </ul>
    </nav>

[/codebox]

こちらのHTMLをコピペしてはりつけてください。

それでは、CSSのデザインを紹介していきます。
※デザインは順次追加していきます。m(_ _)m

1. シンプルなパンくずリスト

[center][/center]

[codebox title=”CSS”]

#breadcrumb {
  margin: 0;
  padding: 13px 15px;
}
.archive #breadcrumb {
  padding: 0;
  background: transparent;
}
#breadcrumb ul {
  margin: 0;
}
#breadcrumb li {
  display: inline;
  list-style: none;
  color: gray;
  font-size: 0.87em;
}
#breadcrumb li:after {
  padding: 0 6px;
  color: rgba(0, 0, 0, 0.2);
  content: ">";
  font-size: 14px;
}
#breadcrumb li a {
  text-decoration: none;
}
#breadcrumb li:first-child a:before {
  padding-right: 5px;
  font-size: 1.1em;
  font-weight: normal;
}
#breadcrumb li a:hover {
  color: gray;
  text-decoration: none;
}

[/codebox]

[memo title=”MEMO”]シンプルすぎるパンくずリストのデザインです。content"＞"で矢印を表しました。[/memo]

2. FontAwesomeを使ったパンくずリスト

[center][/center]

[codebox title=”CSS”]

#breadcrumb {
  margin: 0;
  padding: 13px 15px;
}
.archive #breadcrumb {
  padding: 0;
  background: transparent;
}
#breadcrumb ul {
  margin: 0;
}
#breadcrumb li {
  display: inline;
  list-style: none;
  color: gray;
  font-size: 0.87em;
}
#breadcrumb li:after {
  padding: 0 6px;
  color: rgba(0, 0, 0, 0.2);
  font-family: FontAwesome;
  content: "\f0da";
  font-size: 14px;
}
#breadcrumb li a {
  text-decoration: none;
}
#breadcrumb li:first-child a:before {
  padding-right: 5px;
  font-family: FontAwesome;
  font-size: 1.1em;
  font-weight: normal;
  content: "\f015";
}
#breadcrumb li a:hover {
  color: gray;
  text-decoration: none;
}

[/codebox]

当ブログでも使用している、シンプルなパンくずリストデザインです。

[memo title=”MEMO”]FontAwesomeを使っているので、CDNでリンクをもってくるのをお忘れなく。[/memo]

3. 背景を丸くしたパンくずリスト

[center][/center]

[codebox title=”CSS”]

#breadcrumb {
  margin: 0;
  padding: 13px 15px;
}
.archive #breadcrumb {
  padding: 0;
  background: transparent;
}
#breadcrumb ul {
  margin: 0;
}
#breadcrumb li {
  display: inline;
  list-style: none;
  color: gray;
  font-size: 0.87em;
}
#breadcrumb li:after {
  padding: 0 6px;
  color: rgba(0, 0, 0, 0.2);
  content: ">";
  font-size: 14px;
}
#breadcrumb li a {
  text-decoration: none;
  background: #477ff7;
  color: #f4f4f4;

  border-radius: 15px;
  padding: 0.5em;
}
#breadcrumb li:first-child a:before {
  padding-right: 5px;
  font-size: 1.1em;
  font-weight: normal;
}
#breadcrumb li a:hover {
  color: gray;
  text-decoration: none;
}

[/codebox]

背景を丸くしてかわいい感じに仕上げました。ポップな感じに仕上げたい方向け。

[memo title=”MEMO”]実装はわりと簡単で、border-radiusを指定しただけです。[/memo]

[sen]