超簡単!LION MEDIA記事ページのタイトルヘッダー背景色を変更する

カスタマイズLION MEDIA

LIONMEDIAは、カテゴリーごとに好みの色を設定出来、カテゴリーアーカイブページのタイトル背景や、カテゴリータグなどが設定した色で表示され、とてもカラフルにも出来ますし、好みの色に設定可能です。

 

アーカイブではなく「記事」ページのタイトル部分は、黒い背景になっていて、カテゴリー色は反映されません。

このタイトル背景色を好みの色に変える方法です。

8445_01

 

LION MEDIAのその他のカスタマイズについては以下もご覧ください。

LION MEDIAの記事

 

 

カスタマイズ

 

初期デザイン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

8445_02

 

After

8445_03

 

 

background-color: #c97586; の部分を好きなカラーに設定して下さい。

 

マカロンビビッドパステル和色セーフ色名 

 

 

CSSが反映されない場合

 

CSSコードを記述したのに変化がない場合は、キャッシュをクリアして下さい。

 

以下も参考にして下さい。