Lion Media タイトルバックグラウンドカラーのスタイルシートの場所💖タイトルの背景色の設定💚

Lion Media　の背景色は、グラデーションを含め、スタイルシートから任意に変更できます。

スタイルシートの場所をご案内いたします。

バックグラウンドカラーは、RGB値と不透過の割合で設定します。

スタイルシートの変更は、誤って自分の意図していない所を変更したり、削除しないように、注意しましょう。

バックアップしてから、変更作業すると良いでしょう。

なお、スタイルシートを直接変更しなくても、CSS編集でCSS追加の項目があります。

この部分にコピーして貼り付け編集すると、プレビューで確認でき、安全です。

WordPress-Lion-Media-Theme-Background-Color

1. Lion Media タイトルバックグラウンドカラーのスタイルシートの場所💖タイトルの背景色の設定💚

Lion Media タイトルバックグラウンドカラーのスタイルシートの場所💖タイトルの背景色の設定💚

外観　＞　テーマエディター

LION MEDIA : style.css

シングルページのタイトルボックス

695行目あたりを探して下さい。

ここでは、コピーするだけで、編集しません。

シングルページのタイトルボックスの内容をコピーします。

/*シングルページのタイトルボックス*/
.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;
}

外観　＞　CSS編集

追加CSS

追加CSSのところに、

先ほどのスタイルシートからコードをコピーして、

CSSを追加してこの場所で編集すると、

プレビューで確認しながら、編集できます。

プレビューで確認して、OKならば、

設定完了で、公開ボタンを押します。

公開ボタンを押さないで、保存しないで移動すると、変更内容は、破棄されます。

変更前の状態です。

背景色を変更してみました。

０を250に変更しただけです。

変更内容は、以下のコード。

background-color: rgba(250,0,0,0.75);

RGB値による色設定と不透過の設定です。

0.75の数値は、不透過の割合（75%）です。

グラデーションしてみました。

変更内容は、以下のコード。

background-color: rgba(250,0,0,0.0);
background-image: linear-gradient(90deg, rgba(250,0,0,1.0) 0%, transparent 50%), linear-gradient(rgba(0,0,250,1.0) 0%, transparent 50%);
background-size: 800px 800px;