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

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 クロームのデベロ...
綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています