色の扱いは1つのオプションですが、その後の広い範囲に影響します。変換前に正しく設定しておけば、後から大量のスタイル修正をする手間を省けます。
2つのモード
- 元の色を維持 — すべてのテキスト色、背景色、境界線の色、影の色が、明示的な値としてウィジェットに書き込まれます。結果は元のデザインと正確に一致します。
- サイトカラーを使用 — ウィジェットごとの色は使わず、代わりにElementorのグローバルカラーが参照されます。見出しはPrimary、本文テキストはText、ボタンの背景はAccent、といったように割り当てられます。
それぞれの使いどころ
既存のブランドサイトにブロックを取り込む場合は、サイトカラーを選んでください。セクションはすぐに自分のパレットに馴染み、後でグローバルカラーを変更すると、取り込んだセクションも一緒に変わります。長期的にサイトへ置くものには、これが保守しやすい選択です。
デザインそのものが重要な場合、つまりクライアントのモックアップや使い捨てのランディングページ、あるいは元のパレットがサイトの他の部分と意図的に異なる場合は、元の色を選んでください。
どの色の値が引き継がれるか
単色はそのまま変換されます。2つの停止点を持つ線形グラデーションは認識され、角度と両方の停止点を保持したまま、Elementorのグラデーション背景になります。放射状グラデーションや複数の停止点を持つグラデーションなど、より複雑な背景は同じコントロールで表現できないため、空の背景にするのではなく、最初の単色を無難なフォールバックとして使用します。
ボックスシャドウも引き継がれますが、Elementorのシャドウコントロールが保持できる影は1つだけです。CSSで複数の影を重ねていた場合は、最も手前にある影が保持され、残りは手動で追加する必要があるという警告が表示されます。
CSS変数
var(--brand)のようなカスタムプロパティは、読み取られる前にブラウザが解決するため、取得されるのは変数名ではなく、最終的に計算された色です。これは通常、望ましい動作です。テーマ設定を変数に頼っている場合は、サイトカラーに切り替え、代わりにElementorのグローバルカラーからパレットを管理してください。それが同じ考え方をWordPressネイティブにした形です。
透過
完全に透明な背景は「背景なし」として扱われ、透明色として書き込まれないため、設定パネルがすっきりします。rgba(255,255,255,.88)のような半透明の値はそのまま保持されます。
完全なマッピング
サイトカラーモードでは、ウィジェットの種類ごとにパレット内の特定のスロットへ結び付けられます。
- 見出し → Primary
- 本文テキスト → Text
- ボタンの背景 → Accent
- アイコン → Primary
- 区切り線 → Secondary
サイトタイポグラフィを有効にすると、フォントについても同じことが行われます。見出しはPrimaryタイポグラフィを使い、本文テキストはSecondaryを使います。
2つのオプションは独立しています。サイトカラーと元のフォントの組み合わせは一般的で理にかなっています。ブロックは自分のパレットを取り入れつつ、デザインが依存している表示用フォントを維持できます。これらを1つのスイッチとして扱うのではなく、別々に設定してください。
接続がコピーではなくライブである理由
ここは理解する価値があります。この選択が後々なぜそれほど重要になるのかを説明しているからです。サイトモードは、あなたのPrimaryカラーを調べてそのHEX値をウィジェットに貼り付けるのではありません。グローバルへの参照を書き込みます。Elementorはそれを値としてではなく、パレット項目へのポインタとして保存します。
そのため結びつきは生きたままです。半年後にサイト設定でPrimaryを変更すれば、サイトモードで変換されたすべての見出しは、どのページにあるものでも、1つも開かなくても一緒に変わります。変換されたページは、たまたま今日の見た目に一致している異物ではなく、デザインシステムの普通の一員になります。
元の色の場合、値は焼き込まれます。忠実に再現する必要があるクライアントのモックアップにはまさに正しい選択であり、2年間保守するセクションにはまったく不向きです。
先にパレットを設定する
1つの前提条件が人々を悩ませます。サイトモードは現在のグローバルカラーが保持しているものへ結び付くだけで、グローバルカラーを作成したり推測したりはしません。パレットがElementorの初期設定のままのサイトへ変換すると、セクションは忠実に初期設定を採用するため、変換が失敗したように見えます。
保持する予定のものを変換する前に、サイト設定 → グローバルカラーでPrimary、Secondary、Text、Accentを定義するために5分使ってください。その後取り込むものはすべて、最初の試行で正しく配置されます。
アイコンは少し異なる動作をする
サイトモードで変換されたアイコンには固定値ではなくcurrentColorが与えられます。つまり、それを囲んでいる要素から色を継承します。そのアイコンを暗いセクションに置けば、周囲のテキストと一緒に明るい色に変わり、ウィジェットごとの設定を覚えておく必要はありません。
これは小さなことですが、特定の面倒な作業を省きます。セクションの背景を変更した後、12個のアイコンウィジェットがすべて白い背景のときの色のままだからといって、それらを探し回る作業です。
実用的な推奨
迷った場合は、まず元の色で変換してレイアウトが忠実か確認し、その後に実際に公開するバージョンをサイトカラーで再変換してください。2つを比較すれば2分で済み、判断は明らかになります。
基本方針として、自分のサイトに載せるものはすべてサイトカラーを使ってください。承認のために他の誰かのデザインを再現するものは、元の色を使ってください。モックアップが承認されて実際のページになったら、手動で色を付け直すのではなく、サイトモードで再変換してください。