LIONMEDIAは、カテゴリーごとに好みの色を設定出来、カテゴリーアーカイブページのタイトル背景や、カテゴリータグなどが設定した色で表示され、とてもカラフルにも出来ますし、好みの色に設定可能です。
アーカイブではなく「記事」ページのタイトル部分は、黒い背景になっていて、カテゴリー色は反映されません。
このタイトル背景色を好みの色に変える方法です。
カスタマイズ
初期デザインCSS
初期デザインは以下の通りです。
コードを表示
/*シングルページのタイトルボックス*/
.singleTitle{
position:relative;
padding:30px 0;
background-repeat:no-repeat;
background-position:center center;
background-size: cover;
}
.singleTitle::before{
content: '';
background-color: rgba(0,0,0,0.75);
background-image: linear-gradient(90deg, rgba(0,0,0,.15) 50%,
transparent 50%), linear-gradient(rgba(0,0,0,.15) 50%,
transparent 50%);
background-size: 2px 2px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.singleTitle::after {
content: "";
display: block;
clear: both;
}
.singleTitle__heading{
float:left;
width: 70%;
padding: 0 2.5% 0 0;
}
CSS追記
子テーマのスタイルシート（style.css）にデザイン変更を記述します。
背景色を指定している部分だけを変更します。
.singleTitle::before{
background-color: #c97586;
}
結果
Before
After
background-color: #c97586; の部分を好きなカラーに設定して下さい。
CSSが反映されない場合
CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。
以下も参考にして下さい。
CSSが反映されない対処法・PC＆iPhone＆iPadのChromeキャッシュ
CSS編集したのにサイトに反映されない場合、キャッシュが残っている事が原因の場合があります。 そういう場合には、以下の方法で簡単にクリアできます。 Google Chromeを利用している場合の対処法です！ Windows クロームのデベロ...
ayaito.net
コメント