Home > TagScript > html、css、Java

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

パンくずリスト

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

検索キーワードとして使われる単語を使って、作成するとSEO面から考えると内部リンクが増えるので有利になると言われています。そして、閲覧者から見るとカテゴリー間の移動ができるので、記事が探しやすくなります。

パンくずリストのhtml表記

pタグを使って表現する

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

	<p class="topicPath">
	<a href="#">Home</a> &gt; 
	<a href="#">Category1</a> &gt;
	<a 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デザイン

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

このエントリーをはてなブックマークに追加

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011-2018 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」