【カスタマイズ】SANGOのパンくずリストを微調整するCSS

SANGOパンくずリストを少し大きくして微調整しましたので紹介します。

微調整した内容としては、下記の内容になります。

アイコンを変更
最後の記号の削除
パンくずリストの文字を調整

今表示されているパンくずリストのデザインのCSSになるように更新するので、どんな感じかは、ヘッダーをCHECK!

注意

本記事の内容でデザインが崩れたなどの責任は一切負いませんので、自己責任でカスタマイズしてください。

読みたいとこから

SANGOのパンくずリストをに微調整する方法
まとめ

SANGOのパンくずリストをに微調整する方法

今回の内容はCSSに追加するだけでカスタマイズ可能です。

CSSコードを記載してますので、コピペでも変更可能です。

パンくずリストのアイコンを変更にするには「スタイルシート（style.css）」を開き、下記のコードを追記してください。

文字色は、リンク色がそのまま反映されるようにしています。

パンくずリストのアイコンを変更

/*************************************************
パンくずリストのアイコンを変更
**************************************************/
#breadcrumb li:first-child a:before {
    padding-right: 5px;
    font-size: 1.3em;
    content: "\f015";
}

アイコンはFont Awesomeから好きなアイコンを選んでくださいね。

参考 Font AwesomeへのリンクFont Awesome

カテゴリ最後の記号を削除

記号の色や、スペースはお好みで変更してください。

カテゴリ最後の記号を削除

/*************************************************
カテゴリ最後の記号を削除
**************************************************/
#breadcrumb li:last-child:after {
    display: none;
}

パンくずリストの文字を調整

これくらいがいいかなというサイズを指定していますが、ブログの雰囲気に合わせて変更してください。

パンくずリストの文字を調整

/*************************************************
パンくずリストの文字を調整
**************************************************/
#breadcrumb {
    font-size:16px;
    letter-spacing: .1em;
}

スマホの場合は中央寄せ

スマホの場合、パンくずリストを中央寄せにするCSSです。

スマホ中央寄せ

/*************************************************
スマホの場合は中央寄せ
**************************************************/
@media screen and (max-width: 767px){
    #breadcrumb {
        padding: 5px 15px;
        text-align: center;
    }
}

見にくい感じがしたので、今は使ってません。