HTML と CSS だけで microdata 対応のオシャレなパンくずリストを実装するサンプル

Google の SERP にパンくずリストを表示させられるようにするための microdata 対応のパンくずリストに対応した、HTML + CSS のみで実装できるオシャレなパンくずリストを作ったので良かったら使ってください。

HTML

microdata はこのページからそのまま引用させて頂きました。サンプルですので組み込みの際にお望みの形に変更して頂いても問題ありません。
パンくずリスト – ウェブマスター ツール ヘルプ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="breadcrumbs">
  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/dresses" itemprop="url">
      <span itemprop="title">洋服</span>
    </a></div>  
  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/dresses/real" itemprop="url">
      <span itemprop="title">ドレス</span>
    </a></div>  
  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
      <span itemprop="title">緑のドレス</span>
    </a>
  </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.breadcrumbs {
	border-top: 1px #cdcdcd solid;
	border-bottom: 1px #cdcdcd solid;
}
.breadcrumbs div a {
	float: left;
	height: 30px; /* size A */
	line-height: 30px; /* size A */
	padding: 0px 10px 0 15px; /* size D */
    position: relative;
	font-weight: normal;
	text-decoration: none;
	background: #f9f7ee;
	color: #825624;
}
.breadcrumbs div a:nth-child(n+2) {
	padding-left: 20px; /* size E */
}
.breadcrumbs div a:hover {
	background-color: #f2eede;
}
.breadcrumbs div a:after {
    width: 0;
    height: 0;
    content: " ";
    display: block;
    top: 50%;
    left: 100%;
    z-index: 2;
    position: absolute;
    margin-top: -15px; /* size B */
    border-top: 15px solid transparent; /* size B */
    border-bottom: 15px solid transparent; /* size B */
    border-left: 10px #f9f7ee solid; /* size C */
}
.breadcrumbs div a:hover:after {
	border-left-color: #f2eede;
}
.breadcrumbs div a:before {
    width: 0;
    height: 0;
    content: " ";
    display: block;
    top: 50%;
    left: 100%;
    z-index: 1;
    position: absolute;
    margin-left: 1px;
    margin-top: -15px; /* size B */
    border-top: 15px solid transparent; /* size B */
    border-bottom: 15px solid transparent; /* size B */
    border-left: 10px solid #cdcdcd; /* size C */
}

変更する際に分かりやすいようにコメントを入れておきました。

size A

パンくずリストのバーの高さです。

size B

size A の半分です。

size C

矢印の矢印具合です。

size D

右は size C の + 1/3px くらいです。左側は size C の +5px くらいです。矢印具合によって変わります。

size E

size D の右側の2倍くらいです。

その他

その他の色などはなるべく変更しやすいようにシンプルです。ホバー時とそれ以外の2パターンだと思います。あとサイズですが大方説明させて頂きましたが、結局のところは感覚で設定すればいいと思います。

未対応ブラウザについて

以下のブラウザが未対応です。ある程度ましに表示されるようにはしておきましたが、対応させたい場合は CSS だけだと辛いので背景画像などを使ったものを作ってみてください。

  • IE6
  • IE7
  • IE8

今回参考にさせて頂いた記事

コメント

コメントは受け付けていません。