ブログの背景色を変えたい!Lightning ライトニングカスタマイズ

ブログの色を変えたい!CSSとは?カスタマイズの仕方

WordPressの無料テーマの

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

「背景色」を変える方法です。

 

Lightning」ライトニングの色設定

初期状態では
こんなデザインになっています。

ライトニングテーマ

 

このように、「白が基本」に、ちょこっとになっており

色を変更できるのは
「ちょこっと青」の部分だけなんです。

 

色設定の画面を見てみましょう。

Lightning 色設定 キーカラーと、キーカラー(暗)

ちょこっと青の部分の
色を変更する設定は

カスタマイズメニューの
Lightningデザイン設定の中にあります。

 ↓ ↓

ライトニングカスタマイズ

色を変更できるところは

「キーカラー」と 「キーカラー(暗)」の

2個しかないんですね。

それも、
実にささやかな部分だけです。

どこが変わるのでしょうか?

分かりやすいようにクリスマスカラーにしてみますね。

色変更カスタマイズ

 

こうなりました。

 ↓ ↓ ↓

ライトニング色変更後

ささやかすぎて、わかりにくいですが
丸印をつけた赤と緑のところだけです。

Lightning設定で、色を変えられるのはこれだけです。

もうちょっと変えたいな・・と思った私は
CSSをいじることにしました。

CSSで好きな色にカスタマイズしよう!

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

CSS追記

 

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

追加CSS記載画面

 

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

 

ここに以下の文字を
コピペしてみてください。

 

ーーーーーーーーーーーここからーーーーーーーーーーー(この線はいらない)

 

.siteHeader {   
background: #fff5ee;
}

body { 
background: #fff5ee;
}

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

 

ーーーーーーーーーーーここまでーーーーーーーーーーー(この線はいらない)

そうすると・・・

全体が薄いピンクベージュになりますよ^^

 

こんな感じです。

背景色変更

なりましたか??

好きな色に変更える方法

ここではピンクベージュにしました。

「#fff5ee;」と3つ書いてあるのが
ご確認いただけるかと思います。

これはカラーコードという色を表す番号です。

この番号を変えれば、好きな色にできますよ!

 

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

WEB色見本のページ
https://www.colordic.org/

 

 

追伸

このコードは、ライトニング用です

ほかのテーマで使ったら
どこの色が変わるかわかりませんよー(笑)

 

さらに、白地をつける方法もまとめました。
合わせてご覧ください。

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

 

スライドショーの文字の大きさも変更できます。

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

こんな時はどうしたらいいの?いう疑問があったら
ご意見をいただけたたら、個別のお返事はお約束できませんが
ブログやメルマガでご回答させていただくかも。

お問い合わせはこちら

個別に回答が欲しい方は、個別相談をご利用ください。
(初回無料で行なっております)

個別相談はこちら

Follow me!

村重敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。