読み込み中...

HTMLのパンくずリストを徹底解説！作成＆カスタマイズ方法22選

HTMLパンくずリストの作成とカスタマイズ方法を徹底解説 HTML
2023.04.04
この記事は約19分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLにおけるパンくずリストの作成やカスタマイズ方法がマスターできるようになります。

●パンくずリストとは

パンくずリストは、Webページ内での現在地を示すナビゲーションの一種です。

主に、ユーザーがどの階層のページにいるのかを一目で理解しやすくするために使用されます。

○パンくずリストの意義

パンくずリストは、ユーザビリティを向上させるだけでなく、SEO対策にも効果的です。

検索エンジンは、パンくずリストを利用してサイトの構造を理解しやすくなります。

○パンくずリストの基本構造

基本的なパンくずリストの構造は、下記のようになります。

<ol class="breadcrumb">
  <li><a href="/">ホーム</a></li>
  <li><a href="/category">カテゴリ</a></li>
  <li>現在のページ</li>
</ol>

●パンくずリストの作成方法

下記では、手動での作成方法とプラグインを利用した作成方法をご紹介します。

○手動での作成方法

HTMLでパンくずリストを作成する場合は、下記のサンプルコードを参考にしてください。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">ホーム</a></li>
    <li class="breadcrumb-item"><a href="/category">カテゴリ</a></li>
    <li class="breadcrumb-item active" aria-current="page">現在のページ</li>
  </ol>
</nav>

○プラグインを利用した作成方法

CMS（WordPressなど）を利用している場合は、パンくずリストを簡単に作成できるプラグインがあります。

例えば、WordPressでは「Breadcrumb NavXT」というプラグインがおすすめです。

●パンくずリストのカスタマイズ方法

下記では、デザインの変更や構造データの追加方法を解説します。

○デザインの変更

CSSを用いて、パンくずリストのデザインをカスタマイズすることができます。

例えば、下記のサンプルコードでは、パンくずリストのフォントサイズや色を変更しています。

.breadcrumb {
  font-size: 14px;
  color: #666;
}

.breadcrumb a {
  color: #333;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

○構造データを追加

Googleなどの検索エンジンがパンくずリストを理解しやすくするために、構造データを追加することが推奨されています。

下記のサンプルコードでは、構造データを追加しています。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
      <a itemprop="item" href="/">
        <span itemprop="name">ホーム</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
      <a itemprop="item" href="/category">
        <span itemprop="name">カテゴリ</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item active" aria-current="page">
      <span itemprop="name">現在のページ</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

●パンくずリストの対処法と注意点

下記では、SEOへの影響や構造データのエラー対処法について解説します。

○SEOへの影響

パンくずリストは、検索エンジンがサイト構造を理解しやすくするため、SEOにも効果があります。

ただし、適切な構造データを設定しなければ、効果が薄れることがあります。

○構造データのエラー対処法

Google Search Consoleで構造データのエラーが検出された場合は、エラー内容を確認し、修正が必要です。

エラーが解消されたら、再度検証ツールで確認してください。

●応用例とサンプルコード

下記では、マルチカラムレイアウト、ドロップダウンメニュー、モーダルウィンドウのパンくずリストの応用例とサンプルコードをご紹介します。

○応用例1：マルチカラムレイアウト

パンくずリストをマルチカラムレイアウトに適用する場合のサンプルコードです。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <!-- ドロップダウンメニューを追加 -->
    <li class="breadcrumb-item dropdown">
      <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        カテゴリ
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="/category1">カテゴリ1</a>
        <a class="dropdown-item" href="/category2">カテゴリ2</a>
        <a class="dropdown-item" href="/category3">カテゴリ3</a>
      </div>
    </li>
    <!-- 通常のパンくずリスト -->
    <li class="breadcrumb-item active" aria-current="page">現在のページ</li>
  </ol>
</nav>

○応用例2：ドロップダウンメニュー

パンくずリストにドロップダウンメニューを追加する場合のサンプルコードです。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <!-- ドロップダウンメニューを追加 -->
    <li class="breadcrumb-item dropdown">
      <a class="dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        カテゴリ
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="/category1">カテゴリ1</a>
        <a class="dropdown-item" href="/category2">カテゴリ2</a>
        <a class="dropdown-item" href="/category3">カテゴリ3</a>
      </div>
    </li>
    <!-- 通常のパンくずリスト -->
    <li class="breadcrumb-item active" aria-current="page">現在のページ</li>
  </ol>
</nav>

○応用例3：モーダルウィンドウ

パンくずリストにモーダルウィンドウを追加する場合のサンプルコードです。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">ホーム</a></li>
    <li class="breadcrumb-item"><a href="/category">カテゴリ</a></li>
    <li class="breadcrumb-item active" aria-current="page">現在のページ</li>
    <!-- モーダルウィンドウを追加 -->
    <li class="breadcrumb-item">
      <button type="button" class="btn btn-link" data-toggle="modal" data-target="#exampleModal">モーダルウィンドウ</button>
    </li>
  </ol>
</nav>
<!-- モーダルウィンドウのコード -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">モーダルタイトル</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        モーダルの内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

このサンプルコードを参考に、パンくずリストをカスタマイズしてみてください。

独自のデザインや機能を追加することで、ユーザーにとって使いやすいナビゲーションを提供できます。

各サンプルコードを検討し、あなたのウェブサイトに最適なパンくずリストを作成しましょう。

○応用例4：パンくずリストのデザイン変更

下記のサンプルコードでは、パンくずリストのデザインを変更しています。

<style>
  .breadcrumb {
    background-color: #f8f9fa;
    padding: 10px;
  }
  .breadcrumb-item + .breadcrumb-item:before {
    content: ">";
  }
</style>

○応用例5：パンくずリストの文字サイズ変更

下記のサンプルコードでは、パンくずリストの文字サイズを変更しています。

<style>
  .breadcrumb-item {
    font-size: 18px;
  }
</style>

○応用例6：パンくずリストのフォントファミリー変更

下記のサンプルコードでは、パンくずリストのフォントファミリーを変更しています。

<style>
  .breadcrumb-item {
    font-family: "Arial", sans-serif;
  }
</style>

○応用例7：パンくずリストのリンクカラー変更

下記のサンプルコードでは、パンくずリストのリンクカラーを変更しています。

<style>
  .breadcrumb-item a {
    color: #007bff;
  }
  .breadcrumb-item a:hover {
    color: #0056b3;
  }
</style>

○応用例8：パンくずリストのアイコン変更

下記のサンプルコードでは、パンくずリストのアイコンを変更しています。

<style>
  .breadcrumb-item + .breadcrumb-item:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding: 0 5px;
  }
</style>

○応用例9：パンくずリストのアニメーション追加

下記のサンプルコードでは、パンくずリストにアニメーションを追加しています。

<style>
  .breadcrumb-item a {
    transition: color 0.3s;
  }
  .breadcrumb-item a:hover {
    color: #0056b3;
  }
</style>

○応用例10：パンくずリストの位置調整

下記のサンプルコードでは、パンくずリストの位置を調整しています。

<style>
  .breadcrumb {
    position: absolute;
    top: 10px;
    left: 10px;
  }
</style>

○応用例11：パンくずリストのz-index調整

下記のサンプルコードでは、パンくずリストのz-indexを調整しています。

<style>
  .breadcrumb {
    position: relative;
    z-index: 1000;
  }
</style>

○応用例12：パンくずリストに影を追加

下記のサンプルコードでは、パンくずリストに影を追加しています。

<style>
  .breadcrumb {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>

○応用例13：パンくずリストのアクティブなアイテムのスタイル変更

下記のサンプルコードでは、パンくずリストのアクティブなアイテムのスタイルを変更しています。

<style>
  .breadcrumb-item.active {
    font-weight: bold;
    color: #000;
  }
</style>

○応用例14：パンくずリストのアイテム間隔の調整

下記のサンプルコードでは、パンくずリストのアイテム間隔を調整しています。

<style>
  .breadcrumb-item + .breadcrumb-item:before {
    padding: 0 10px;
  }
</style>

○応用例15：パンくずリストのアイテムを丸くする

下記のサンプルコードでは、パンくずリストのアイテムを丸くしています。

<style>
  .breadcrumb-item {
    border-radius: 50%;
    background-color: #f8f9fa;
    padding: 5px;
  }
</style>

○応用例16：パンくずリストのアイテムにマウスオーバー時の背景色変更

下記のサンプルコードでは、パンくずリストのアイテムにマウスオーバー時の背景色を変更しています。

<style>
  .breadcrumb-item a:hover {
    background-color: #e9ecef;
  }
</style>

○応用例17：パンくずリストにフェードインアニメーションを追加

下記のサンプルコードでは、パンくずリストにフェードインアニメーションを追加しています。

<style>
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .breadcrumb {
    animation: fadeIn 1s;
  }
</style>

○応用例18：パンくずリストにスライドインアニメーションを追加

下記のサンプルコードでは、パンくずリストにスライドインアニメーションを追加しています。

<style>
  @keyframes slideIn {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  .breadcrumb {
    animation: slideIn 1s;
  }
</style>

○応用例19：パンくずリストにスライドアウトアニメーションを追加

下記のサンプルコードでは、パンくずリストにスライドアウトアニメーションを追加しています。

<style>
  @keyframes slideOut {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  .breadcrumb.slideOut {
    animation: slideOut 1s;
  }
</style>

○応用例20：パンくずリストのアイテムにツールチップを追加

下記のサンプルコードでは、パンくずリストのアイテムにツールチップを追加しています。

<style>
  .breadcrumb-item {
    position: relative;
  }
  .breadcrumb-item:hover .tooltip {
    display: block;
  }
  .tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;
  }
</style>

○応用例21：パンくずリストのアイテムに吹き出しを追加

下記のサンプルコードでは、パンくずリストのアイテムに吹き出しを追加しています。

<style>
  .breadcrumb-item {
    position: relative;
  }
  .breadcrumb-item:hover .balloon {
    display: block;
  }
  .balloon {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #000;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>

○応用例22：パンくずリストのアイテムに下線を追加

下記のサンプルコードでは、パンくずリストのアイテムに下線を追加しています。

<style>
  .breadcrumb-item {
    text-decoration: underline;
  }
</style>

上述した22の応用例とサンプルコードを参考にして、パンくずリストをカスタマイズし、あなたのウェブサイトに適したデザインを作成してください。

応用例を組み合わせることで、さらに個性的で魅力的なパンくずリストを実現することができます。

実際にウェブサイトに適用する際は、自分のサイトのデザインや色合いと調和するように適切なスタイルを選んでください。

まとめ

今回の記事では、パンくずリストの作り方や使い方、カスタマイズ方法について22の応用例とサンプルコードをご紹介しました。

これらの情報を活用して、初心者の方でも簡単にパンくずリストを実装し、ウェブサイトのユーザビリティを向上させることができます。

パンくずリストはSEOにも効果があるため、上位表示を目指すウェブサイト運営者にとっては必須の要素です。

この記事を読めば、パンくずリストを効果的に活用し、ウェブサイトのSEO対策を強化することができるようになります。

この記事が皆さんのウェブサイト制作や運営のお役に立てれば幸いです。

引き続き、ウェブサイト運営の成功を目指して頑張りましょう！