WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Global Colors とは何者?!一元管理で楽ちん♪

Global Colors はElementor 3.0の新機能!

Global Colors はElementor3.0以降に登場した新機能の1つです。一体何が出来るのか、今日は皆さんと一緒に見て行きたいと思います!

何それ?やっと覚えたっていうのに・・・また新しい機能?!もーーーー
おばさん
おばさん

まぁまぁ・・・(汗)一緒に見て行けば大丈夫ですよー。覚えちゃえば結構便利ですよ。

グローバルカラーズ = カラーピッカーの進化版

この画面覚えてますか?

gc-02

ん?覚えてるも何も、今の私のElementorはこれよ?
おばさん
おばさん

ええええっ?!まだバージョンアップしてないんですね!

なんか文句あるの?!しょうがないわね、アップデートするわよ!
おばさん
おばさん

あ、なんか・・・ごめんなさい・・・お願いします・・・。

気を取り直して・・・このカラーピッカー機能がグローバルカラーズとなって、パワーアップしたと思って頂ければと思います。良く使う色をただ保存するのではなく、名前をつけて設定カラーとして保存出来る様になったんです!

おじさん
おじさん
ん?何がすごいのかな・・・

ですよね?言葉だけだと分かりづらいと思いますので、これから一緒に見てきましょう!

デザインシステムにあるGlobal Colors

さっそく、グローバルカラーをいじってみたいと思います!って、どこにあるんだ?!と思う方もいると思いますので、まずは設定画面の行き方を見てみます。

①エディター画面(編集画面)を開きます。

gc-01

②設定の「サイト設定」をクリック

gc-08

③ Global Colorsをクリック

gc-07↓↓↓↓

すると、ついに!!! グローバルカラーズの設定に到着!!!
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

gc-06

おじさん
おじさん
ずいぶん分かりづらいところにあるんだね・・・ブツブツ

いやいや、これよりももっと簡単にアクセス出来る方法があるんですよー。

簡単な方を先に教えなさいよ!!もーーーー
おばさん
おばさん

し、失礼しました・・・(汗)

簡単なGlobal Colorsへのアクセス方法

gc-05

編集画面で文字(テキスト)扱うウィジェットを選択します。ここでは「見出しウィジェット」で説明しますね。選択し、右の設定エリアのスタイルを選びます。タイトルの文字色の部分をご覧下さい。地球のアイコンがあるの分かりますでしょうか?

ちっさっ・・・おとうさん!虫眼鏡もってきてちょうだい!
おばさん
おばさん

gc-04

こ、これでどうですか・・・?

おばさん
おばさん
最初から拡大しといてよ、もーーーー

なんか、あ・・・荒れてますね・・・(汗)

gc-03

この地球アイコンをクリックすると、この様にプルダウン?ポップアップ表示され、色のメニューの様なものが表示されます。そしてこの右上にあるギアーのアイコンをクリックすると、先ほどのグローバルカラーズにたどり着けます。

おじさん
おじさん
おぉーここから行けるなら面倒じゃないね?!

良かった!そーですね、編集中にダイレクトに移動出来るのは便利ですよね。

でもこの機能の便利さはまだわかっていないんですよ・・・
おじさん
おじさん

お任せ下さい!いよいよGlobal Colourの使い方に行きます!

グローバルカラーズの使い方

お待たせ致しました。グローバルカラーズの使い方について見て行きます!まずはこちらをご覧下さい。

おじさん
おじさん
おぉっ!!!
で?これが何よ。
おばさん
おばさん

あらら、賛否ありますね(笑)

今まで、一つ一つのウィジェットで色を設定していた文字色が、同じ色設定を選択した文字色が、大元(=グローバルウィジェット設定)を変えると、同じ設定の文字色が変更できちゃうんです!!!

活用イメージ

おばさん
おばさん
例えば、どんな時に便利なのよ。

確かに、これだけではなかなか良さがわからないですよね。例えば、ホームページの各ページの見出しに、同じグローバールカラーズを設定して置く事で、「やっぱりこの色にしたい!」と思った時、一斉に各ページの見出しを変更出来るんです!

gc-sampleimage

おばさん
おばさん
なるほど!!これは楽ね。

でしょ?!これは慣れると便利なんですよー。

でもさ、変わって欲しくない時もあるよね・・・このページの見出しだけは違う色に!ってこと。
おじさん
おじさん

ですね!実はそれも可能なんです!

一部だけ個別設定する方法

実は簡単で、単純に今までの様に、個別にウィジェットを選択して色を設定してあげるだけです。

おじさん
おじさん
おぉ!!それはありがたい!

gc-09

 

オリジナルカラーを設定する方法

この様に、同じグローバルカラーを設定することで、文字色の一元管理が可能となります。「○○の色」などの名前で登録することで、よりいっそうどこの色が変わるのか、イメージしやすく管理しやすくなります。

今度は、オリジナルの色の登録方法を見て見ましょう!

①まずは色を決めよう!

gc-15-min

②「+」のアイコンをクリック

gc-14-min

③すると?登録画面が出るので、

gc-13-min

④名前を決めて、登録!

gc-12-min

⑤グローバルカラーが設定されたことに!

gc-11-min

⑥次回からはこの設定を選ぶだけ!

gc-10-min

これは1度登録してしまえばOKです。何度もやるとたくさん登録されちゃうので、注意!

なんて便利なの!!!
おばさん
おばさん

おおおっ!わかってもらえましたか?この感動を(笑)

大袈裟よ!
おばさん
おばさん

し、失礼しました・・・

実は文字色以外にも・・・

gf-01

既にお気づきかもしれませんが、同じ仕組みで、フォントも設定することが出来ます!

gf-02

もちろん、グローバルカラーズ同様に、1度登録してしまえば、次回以降は簡単に設定が出来、一括で変更・管理が可能になります!

おじさん
おじさん
こりゃまいったな(笑)

ですよね!この機能は本当に便利です!特にサイト制作をお仕事でされる場合、お客様のご意向で変更になっても、瞬時に変更することが出来るのです!

まとめ

いかがでしたでしょうか? グローバルカラーズに グローバルフォント !Elementor3.0になって益々便利になったと思いませんか?この様に、どんどん進化して行くElementorから目が離せません

グローバルカラーズの機能
・色の設定が名前を付けて登録出来る。
・同じグローバルカラーズを設定したテキストはまとめて文字色を変更可能!
・もちろん今までどおり、一部だけの色設定も可能!
・文字色だけではなく、フォントも同様に一元管理!
・フォントの種類だけではなく、サイズや太さも設定、登録可能!

個人的には結構、慣れるまでに時間がかかりました。ですが、慣れてしまえば非常に便利で分かりやすいサイト制作が可能です!ので、是非みなさんも使いこなして見て下さい!

【お知らせ】
 ・わからないことは、Q&A で探してみよう!!

【YouTubeチャンネル】
 ・チャンネル登録宜しくお願い致します!

この記事の関連講座

Elementorのレスポンシブモード 講座
Elementorを使うためのWordPress講座
ブログの作り方講座

author

ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。