Elementorのフォントと色の設定を解説：グローバルスタイルとカスタムCSSでウェブサイトのデザインを最適化する方法

この記事では、Elementorでフォントと色を設定する方法について説明します。ウェブサイトは一貫したスタイルを維持その一方で、必要な部分には柔軟性を保つ。

Elementorのフォントと色のデフォルト設定

Elementorでは、次のことができます。デフォルトのグローバルカラーとフォント設定を有効または無効にする。.これらの設定は、Elementorの "通常兵器"の設定には、主に2つのオプションがある：

• デフォルトカラーを無効にする
• デフォルトフォントを無効にする

これらのオプションを有効または無効にすると、デザインのワークフローに大きな影響を与えます。これらのデフォルト設定を無効にすると、Elementor はデフォルトの色やフォントを強制的に適用しなくなります。サイト設定「で定義されたグローバルカラーとフォントを使用します。

こうすることで、Elementorのプリセットに制限されることなく、あなたのサイトのニーズに合わせることができます。

デフォルトの色とフォントを無効にするタイミング

1.一貫性の必要性

デフォルトの色とフォントを無効にすることは、サイトのフォントと色をページ、セクション、ウィジェット間で一貫させたい場合に有効なオプションです。これらのオプションを無効にすると、Elementor は事前に設定したグローバルスタイルを使用します。たとえば、サイトのすべての見出しに特定のフォント、たとえば モンセラットこのフォントは、サイト設定でグローバルフォントとして設定するだけで、新しいヘッダーウィジェットをページにドラッグしたときに自動的に適用されます。

ケース：2つのボックスのチェックを外した場合の効果 仮にあなたが モンセラット フォントはグローバルフォントとして適用され、両方のボックスのチェックを外すと、新しく追加されたテキストウィジェットは自動的にそのフォントと設定したグローバルカラーを継承します。この一貫性はデザインとユーザーエクスペリエンスにとって重要であり、首尾一貫したサイトスタイルを保証します。

2.カスタムCSSの柔軟性

カスタムCSSでサイトのスタイルをコントロールしたい場合デフォルトの色とフォントはキャンセルされます。を使うことで、より柔軟になります。この利点は、Elementorが自動的にグローバルスタイルを適用しないため、ページ要素のスタイリングをすべてCSSで定義できることです。

しかし、デフォルト設定を無効にしてもカスタムCSSを使用しない場合、ページ上のテキストや色が期待通りに表示されないことがあります。このような理由から、デフォルト設定を無効にするのは、スタイリングを完全にコントロールしたいユーザー、特にCSSに精通しているユーザー向けです。

カスタムCSSを追加するためのヒント

カスタムCSSを使用する際、場合によっては 重要 タグを使用して、Elementor のデフォルトスタイルをオーバーライドできます。たとえば H1 タイトルの色とフォントには、以下のコードを使用できます：

cssCopyコード
h1 {<br>    color: var(--e-global-color-accent) !important；<br>    font-family: Verdana !important；<br>}<br>
h1 {<br>    color: var(--e-global-color-accent) !important；<br>    font-family: Verdana !important；<br>}<br>
h1 {
    color: var(--e-global-color-accent) !important；
    font-family: Verdana !important；
}

この例では 重要 タグを使用すると、カスタムスタイルが適用されないことがあります。 Elementorのグローバル設定の方が優先順位が高い.

有効または無効グローバルカラーとフォントのさまざまな効果

1.グローバルカラーとフォントの適用

いつグローバルカラーとフォントが有効Elementorは自動的にページ上のすべての要素にグローバルスタイルを適用します。これはCSSに詳しくないユーザーや時間を節約したいユーザーにとって非常に便利です。例えば、サイト設定でグローバル配色として特定の色を選択すると、すべてのボタン、見出し、テキストに自動的にその色が適用されます。この設定により、一貫性のあるデザインが保証され、手作業で調整する時間を大幅に節約できます。

2.チェックボックスをオンにした場合の効果

Disableボックスをチェックすると、Elementorは自動的に色やフォントを適用しなくなります。この時点で、カスタム CSS を使ってサイトのスタイルを完全に制御できます。 重要 タグでグローバル設定を上書きすることができます。例えば、以下のコードはH1見出しに適用できます：

cssCopyコード
h1 {<br>    color: var(--e-global-colour-accent).<br>    font-family: Verdana.<br>}<br>
h1 {<br>    color: var(--e-global-colour-accent).<br>    font-family: Verdana.<br>}<br>
h1 {
    color: var(--e-global-colour-accent).
    font-family: Verdana.
}

これは、カスタムスタイルがグローバル設定よりも優先されることを意味します。 重要 カバーするタグ

無効化ボックスのチェックと解除のタイミング

ニーズやワークフローに応じて、無効化ボックスをチェックするかしないかを選択できます：

• チェックなし： これは、サイトデザインの一貫性を維持したい場合にチェックすることができます。グローバルカラーとフォントの自動適用.この方法は、ウェブサイトのスタイルをあまりカスタマイズしたくないユーザーに特に適している。
• 選ばれた： カスタムCSSでウェブサイトのスタイリングを完全にコントロールしたい人にとっては、より柔軟なデザインが可能になります。この場合、Elementorはグローバルスタイルは適用されないその代わり、カスタムCSSで完全にコントロールすることができる。

ハイブリッド方式によるセットアップ

フォント設定のチェックを外し、カラー設定はそのままにしておきます。こうすることで、グローバルフォント（Montserratなど）がサイト全体に自動的に適用されるようにしつつ、カスタムCSSで特定の要素の色をコントロールすることができます。この方法でデザインの一貫性を確保しつつ、必要に応じてさらにカスタマイズすることができます。

カラー設定については、特に特定の要素に独自のカラースキームを適用したい場合は、「無効にする」オプションにチェックを入れてください。

カスタムのグローバルカラーとフォントを使用する際のヒント

Elementor でフォントと色をよりよく管理するために、カスタムのグローバルな色とフォントのコレクションを作成することもできます。これにより、すべてのページとウィジェットが追加されたときに、定義済みのスタイルを自動的に継承します。

ステップ：カスタム・グローバル・スタイルの作成

1. サイト設定で"グローバルカラー「そしてグローバルフォント「オプション

2. グローバルスタイルとして保存することで、配色やフォントスタイルをカスタマイズできます。

3. ページに新しい要素を追加すると、すべてのウィジェットは自動的にこれらのグローバル設定を継承します。

このように設定することで、時間を節約できるだけでなく、ウェブサイトのスタイルに一貫性を持たせることができる。

結論

Elementorのフォントと色の設定は、豊富なデザインオプションを提供します。重要なのは、あなたのワークフローに最適な設定を見つけることです：

• デザインによる一貫性： デフォルトの色とフォントのチェックを外すと、サイト全体で一貫したスタイルを保つことができます。
• 柔軟な設計： 両方のボックスにチェックを入れることで、グローバル設定に干渉される心配をすることなく、カスタムCSSの使用を完全にコントロールすることができます。