こんな見た目になります
パンくずリストとその周辺（記事タイトル・更新日など）をサイドバーのデザインに合わせてカスタマイズしています。
ここと別サイトは、指定色や文字サイズ・FontAwesomeの使用アイコンなどが違うだけで、CSSで変更している部分はほぼ同じです。ここではこのサイトのCSSを紹介します。
PCから見た場合
スマホなどから見た場合
実装する方法
子テーマのstyle.cssに以下を追記します。
メディアクエリの部分はiPadでの表示がワンカラムになることを考慮してこのサイズになっていますが、SANGOのサイドバー有無の切り替えは768pxなので、そちらを優先したい場合は書き替えてください。
MEMO
下記をそのまま記述すると、iPad proから見た場合はパンくずリストに背景色がつきません。気になる方は、画面サイズ768px～1029pxの時の背景色などを別に指定すると良いと思います。
style.css
#breadcrumb li:first-child a:before {
content: "\f277";/*ホームのアイコン*/
font-size: 1em;
}
#breadcrumb li:after {
content: "\f0da";/*リスト間のアイコン*/
padding: 0 7px;
}
#breadcrumb li a {
font-weight: bold;
}
@media only screen and (min-width: 1030px)
#entry .article-header {
margin: 0 0 40px;
}
#entry .article-header #breadcrumb {
background: #8491c3;/*PC表示の背景色*/
padding: 7px 40px;
}
#breadcrumb li:after {
color: #fcfcfc;/*PC表示のアイコン色*/
padding: 0 7px;
}
#entry #breadcrumb a {
color: #fcfcfc;/*PC表示の文字色*/
}
#entry .article-header h1, #entry .article-header p {
margin: 0 40px;
}
#entry .article-header .entry-meta {
text-align: right;/*PC表示で投稿日・更新日を右寄せ*/
padding: 0;
}
.fab-btn {
margin: -30px 55px -30px auto;/*シェアボタンの位置*/
}
@media only screen and (max-width: 1029px)
#breadcrumb li a {
color: #b7b7b7;/*モバイル表示の文字色*/
}
記事タイトルに背景色をつけたい場合
記事タイトル部分に背景色をつけたい場合は、28～30行目（背景色が違う部分）を以下のように書き換えてください。
style.css
#entry .article-header h1{
padding: 15px 40px;
background:任意の色;
}
#entry .article-header p{
margin:0 40px;
}
