Programming

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

おにちゃん
おにちゃん

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

▲想定読者

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

 

本記事の内容

  1. パンくずリストとは
  2. パンくずリストはいらないのか
  3. 【HTML入門】パンくずリストの書き方
  4. CSSを使ったパンくずリストの作り方
おにちゃん
おにちゃん
  • 大学生エンジニア
  • ブログ収入:月7万円程度
  • SNSフォロワー:6500人程度

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

パンくずリストとは

パンくずリストとは

パンくずリストとは

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

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

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

おにちゃん
おにちゃん

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

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

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

 

ユーザービリティ向上

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

おにちゃん
おにちゃん

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

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

 

SEOに効果的

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

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

引用元:Googleガイドライン

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

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

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

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

 

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

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

おにちゃん
おにちゃん

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

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

 

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

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

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

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

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

 

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

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

【2021年版】WordPressのおすすめテーマ6個を解説【SEO対策】
【2021年版】WordPressのおすすめテーマ6個を解説【SEO対策】【2020年版】WordPressのおすすめテーマ6個を解説【SEO対策】。弊サイトでは有名ブロガー達が推薦しているテーマを統計的にまとめているため、非常に参考になる記事になっています。ぜひ、ご覧ください。...
おにちゃん
おにちゃん

しかし、テーマによってははじめからパンくずリストが設置されていない場合もあるので、その場合は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デザイン【随時追加予定】

ご要望のあるパンくずリストなどがある方は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の使い方が分からない方は下記の記事を参考にしてみてください。

【初心者向け】Sass(Scss)の基本的な書き方【分かりやすく】
【初心者向け】Sass(Scss)の基本的な書き方5選【分かりやすく】Sassの書き方について詳しくまとめました。Sassとは、Sassの基本的な書き方を知りたい方向け...

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

 

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

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

まとめ:パンくずリストの作り方

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

本記事のまとめ

パンくずリストを設置することで『ユーザビリティ向上』『SEOに効果的』なメリットがあります。

パンくずリストいらないと思う方は一度設置した後に、効果がなければ外してみることをおすすめします。

おにちゃん
おにちゃん

本記事は以上です。

 

ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事