WordPressの無料人気テーマ、
Lightning ライトニングの
カスタマイズ方法をご紹介します。
Lightningは真っ白で、
背景の色を変更できるメニューがついていないんです。
前回は、背景の色を変更する方法をご案内しました。
（前回の記事はこちら https://wp-firststep.com/csscustom/）
↓ ↓ ↓
今回は、さらに加えて、
背景色を変えながらも、ブログ本文と
サイドウィジェットは白く残すデザインにする方法をご案内しますね。
【トップページ】
【ブログページ】
リクエストいただいたNさま、ありがとうございました^^
「Lightning」ライトニングの色設定
今回も、「カスタマイズメニュー」の
「追加CSS」にコピーするだけでOKです。
すると、こんな白紙の画面が出てきます。
※「ここに独自の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;」に設定してあります。
こちらの色見本サイトなどで
好きな色の番号を調べて、置き換えて使ってくださいね^^
WEB色見本のページ
https://www.colordic.org/
Lightning大好きなので、
他にも、Lightningカスタマイズ記事を書いています。
合わせてご覧ください。
スライドショーの文字の大きさを変えたい！Lightning ライトニングカスタマイズ
他にも、こんな時はどうしたらいいの？いう要望があったら
お気軽にご意見ください。今後の記事の参考にさせていただきます。
※
お返事ください、教えてくださいはご遠慮ください。多くて困ってます ※