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

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

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

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

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

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

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

1.一貫性の必要性

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

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

2.カスタムCSSの柔軟性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結論

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

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