ご依頼を検討されている方

【HTML入門】パンくずリストとは?作り方とCSSデザイン例5選

URLをコピーする
URLをコピーしました!

パンくずリストを設置したい方『パンくずリストって何?パンくずリストっていらなくない。HTMLやCSSなどを使ってパンくずリストを作成したい』

本記事では【HTML入門】パンくずリストの作り方とCSSデザインについて詳しく解説していきます。

本記事の内容
  1. パンくずリストとは
  2. パンくずリストはいらないのか
  3. 【HTML入門】パンくずリストの書き方
  4. CSSを使ったパンくずリストの作り方

それでは早速、本文に入っていきましょう。

目次

パンくずリストとは

パンくずリストとは
パンくずリストとは

パンくずリストとは、Webサイトの構造を分かりやすく視覚的にしたものです。

一言で表すと、Webサイトの地図です。

本記事では下記のようにパンくずリストが表示されています。

おにちゃん

このように、本記事はHOME>Programing>の中にあることを視覚的に分かりやすくなっています。

パンくずリストのメリットがいまいち分からない方のために、2つほどメリットを紹介させていただきます。

  1. ユーザビリティ向上
  2. SEOに効果的な結果


ユーザービリティ向上

パンくずリストを設置することで、読者は自分がどの記事にいるのかを視覚的に認知することができます。

おにちゃん

おにちゃん塾の統計:パンくずを設置して以降、5%程度のプラスの変化があったため現在も設置しています。

まずは設置してみて、その後マイナスになるようであれば、パンくずリストは外しましょう。


SEOに効果的

Googleはパンくずリスト設置に対してマイナスな発言をしたことがないため、設置は何も影響なしもしくはプラスに働くことが予想されます。

ウェブサイトはユーザーの便宜のために構築するべきであり、すべての最適化はユーザーエクスペリエンスの向上のために調整する必要があります。

引用元:Googleガイドライン

パンくずリストはユーザーエクスペリエンスの向上になると考えている可能性が高いです。

なぜなら、Googleは自社メディアでパンくずリストの作成方法を載せているからです。

パンくずリストの作り方(外部リンク)

よって、パンくずリストは効果的だと考えるのが妥当な気がします。


【よくある質問】パンくずリストはいらない?

→個人的には必要だと考えています。理由は先程説明した通りです。

おにちゃん

Google社の自社メディアにパンくずリスト設置に関する情報を掲載しているからです。

ただ、上記の情報だとパンくずリストの設置は難しいので、設置を検討している方は本記事を参考にしてみてください。


【HTML入門】パンくずリストの書き方

【HTML入門】パンくずリストの書き方
【HTML入門】パンくずリストの書き方

パンくずリストの書き方は4つほどあります。

  1. JSON-LD
  2. RDFa
  3. HTML
  4. microdata←おすすめ

本記事ではmicrodataを活用したパンくずリストの作成方法について詳しく解説していきます。


WordPressの場合はプラグインを活用しましょう

下記で紹介している2021年おすすめのWordPressテーマは基本的にパンくずリストが自動で設置されています。

おにちゃん

しかし、テーマによってははじめからパンくずリストが設置されていない場合もあるので、その場合はBreadcrumb NavXTというプラグインを活用してみてください。

使い方に関しては、下記の記事を参考にしてください。

Breadcrumb NavXT(外部リンク)


パンくずリストの書き方

本記事では、microdata形式を使ってパンくずリストを作成していきます。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="https://onityanzyuku.com" itemprop="item">
      <span itemprop="name">HOME</span>
    </a>
    <meta itemprop="position" content="1">
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="http://onityanzyuku.com/category/blog" itemprop="item">
      <span itemprop="name">BLOG</span>
    </a>
    <meta itemprop="position" content="2">
  </li>
</ol>

用語の理解

  • BreadcrumbList:パンくずリストの指定、リスト内の全ての要素を保持するコンテナアイテム
  • ItemLisetItem:各パンくずリストの配列
  • Item:パンくずを表すウェブページのURL
  • Name:読者に表示されるタイトル
  • position:パンくずリストの順番


機能をチェックしよう

パンくずリストは設置した後は、正常に動作するかを確かめる必要があります。

チェックツールとしては構造化データテストツールを活用しましょう。

おにちゃん

テストツールの使い方は下記の通りです。

パンくずリストが表示されているページのURLを入力してテストすることも可能ですが、今回は、コードスニペットを活用してコードテストしてみましょう。

先程紹介したコードを参考にご自身でパンくずリストを設置してみてください。

その後【テストを実行】をクリックしましょう。

『エラーなし』『警告なし』『URL』『Title』が正しく表示されていれば問題ありません。

ここまでで、【HTML】基本的なパンくずリストの書き方はおしまいです。


パンくずリストのCSSデザイン【随時追加予定】

パンくずリストのCSSデザイン【随時追加予定】
パンくずリストのCSSデザイン

ご要望のあるパンくずリストなどがある方はTwitterなどで押してください。

デザインを作成させていただきます。

<div id="breadcrumb">
<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="https://onityanzyuku.com" itemprop="item">
      <span itemprop="name">HOME</span>
    </a>
    <meta itemprop="position" content="1">
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="http://onityanzyuku.com/category/blog" itemprop="item">
      <span itemprop="name">BLOG</span>
    </a>
    <meta itemprop="position" content="2">
  </li>
</ol>
</div>

先程のコードに<div>を加えています


CSSデザイン①:シンプルなデザイン

#breadcrumb {
  display: flex;
  align-items: center;
  background: coral;
  height: 70px;
  width: 90%;
  margin: 0 auto;
  font-size: 15px;
  font-weight: bold;
  border-radius: 5px;
  ol {
    margin: 0px;
    list-style: none;
    li {
      display: inline;
      padding-left: 5px;
      &::after {
        content: '<';
        padding-left: 5px;
        font-weight: bold;
        color: dimgray;
      }
      &:last-child::after {
        content: '';
      }
      a {
        text-decoration: none;
      }
    }
  }

Sassの使い方が分からない方は下記の記事を参考にしてみてください。

僕は3ヶ月間CSSを勉強した後に、Sassを取り入れたのですが、普通に最初からSassを覚えればよかったと後悔しています。


まとめ:パンくずリストとは?HTML・CSSデザインの書き方5選

まとめ:パンくずリストとは?HTML・CSSデザインの書き方5選
まとめ:パンくずリストの作り方

ここまでは『パンくずリストとは?HTML・CSSデザインの書き方5選について詳しく解説をしました。

本記事のまとめ
  • パンくずリストを設置することで『ユーザビリティ向上』『SEOに効果的』なメリットがあります。
  • パンくずリストいらないと思う方は一度設置した後に、効果がなければ外してみることをおすすめします。
おにちゃん

本記事は以上です。最後までご覧くださりありがとうございました。

おすすめの記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる