ブログの背景色に白地もつけたい！Lightning ライトニングカスタマイズ
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カスタマイズ記事を書いています。
合わせてご覧ください。
こんな時はどうしたらいいの？いう疑問があったら
個別のお返事はお約束できませんが、ご意見をいただければ
ブログ記事にさせていただくかも？
個別にちゃんと回答が欲しい方は、初回無料の個別相談をご利用くださいね。
Follow me!
「猫でもわかる！」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。