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

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

 

ワードプレスには

デザイン・機能を決める多様な「テーマ」という
テンプレートがあります。

そのうち一つ、「Lightning」ライトニング

とても人気のテーマで以前もご紹介したのですが

色が変えにくいのが難点でした。

ライトニングのご紹介記事はこちら
 ↓ ↓

ワードプレス お勧め無料テーマ 3 「Lightning」ライトニング
https://wp-firststep.com/theme_lightning/

しかし
やっぱり好きな色に変えたい!という
お声がとても多かったので

今日はその、カスタマイズ方法
お話したいと思います。

 

Lightning」ライトニングはこんな色

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

ライトニングテーマ

 

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

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

 

色設定の画面を見てみると…

ライトニングの色を変えられる部分は2点だけ

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

色を変更できるところは

キーカラー と

キーカラー(暗)の

2個しかなくて

それもささやかなところだけです。

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

色変更カスタマイズ

 

こうなりました。

ライトニング色変更後

 

微妙~に
アクセントカラーが
変わるだけなんですよね。

 

 

CSSをカスタマイズしてみよう!

このように、ライトニングには
2つのポイントしか
色を変えられるメニューがありません。

そんなときは 諦める か…

または

どうしても変えたいんだ、という
強い意志をお持ちの方は

CSSカスタマイズ!!です!!

 

 

ちょっと難しい?と思われるかもしれません。
はい、ちょっと難しいのですが(笑)

コピペするだけでできるように
CSSという呪文をそのまま書いておきますので
良かったらご活用ください^^
(※ライトニング以外では使えませんので注意!)

 

 

コピペするだけのカンタンCSSはこちら

カスタマイズメニューから
CSS追記を開きます。

CSS追記

 

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

追加CSS記載画面

 

「ここに独自のCSSを…」と
説明がかかれています。
いらないので消してしまって構いません。

 

ここに、CSS、という呪文を書き込みます。

この呪文を考えるのが
ちょっと手間なのですが、

わたくし頑張りました^^

必殺の呪文

ーーーーーーーーーーーーー

 

.siteHeader {   
background: #fff5ee;
}

body { 
background: #fff5ee;
}

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

 

ーーーーーーーーーーーーー

これをコピペして
貼り付けてみて下さい。
(線はいらないです)

そうすると、
全体が薄いベージュになりますよ^^

 

こんな感じです。

背景色変更

 

好きな色に変える方法

しかし、みんながみんなベージュには
しないですよね(笑)

色を変えたい方は…

呪文の中に書いてある、#fff5eeというのが
カラーコードという
インターネット上で色を表す番号です。

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

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

 

 

追伸

大切な事なのでもう一度
書いておきますね。

これは、ライトニング用です

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

 

いくら美しいデザインを作っても「売れなければ意味がない」と気づきWebマーケティングを学び実践中。長年のカスタマーサポートのキャリアと、Web制作スキルを活かし、初心者向けに「日本一カンタン」をコンセプトとしたWordPressワークショップを主宰

Pocket