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

この投稿は以下の 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; /* 文字色 */
}

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

WordPress を使用したサイト制作・カスタマイズは全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ