Home > TagScript > html、css、Java

ベクトルドロー・レベルゼロ

パンくずリストを作成する

新規作成日 2015-11-10
最終更新日

パンくずリストは、現在のページがWebサイト内の階層構造のどこにあるのかを示すナビゲーション(リンク)です。パンくずナビ、トピックパス、フットパスとも呼ばれます。

ページ数が多いWebサイトで、現在見ているページの内容と類似したページを探す際に活用されます。

サイトのアクセスを増やす意味でも、Webサイト内の内部リンクを充実させて、訪れた人が、Webサイト内のページをより多く見てもらう意味でも重要です。

パンくずリストの利点
  • 階層のどこにいるか確認できる
  • 現在のページがどのカテゴリーにあるか確認できる
  • 同じWebサイト内で、同じカテゴリーの別のページを探すことができる。

Webサイトの構造を階層構造で作成する

パンくずリストを利用する際は、フォルダを利用して、Webサイトのそれぞれのページのファイルをカテゴリーごとに階層構造にしておくとパンくずリストとの構造とディレクトリ構造が一致するのでわかりやすくなるとともに、Webサイトの管理が楽になります。

ページを沢山増やしていくと、サイトのどこにどんな内容のページが存在するか把握できなくなって来るので、ディレクトリで構成することは大切です。わたしは、100ページぐらいで、どんなページがあるか管理できなくなりました。

Webデザイン会社に依頼した場合のように、最初に、すべてのページを作成してから公開する場合、カテゴリーの階層構造は整合性が取れています。一方、少数のページのうちから公開を始め、日々、少しづつページを増やしていく個人が運用するWebサイトでは、カテゴリーの階層構造とファイルの階層構造が、少しづつ破綻していきます。

しかし、

後で、それぞれのページファイルの位置を変更することは、URLが変わるので、その対応に手間がかかりすぎます。

ディレクトリ構造は、きちんと考えてつくる必要があります。しかし、途中で、ディレクトリ構造が不適切になることがあります。その場合、パンくずリストのカテゴリーごとに、メニューページをつくることで、様々な、ファイル・ディレクトリに存在するファイルをまとめて管理することが容易になります。

構造や分類の決め方

階層や分類を大まかに決め、カテゴリー名に ターゲット・キーワードを使用します。キーワードの内容も階層構造になるように構成することが大切です。

この判断は、検索エンジンが、パンくずリストをカテゴリー分けに利用しているのではないかという推測に由来しています。

1つのページに複数のパンくずリストが存在しても問題ありません。

しかし、検索エンジンは、複数のパンくずリストが存在する場合、最初に登場するパンくずリストを利用することに注意が必要です。

パンくずリストのhtml表記

パンくずリストのデザインは、特に拘ることろでは、ありません。

一般に、htmlは、olタグ(リストタグ)を利用し、デザインは、cssで指定し、クラスを利用して指定します。

パンくずリストは、それぞれの項目の順序に意味があるため、ulタグではなく、olタグを利用する方が適切です。

htmlの記述スタイルを同じにしておくと、クラス指定のみでデザイン変更できます。

pタグを使って表現する

pタグを使うと簡単に表記できます。

	<p class="topicPath">
	<a href="#">Home</a> &gt; 
	<a href="#">Category1</a> &gt;
	<a class="active" href="#">Category1-1</a></p>

pタグで表現する場合は、cssの設定は不要です。

連番付きリストを使用して表現する

    <ol class="topic-path">
      <li><a href="#">Home</a></li>
      <li class="active"><a href="#">Category1</a></li>
    </ol>

連番付きリストで表記する場合は、cssの設定が必要です。

クラス名は、breadcrumbか、topic-pathのどちらかが使われることが多いと思います

パンくずリストの表現例

/* トピックパス */

/* リスト */
ol.topic-path {
  margin-top: 3rem; /* マージン */
  padding: 5px 0 5px 5px; /* パディング */
  background-color: #100386; /* 背景色 */
  font-size: 80%; /* 文字サイズ */
  height: 0.8rem;
  }
  /* リスト項目 */
  ol.topic-path li {
  padding-left: 5px; /* 左パディング */
  display: inline; /* 項目を横並び */
  }
  /* リンクエリア */
  ol.topic-path li a {
  padding-right: 10px; /* 右パディング */
  text-decoration: none;  /* リンクテキストの下線を非表示にする */
  }

  /* リンク色 */
  ol.topic-path li a {
  color: #2396f5;
  }
  /* リンク色(マウスオーバー) */
  ol.topic-path li a:hover {
  color: #23c8fa;
  }
  /* 現在の項目 */
  ol.topic-path li.active a{
    color:  #15eb92;
  }
  ol.topic-path li::after {
    content: "/";
   }

連番リストを使ったパンくずリストのcssデザイン

パンくずリストに関する情報