このページは準備中です。

パンくずリストが目立つようにスタイルをカスタマイズ

このページは以下の CSS を使って、パンくずリストが目立つようにしてあります。これにより、サイト全体における現在の位置がより把握しやすくなっています。

固定ページが多くて、親→子→孫→…のような深い階層構造を持っているサイトで使うと役に立ちそうです。

.p-breadcrumbs li {
  margin-right: 1.2em;
}
.p-breadcrumbs li {
  padding: 0 0 0 7px;
  margin-top: 5px;
  height: 30px;
  line-height: 30px;
  background: #dd9933; /* 背景色 */
  font-size: 1.2em;
}
.p-breadcrumbs li+li:before {
  display: none;
}
.p-breadcrumbs li:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  border-style: solid;
  border-color: transparent;
  border-left-color: #dd9933; /* 背景色 */
  border-width: 15px 12px;
  width: 0;
  height: 0;
}
.p-breadcrumbs li>a, .p-breadcrumbs li>span {
  color: #fff; /* 文字色 */
}