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

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

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

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

詳細はこちら

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

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

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

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

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

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

この記事でわかること

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

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

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

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

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 Unitの配色設定を紹介しておきましょう。
Lightning Pro Unitバージョン0.17.1での検証です。)

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

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

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

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

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

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

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

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

外観>カスタマイズ>Lightningフッター設定で、フッターの背景色・文字色が設定できる

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

Lightning Pro Unitの入手方法

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

Vektor Passport 1年ライセンス9,900円
(税込)
Vektor Passport 3年ライセンス26,400円
(税込)
Vektor Passport 5年ライセンス39,600円
(税込)
※価格は2022年11月24日現在のものです
Vektor Passportに含むもの
  • テーマ機能拡張プラグイン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でも登録したカスタムカラーを反映させることができます。

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

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

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間3年)
Vektor Passport(ライセンス期間5年)

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

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

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