アクアリウムのおすすめグッズはこちら!

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

SANGOのパンくずリストの微調整

TAGS:

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

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

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

今表示されているパンくずリストのデザインのCSSになるように更新するので、どんな感じかは、ヘッダーをCHECK!
注意
本記事の内容でデザインが崩れたなどの責任は一切負いませんので、自己責任でカスタマイズしてください。

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;
    }
}

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

キャッシュをクリアする

キャッシュのクリアを行って変更内容を反映させましょう。

スーパーリロードをしてもいいですが、こちらの方法が楽ちんでおすすめです。

CSSのバージョン管理【CSSのバージョン管理】スーパーリロードなしで変更を反映させる【SANGO】

まとめ

以上が、パンくずリストの微調整のCSSでした。

4つのCSSを追記すれば、はじめに紹介したが画像と同じデザインになります。

数値を変更して自由にカスタマイズしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です