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

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





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

 

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

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

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

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

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

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

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

 

WordPress-Lion-Media-Theme-Background-Color





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ならば、

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

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

 

変更前の状態です。




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

0を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;

 

90degというのは、

グラデーションの方向の角度設定です。

90degで左から右。

0degで下から上。

45degで右上がり。

180degで上から下。

 

background-sizeを小さくすると、碁盤の目のようになります。

一色しか表示されなくて、おかしいと思うときは、このサイズが大きすぎると思います。

 

 

 

LionMedia,タイトル背景色,CSS,場所,
設定,スタイルシート,RGB値,不透過,グラデーション



インターネットカテゴリの最新記事

%d人のブロガーが「いいね」をつけました。