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

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

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

TAGS:

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

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

  1. アイコンを変更
  2. カテゴリ間の記号の調整
  3. パンくずリストの文字を調整
  4. スマホの場合は中央寄せ

変更後の表示

スマホでの表示

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

PCでの表示

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

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

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

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

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

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

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

パンくずリストのアイコンを変更
/*************************************************
パンくずリストのアイコンを変更
**************************************************/
#breadcrumb li:first-child a:before{
    content: "\f3c5"; /* 好きなアイコンに変更してください。 */
    font-size: 1.5em;  /* アイコンの大きさ */
}

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

参考 Font AwesomeへのリンクFont Awesome

カテゴリ間の記号の調整

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

カテゴリ間の記号の調整
/*************************************************
カテゴリ間の記号の調整
**************************************************/
#breadcrumb li:after {
    padding: 0 8px; /* 記号の左右の余白 */
    color: #A9DBFA; /* 記号の色 */
}

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

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

パンくずリストの文字を調整
/*************************************************
パンくずリストの文字を調整
**************************************************/
#breadcrumb li a{
    font-size: .9em; /* 文字の大きさ */
    font-weight: 500; /* 文字の太さ */
    color: #3aadf4; /* 文字の色 */
    letter-spacing: .2em; /* 文字間の広さ */
}

スマホの場合は中央寄せ

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

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

まとめ

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

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

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

コメントを残す

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