Blogger Labo：【Vaster2】パンくずリストのカスタマイズ

このページでは、Vaster2のパンくずリストのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら


パンくずリストのカスタマイズ



Vaster2のパンくずリストとは、記事ページの最上部に設置されているもののこと。

サイト内でのページ位置を階層順に示すリストで、そのページの位置を分かりやすくするものらしい。

パンくずリストのCSS


 パンくずリストの包括的な設定 

.breadcrumb-wrapper {
   margin: 30px 0 15px;　上・左右・下の外側の余白
}

 パンくずリストの設定 

.breadcrumb {
   padding:0 !important;　四方内側の余白
}

 パンくずリストのリンクの設定 

.breadcrumb a {
   color: #666;　文字色
   font-size:13px;　文字サイズ
   text-decoration:none;
}

  パンくずリストのリストの設定 

.breadcrumb li {
   display: inline;
   list-style-type: none;
}

 パンくずリストのリストの後ろの設定 

.breadcrumb  li:after {
   content: " > ";　リストの後ろに来る文字
}

上記が Vaster2のパンくずリストのCSSに説明を加えたもの。

基本的には「/*   パンくずリスト」で検索して上記CSSを書き変えれば、好みに合わせて変更できる。

備考


Vaster2のパンくずリストの設定はトップページの記事リストの高さに影響する


変更前
変更後

Vaster2の初期設定では、トップページの記事リストとサイドバーの高さにズレがある。

サイドバーに枠線を引いた場合、この高さのズレが気になってくる。

このズレの原因を探っていくと、どうやら原因はパンくずリストのCSSらしい。

この問題は「.breadcrumb-wrapper {}」のmarginを「margin:0;」に変えることで解決できた。

しかし、パンくずリストが「.main-outer{}」の最上部に位置してしまう。

ここで「.main-outer{}」にpaddingを設定すると再びズレてしまう。

当サイトでは なんとかして直したのだが、そのなんとかが思い出せない。

なので、とりあえず「記事リストのズレはパンくずリストが原因」ということだけ書き残しておく。