はてなブログのパンくずリストをカスタマイズ!導入方法とCSSデザインをご紹介!
パンくずリストを導入する
とても簡単です。
パンくずリストをカスタマイズしてみる
少し注意事項です。
表示しているパンくずリストは画像です。このブログには、画像に影をつけているので、サンプルが立体的に見えますが実際には影がついていなくフラットなデザインです。
基本的なデザイン
span.breadcrumb-child::before {
content: "›";
font-size: 20px;
line-height: 15px;
color: #a8a8a8;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
デフォルトのパンくずリストは、直接HTMLに「>」の記号を入れているので、細かい調整ができません。なので、もとの記号を消して、擬似要素で新たに記号を作って、色や大きさを変えています。
記号を変える
先ほどのパンくずリストを応用して、記号を変えてみます。
点にしてみる
span.breadcrumb-child::before {
content: "•";
color: #a8a8a8;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
このデザインは見たことはありません。カテゴリーが独立しているしている感じがありますね。
棒にしてみる
span.breadcrumb-child::before {
content: "|";
color: #a8a8a8;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
これも見たことないですが、部屋で分けられているような感じですね。
スラッシュにしてみる
span.breadcrumb-child::before {
content: "/";
color: #a8a8a8;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.breadcrumb-gt {
display: none;
}
このデザインのパンくずリストは見たことがあります。パスのように見えるので繋がりが分かりますね。
色をつける
これらのパンくずリストをカスタマイズしていきます。要素ごと説明していきます。
文字を変える
.breadcrumb {
color: #9c9c9c;
}
文字の色設定です。サイトに合わせお好みで色を調整してください。
背景を変える
div#top-box {
padding: 12px 0;
background-color: #fff;
padding-left: 10px;
}
こちらもデザインにあわせお好みで。
アイコンを加えてみる
.breadcrumb::before {
content: "home";
float: left;
font-family: "Material Icons";
font-size: 21px;
padding: 0 4px;
}
トップページに戻りやすいように家のアイコンフォントを加えてみます。このアイコンフォントは、Googleが提供しているマテリアルアイコンを使用しています。
CDNはこちら
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Font Awesomeが入っている方はそちらを使っても構いません。
その場合はこちらのコードを使用して、家を表示させてください。
.breadcrumb::before {
content: "home";
font-family: blogicon;
float: left;
font-family: "Material Icons";
font-size: 21px;
padding: 0 4px;
}
さいごに
どーでしたか?こういうちょっとしたデザインもブログパーツとして、とても重要です。はてなブログの方も、はてなブログじゃない方もこんなデザインがあるんだよってことを知ってもらえたら嬉しいです。では、また。