Elementor v4（アトミックエディタ）でグローバルフォントとグローバルカラーは使えない！？

Elementor 基礎

2026-04-23

前田あゆみ

ご注意

今回の内容は、記事作成日時点の情報です。
日々進化するツールなので、時間が経っている場合はこの記事の情報が古いこともあるかもしれないのでご注意ください。

みなさん、elementor v4（アトミックエディタ）のウィジット使ってますか？

私はぼちぼち使ってますが、まだまだ慣れませんね。

v4（アトミック）を使うメリット・デメリット

何かとv4を出して批判されてるelementorですが、今までのelementorで追加CSSを行使しまくってたタイプの制作者にとっては、v4を使うメリットは多いんじゃないでしょうか。

現状私が感じるのはこんな感じですかね。

メリット

軽い（らしい）
クラスが使える
変数が使える
コンポーネント（繰り返しセット）が作れる
表示条件を設定できる
今までウィジットによっては指定できなかった設定（不透明度やフィルターなど）を使える
インタラクション（アニメーション）が素敵で自由度が高い

デメリット

慣れてないので時間がかかるしイライラする
崩れるんじゃないかという一抹の不安がある
情報がまだ少ないのでAIがチンプンカンプンなこと言う
見出しウィジットは、文中に<span>などのタグを入れられない、ボタンウィジットにアイコンが入れられないなど、v3との若干の使用差がある

まあAI頼りで腐りかけてきた脳みそを蘇生させるためにも、新しいことを学ぶのはいいんじゃあないかなと思って、最近はv4を使いこなそうと頑張ってます^^

v4（アトミック）ウィジットではグローバルカラー・フォントが使えない！

v4 使ってみるぞ〜と意気込んだものの、最初につまづいたのはここでした。

私はelementorでサイト制作する際、最初に「サイト設定」で以下を設定してました。

グローバルカラー
グローバルフォント
タイポ
サイト基本情報
背景
レイアウト

そのあとアトミックのウィジットを使うと、さっき指定したグローバルカラーとかフォントが見当たらないのです。

v4（アトミック）ではグローバルカラーやフォントを、変数・クラスにする必要がある！

ということで、v4では新しく実装された変数・クラスを使わないといけないのです。

変数とは

変な数って意味わかんないですよね。

そもそも変数って何！？

ある値に名前をつけておくこと！

例えば、
この色を「赤」と呼びます！
このフォントを「通常用」、このフォントを「装飾用」と呼びます！
100pxを「狭め」、300pxを「広め」と呼びます！
と名前をつけるイメージです。

じゃあそうすることで何がいいんだっていうと

繰り返し使える
まさにv3のグローバルカラーやフォントのように、繰り返し同じ値を使えます。
そのため変数を作っとけばいちいち「#000F12」とか「Noto Sans JP」とか「24px」とか入力しないでいいんです。
変数をクリックすればいいだけ。
イージーですね！

管理しやすくなる
名前をつけとけばぱっと見で、それが何かわかります。
例えば余白のところで32pxを「wide」・16pxを「narrow」とか変数にしておけば、制作時にパッと判断できますよね。

値を変えれば、該当箇所が全部変わる
先ほどのように、余白で32pxを「wide」・16pxを「narrow」としていたなら、やっぱ「wide」を40pxにして、「narrow」を18pxに調整しよう！とすれば、変数で割り当ててたところは、全て変更後の値になります。

めっちゃ便利じゃないですか！

詳しくは変数を使ってみよう的な記事をあとで書こうと思います。

クラスとは

英語でclassと聞くと授業とか学級みたいな意味をイメージするかもしれませんが、classには部類・種類的な意味もあるんです。
今回は後者の意味ですね。

じゃあクラスって何！？

スタイルを一つの型にすること！

例えば、
「フォントがnoto sans jpで、太さが700で、フォントサイズが40pxで、文字色が黄色」の型を「heading-big」としておく。
「背景の色が青で、上下の余白が80px」の型を「section-blue」としておく…など！

じゃあ変数とクラス何が違うのかというと
変数：一つの変数に一つの値
クラス：一つのクラス（型）に複数の値
という感じですかね。

お分かりの通り、変数と同じように、クラスを使うメリットは大きいです！

繰り返し使える
値を変えれば、該当箇所が全部変わる

わざわざ「スタイル貼り付け」を繰りかえさなくとも、クラスを登録しておいて、そのクラスの値を変更するだけでそのクラスを使ったところは変更後の値になります。

うまく使えば制作時間をかなり短縮できるはず…！

こちらも、詳しくはクラスを使ってみよう的な記事をあとで書こうと思います！
乞うご期待。

では一旦変数とクラスを理解できたところで、本題に戻りましょう。

グローバルカラーを変数にしよう

まず、なんとグローバルカラーを変数にするのは手動です。
現実は厳しいのです。
ワンクリックでグローバルカラーに登録されている色を、変数に追加するなんて、夢のまた夢です。

手順① v4ウィジットを追加して、「変数」をクリック

なんでもいいので、v4ウィジットをページに追加して「変数」という丸が三つのマークを見つけてください。
数値・フォント・色を指定するところにカーソルを合わせれば右上に出てくるはず。

そしたらこんなタブが開きますので、右上歯車マークの「変数マネージャー」をクリック。

手順② 変数マネージャーで色を登録

すると編集画面から離れて、変数マネージャー画面に移行します。
ここで、右上の「＋」から、今回はグローバルカラーを入れるので「color」をクリック。

名前を入れて、バリュー（値）を入れます。
値はHEX（#000000）の形式でも、RGB rgb(0, 0, 0) の形式でもいけます。

手順③ グローバルカラーに同期

そしてここが大事！！
色の右側三つのドットをクリックして「グローバルカラーに同期」を選択してください！

全て同期できたら「変更を保存」をクリックするのを忘れずに！！

どうなったか見てみよう。

じゃあこれでどうなっているのかというと、v4ウィジットでは…
色を選択するところで、「変数」の丸が三つのマークをクリックすると、さっきの変数が登録されてますね！

v3ウィジットでは…
色を選択するところで、地球儀マークをクリックすると、Atomic変数として先ほどの変数が登録されています！

じゃあサイト設定のグローバルカラーのところでは…
Atomic変数として先ほどの変数が登録されています！

しかしサイト設定のグローバルカラーからatomic 変数を追加・操作することはできません！！

v4→v3に同期できるけど、v3→v4に同期できない（手動設定する必要がある）ということです。

今後はグローバルカラーは使わずに、変数を使おう。

つまり、今後のワークフローとしては
× グローバルカラーを先に登録する
○ v4ウィジットから変数として色を登録して、グローバルカラーに同期させる
という感じに変える必要があるのです。

諸行無常、変化を恐れてはいけません。
変化できる人間になりましょう。
（自分に言い聞かせてます。）

グローバルフォントをクラスにしよう

じゃあグローバルフォントはどうかというと…
フォントも変数に登録することができますが、登録できるのはNoto Sans JPなどのフォントファミリーだけ。

そして変数からグローバルフォントに同期することはできません。

なのでフォントファミリーに加えて、フォントサイズ・太さ・文字間なども指定しているグローバルフォントをv4で使うには、手動でクラスを作る必要があるのです。

手順① v4ウィジットを追加、クラス名を入れる

v4ウィジットを入れて、スタイルタブに行くと「クラス」というところがありますね。
「ローカル」とはデフォルトの設定で、クラス名とか特についてないよ、手動で値を入れるよということです。

この「ローカル」の隣に、新しく作る型のクラス名を入力します。

そしてエンターを押すと、新しく入れたクラス名が青緑っぽくなります。
これで「heading-big」というクラス名の型を使ってますよ、ということになります。

手順② クラスに値を登録する

この状態で、型としておきたいフォントの設定を入力していきましょう。
クラスの型として登録された値には、青緑の丸が付きます。

ちなみにフォントファミリー・サイズ・色には、変数を入れることもできます！

※ちなみにv4では、クラスの値をレスポンシブ対応させることもできます。
つまり、クラスの値をPCのタブで登録したら、タブレットのタブに移行し値を変更、スマホのタブに移動し値を変更としておくと、このクラスが付いているテキストは全て、タブレットでも指定の値になるし、スマホでも指定の値になるのです。

クラスの値登録だけしとけば、あとは使いたいテキストにクラスをつけるだけ！
グローバルフォントではレスポンシブ対応できなかったので、これは進化ですよね！

手順③ クラスマネージャーで、グローバルフォントを同期

クラスの値の設定ができたら、クラス右上のカードが重なってるマークの「Class Manager」をクリック。

「保存して続行」を押すと、クラスマネージャー画面に移行します。

そうすると先ほど登録したクラスがありますので、右側三つのドットをクリックして「グローバルフォントに同期（Sync to Global Fonts）」を選択してください！

そうするとこんなアラートが出てきます。

これは、グローバルフォントにはタイポグラフィの設定だけ（フォントファミリー・レスポンシブのフォントサイズ・太さ・行の高さ・文字間隔など）が適用されますよ。
（→ 色とか余白とかはグローバルフォントに入らないよ）
クラスの中の値が変われば自動でグローバルフォントの値も変わりますよ。
ということです。