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

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


Notice: Undefined offset: 1 in /home/yuuuugablog/yuuuugablog.com/public_html/wp-content/themes/sango-theme-child/functions.php on line 81

こんにちは、ゆうが(@yuuuugablog)です。

今回は、パンくずリストのデザインを紹介していきます。

パンくずリストは、ブログやWebサイトを見ている人に「現在地」を教えてくれる、構造化データのことです。

パンくずリストのデザイン【CSS】

たとえば、ぼくのブログでしたらタイトルの上にある青い文字が、パンくずリストになります。

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

それでは、実際にパンくずリストのデザインを紹介していきます。

スポンサーリンク

パンくずリストのデザイン

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

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://yuuuugablog.com" 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://yuuuugablog.com/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://yuuuugablog.com/category/programming/css"
            itemprop="item"
            ><span itemprop="name">CSS</span></a
          ><meta itemprop="position" content="3" />
        </li>
      </ul>
    </nav>

こちらを軸に今回はCSSのデザインを作っていきます。
※デザインは順次追加していきます。m(_ _)m

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

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

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;
}

シンプル過ぎるパンくずリストのデザインです。

content”>”で矢印を表しました。

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

fontawesomeを使ったパンくずリスト

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;
}

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

FontAwesomeを使っているので、CDNでリンクをもってくるのをお忘れなく。

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

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

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;
}

背景を丸くして、かわいい感じに仕上げました。

実装はわりと簡単で、border-radiusを指定しただけです。

それでは今回は以上です。
記事が参考になれば幸いです。

最後まで見てくださり、ありがとうございました。