ブログの色を変えたい！Lightning ライトニング 【CSSカスタマイズ】
ワードプレスには
デザイン・機能を決める多様な「テーマ」という
テンプレートがあります。
そのうち一つ、「Lightning」ライトニング
とても人気のテーマで以前もご紹介したのですが
色が変えにくいのが難点でした。
ライトニングのご紹介記事はこちら
↓ ↓
ワードプレス お勧め無料テーマ 3 「Lightning」ライトニング
https://wp-firststep.com/theme_lightning/
しかし
やっぱり好きな色に変えたい！という
お声がとても多かったので
今日はその、カスタマイズ方法を
お話したいと思います。
「Lightning」ライトニングはこんな色
ライトニングは初期状態ではこんなデザインになっています。
このように、「白が基本」に、ちょこっと青になっており
色を変更できるのは「ちょこっと青」の部分だけでした。
色設定の画面を見てみると…
ライトニングの色を変えられる部分は2点だけ
色を変更できるところは
キーカラー と
キーカラー（暗）の
２個しかなくて
それもささやかなところだけです。
分かりやすいように
クリスマスカラーにしてみますね。
こうなりました。
微妙~に
アクセントカラーが
変わるだけなんですよね。
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/
追伸
大切な事なのでもう一度
書いておきますね。
これは、ライトニング用です
ほかのテーマで使ったら
どこの色が変わるかわかりませんよー（笑）
Follow me!
「猫でもわかる！」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。