ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

【テーマLightning G3でサイト制作】配色にはカラーパレットを活用しよう!(有料版との比較あり)

2021年5月にG3(ジェネレーション3)に大幅リニューアルしたワードプレスの無料人気テーマLightningで、配色に便利なカラーパレットの活用方法を紹介します。

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

この記事でわかること

テーマLightning G3(無料版)において以下のことが理解できるようになります。

  • 配色パレットとは
  • 配色パレットのメリットと活用方法(デモサイトでも確認)
  • カスタムCSSでも配色パレットを活用する方法
  • 有料版Lightning G3 Proでのカラーパレットの紹介

※本記事検証のLightningはversion14.11.12です。

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

Lightningのカラーパレットとは

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

ダッシュボード 外観>カスタマイズ>色 の画面で設定していきます。

外観_カスタマイズ_色の画面

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

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

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

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

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

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

カラーパレットがブロックに反映された事例

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

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

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

キーカラーのブロック色パネルへの反映
わかりやすいようにキーカラーをシアン色に変更してみました

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

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

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

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

  • 登録した以外の色を選択して配色
  • 自分でカラーコードを入力して配色

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

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

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

デモサイトトップページの配色設定

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

デモサイトトップページの配色設定変更後

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

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

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

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

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

キーカラーvar(–vk-color-primary)
キーカラー(暗)var(–vk-color-primary-dark)
キーカラー(明)var(–vk-color-primary-vivid)
カスタムカラー1var(–vk-color-custom-1)
カスタムカラー2var(–vk-color-custom-2)
カスタムカラー3var(–vk-color-custom-3)
カスタムカラー4var(–vk-color-custom-4)
カスタムカラー5var(–vk-color-custom-5)

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

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

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

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

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

有料版のLightning G3 Proのカラーパレット

最後に、有料版のLightning G3 Pro Packのカラーパレットについて紹介しておきましょう。
(Lightning G3 Pro Packに入っているLightning Pro Unitバージョン0.12.2での検証です。)

といってもカラーパレットとしては無料版と同じく5つのカスタムカラーを登録できる仕様です。

Lightning Pro Unitのテーマカスタマイザー色設定

カラーパレットは同じ仕様ですが、無料版と違ってリンク文字色とリンク文字色(hover)が設定できるようになっています。

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

例えば、ヘッダーの色設定が次のように細かく設定できるようになっています。

  • ヘッダー背景色とグローバルナビ背景色が設定できる
    (グローバルナビの上部に線を追加可能)
  • 投稿、固定ページ、メディア、カスタム投稿といったページ毎に文字色と文字色影の設定が可能
Lightning Pro Unitのヘッダーの配色設定

カラーパレットから話はそれましたが、有料版の配色はかなり細かく設定できるようになっているのがわかりますね。

Lightningの有料版であるLightning G3 Pro Packはサブスクリプションとなっており、ライセンス期間により次のようになっています。

無料版テーマLightning無料
Lightning G3 Pro Pack 1年ライセンス9,900円
(税込)
Lightning G3 Pro Pack 3年ライセンス26,400円
(税込)
Lightning G3 Pro Pack 5年ライセンス39,600円
(税込)
※価格は2021年10月24日現在のものです
Lightning G3 Pro Packに含むもの
  • テーマ機能拡張プラグインLightning G3 Pro Unit
  • ブロック追加プラグインVK Blocks Pro
  • テーマLightning Pro(旧製品)
  • ライセンスキー

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

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

まとめ

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

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

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

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

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

Lightning G3 Pro Pack(アップデート期間1年)
Lightning G3 Pro Pack(アップデート期間3年)
Vektor WordPress Solutions

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる