【テーマLightning G3でサイト制作】カラーパレットを活用した配色方法！（有料版との比較あり）

2022年11月24日

ワードプレスの無料人気テーマLightningで、便利なカラーパレットを使った配色方法を紹介します。

カラーパレットを活かしてサイト設計すれば、後から様々な配色の組み合わせに簡単に変更することができますよ。

※本記事検証のLightningはversion14.18.1(2022/3/19)です

ちなみにテーマLightningの公式ページはこちらです。

Lightningのカラーパレットとは

Lightningのテーマカスタマイザー配色設定画面で、自分の好みの色を登録できる機能です。

Lightningの色設定（背景色とキーカラー）はダッシュボード　外観＞カスタマイズ＞色　の画面で設定しますが、同じ画面にカラーパレットもあります。

カラーパレットにはCustom color1～5までの５つの色を登録することができます。

カラーパレットのメリット

カラーパレットに色を登録しておくことで、次のメリットがあります。

1. 各ブロックの色設定パネルに反映される
   （ブロックエディターで配色をするのに便利。サイトのトーンを統一できる。）
2. あとからカラーパレットの登録色を変更してもwebサイトに反映される
   （カラーパレットに登録した色をブロックの色設定パネルで選んだ場合）

①ブロックの色設定パネルへの反映

Lightningのカラーパレットに登録した色は、ブロックエディターの各ブロックの色設定パネルに反映されます。

上記事例を見ると、カラーパレットに登録した5種類の色がブロックの色設定パネルに反映されているのがわかりますね。

ちなみにLightningでは５つのカスタムカラー以外に、もともと背景色とキーカラーを設定できますが、キーカラーもブロックの色設定パネルに反映されることも覚えておきましょう。

上記の事例では、キーカラーが濃い茶色なのでわかりにくいですが、キーカラーに登録した色をベースにして、キーカラー（暗）とキーカラー（明）も自動的に作成されます。

②あとから登録色を変更してもwebサイトに反映される

一旦登録したカスタムカラーを別の色に変更すると、webサイトにも自動的に反映されます。

webサイトのデザインをするときに、配色した色をあとから変更したり、やっぱり元に戻したりすることがありますが、この機能を使えばすごく簡単ですよね。

ただし、ブロックに配色するときにカラーパレットに登録した色を選択した場合に限られます。次の場合は適用されないので注意しましょう。

実際に次のデモサイトの事例を見れば便利な点がわかってもらえると思います。

デモサイトに見るカラーパレットの活用事例

私がセミナーで活用しているデモサイトのトップページですが、背景色、キーカラー、各カスタムカラーは次のように設定しています。

外観＞カスタマイズ＞色の画面で、背景色、キーカラーおよびカスタムカラーを変更するだけで以下のようにガラッと雰囲気を変えることができます。

もちろんトップページだけでなく、サイト内の他のページにも同時に展開されますので、すごく簡単にサイトの配色変更をしたり元に戻すことができます。

カスタムCSSでカラーパレットを活用する方法

５つのカスタムカラーおよびキーカラーは、CSS変数にいったん格納される仕様となっています。

したがってカスタムCSSで色設定をする場合、直接カラーコードをCSSに記述するのではなく、CSS変数を記述すれば登録したカスタムカラーを使うことができます。

各カラーのCSS変数は以下の通りです。

キーカラー	var(–vk-color-primary)
キーカラー（暗）	var(–vk-color-primary-dark)
キーカラー（明）	var(–vk-color-primary-vivid)
カスタムカラー１	var(–vk-color-custom-1)
カスタムカラー２	var(–vk-color-custom-2)
カスタムカラー３	var(–vk-color-custom-3)
カスタムカラー４	var(–vk-color-custom-4)
カスタムカラー５	var(–vk-color-custom-5)

例えば、ヘッダー部の背景色にカスタムカラー１を使用する場合はCSSは次のように記述します。

#site-header {
	background-color: var(--vk-color-custom-1);
}

このように記述しておけば、外観＞カスタマイズ＞色でカスタムカラー１を変更するとヘッダーの背景色も同時に変更される、というわけですね。

ただし、外観＞カスタマイズ＞色で設定する背景色についてはCSS変数に格納されず直接カラーコードとしてCSSに記述される仕様となっています。例えば、背景色に#ffee32を設定すると次のように記述されます。

body.custom-background {
    background-color: #ffee32;
}

有料プラグインLightning G3 Proの配色設定

最後に、有料プラグインLightning G3 Pro Unitの配色設定を紹介しておきましょう。
（Lightning Pro Unitバージョン0.17.1での検証です。）

リンク文字色とリンクhover色が設定できる

カラーパレットとしては無料版と同じく５つのカスタムカラーを登録できる仕様ですが、無料版と違ってリンク文字色とリンク文字色（hover）が設定できるようになっています。

しかしこれ以外にも配色に関して無料版との違いがあります。

ヘッダーとページヘッダーの色設定ができる

Lightning Pro Unitでは、ヘッダーとページヘッダーの色設定が次のように細かく設定できるようになっています。

• ヘッダー背景色とグローバルナビ背景色が設定できる
  （グローバルナビの上部に線を追加可能）
• ヘッダーの透過設定を有効にした場合、透過時のヘッダー背景色とヘッダー文字色が設定できる
• 投稿、固定ページ、メディア、カスタム投稿といったページ毎にページヘッダーの文字色と文字色影の設定が可能

フッターの色設定ができる

このように有料プラグインLightning Pro Unitでは配色がかなり細かく設定できるようになっています。

Lightning Pro Unitの入手方法

Lightning Pro UnitはサブスクリプションサービスVektor Passportに含まれています。ライセンス期間により次のようになっています。

Vektor Passport １年ライセンス	9,900円 （税込）
Vektor Passport ３年ライセンス	26,400円 （税込）
Vektor Passport ５年ライセンス	39,600円 （税込）

Lightning G3 Pro UnitおよびVK Blocks Proはプラグインなので、無料版Lightningですでに構築したサイトでもインストール・有効化すれば、簡単に有料版の機能を使うことができます。

サブスクリプションですが、ライセンス期間終了後も継続して使用が可能です。アップデートとサポートを受けられなくなるだけなので、再度サポートを受けたいというタイミングで再契約すればよいでしょう。

まとめ

テーマLightning G3のカラーパレットの便利な点について紹介してきました。

1. 各ブロックの色設定パネルに反映される
   （ブロックエディターで配色をするのに便利。サイトのトーンを統一できる。）
2. あとからカラーパレットの登録色を変更してもwebサイトに反映される
   （カラーパレットに登録した色をブロックの色設定パネルで選んだ場合）

登録したカスタムカラーはCSS変数に格納される仕様となっているので、CSS変数で色設定を記述すれば、カスタムCSSでも登録したカスタムカラーを反映させることができます。

うまく活用して効率よくサイトの配色デザインをしていきましょう。

より細かくサイトの配色設定をしたい場合は有料版も選択師ですね。