ブログの背景色に白地もつけたい！Lightning ライトニングカスタマイズ

WordPressの無料人気テーマ、

Lightning ライトニングの
カスタマイズ方法をご紹介します。

Lightningは真っ白で、
背景の色を変更できるメニューがついていないんです。

前回は、背景の色を変更する方法をご案内しました。
（前回の記事はこちら　https://wp-firststep.com/csscustom/）

　　↓　↓　↓

今回は、さらに加えて、

背景色を変えながらも、ブログ本文と
サイドウィジェットは白く残すデザインにする方法をご案内しますね。

【トップページ】

【ブログページ】

リクエストいただいたNさま、ありがとうございました^^

・この記事の内容・

今回も、「カスタマイズメニュー」の
「追加CSS」にコピーするだけでOKです。

CSS追記

すると、こんな白紙の画面が出てきます。

追加CSS記載画面

※「ここに独自のCSSを…」という説明文は削除してくださいね

ｰｰｰｰｰｰｰｰｰｰｰここからｰｰｰｰｰｰｰｰｰｰｰ（この線はいらない）

/*背景色*/
.siteHeader {
background: #fff5ee;
}

body {
background: #fff5ee;
}

ul.gMenu a {
background-color: #fff5ee;
}

/*白抜き*/

#main{
background: #fff;
padding: 20px;
border-radius: 6px;
box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.postList{
background: #fff;
padding: 20px;
border-radius: 6px;
box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.col-md-3{
background: #fff;
padding: 20px;
border-radius: 6px;
box-shadow: 0 0 3px rgba(0,0,0,.3);
}

ｰｰｰｰｰｰｰｰｰｰｰここまでｰｰｰｰｰｰｰｰｰｰｰ（この線はいらない）

このCSSを貼り付けてみてください。

こうなりましたでしょうか？

＜ちょっとしたこだわり＞

白地が切りっぱなしでは雑なので

角を少し丸め、やや影をつけて、余白をあけています

ここでは、
ピンクベージュ「#fff5ee;」に設定してあります。

こちらの色見本サイトなどで
好きな色の番号を調べて、置き換えて使ってくださいね^^

Lightning大好きなので、
他にも、Lightningカスタマイズ記事を書いています。

合わせてご覧ください。

スライドショーの文字の大きさを変えたい！Lightning ライトニングカスタマイズ

こんな時はどうしたらいいの？いう疑問があったら
個別のお返事はお約束できませんが、ご意見をいただければ
ブログ記事にさせていただくかも？

個別にちゃんと回答が欲しい方は、初回無料の個別相談をご利用くださいね。