ブログの背景色を変えたい！Lightning ライトニングカスタマイズ
WordPressの無料テーマの
Lightning ライトニングの
カスタマイズ方法をひとつご紹介しますね。
「背景色」を変える方法です。
「Lightning」ライトニングの色設定
初期状態では
こんなデザインになっています。
このように、「白が基本」に、ちょこっと青になっており
色を変更できるのは
「ちょこっと青」の部分だけなんです。
色設定の画面を見てみましょう。
Lightning 色設定 キーカラーと、キーカラー（暗）
ちょこっと青の部分の
色を変更する設定は
カスタマイズメニューの
Lightningデザイン設定の中にあります。
↓ ↓
色を変更できるところは
「キーカラー」と 「キーカラー（暗）」の
２個しかないんですね。
それも、
実にささやかな部分だけです。
どこが変わるのでしょうか？
分かりやすいようにクリスマスカラーにしてみますね。
こうなりました。
↓ ↓ ↓
ささやかすぎて、わかりにくいですが
丸印をつけた赤と緑のところだけです。
Lightning設定で、色を変えられるのはこれだけです。
もうちょっと変えたいな・・と思った私は
CSSをいじることにしました。
CSSで好きな色にカスタマイズしよう！
カスタマイズメニューの
「追加CSS」にコピーするだけでOKです。
すると、こんな白紙の画面が出てきます。
「ここに独自のCSSを…」という説明は削除してください。
ここに以下の文字を
コピペしてみてください。
ｰｰｰｰｰｰｰｰｰｰｰここからｰｰｰｰｰｰｰｰｰｰｰ（この線はいらない）
.siteHeader {
background: #fff5ee;
}
body {
background: #fff5ee;
}
ul.gMenu a {
background-color: #fff5ee;
}
ｰｰｰｰｰｰｰｰｰｰｰここまでｰｰｰｰｰｰｰｰｰｰｰ（この線はいらない）
そうすると・・・
全体が薄いピンクベージュになりますよ^^
こんな感じです。
なりましたか？？
好きな色に変更える方法
ここではピンクベージュにしました。
「#fff5ee;」と３つ書いてあるのが
ご確認いただけるかと思います。
これはカラーコードという色を表す番号です。
この番号を変えれば、好きな色にできますよ！
こちらの色見本サイトなどで
好きな色の番号を調べて、コードを置き換えて使ってくださいね^^
WEB色見本のページ
https://www.colordic.org/
追伸
このコードは、ライトニング用です
ほかのテーマで使ったら
どこの色が変わるかわかりませんよー（笑）
さらに、白地をつける方法もまとめました。
合わせてご覧ください。
スライドショーの文字の大きさも変更できます。
こんな時はどうしたらいいの？いう疑問があったら
ご意見をいただけたたら、個別のお返事はお約束できませんが
ブログやメルマガでご回答させていただくかも。
個別に回答が欲しい方は、個別相談をご利用ください。
（初回無料で行なっております）
Follow me!
「猫でもわかる！」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。