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

Elementorのフォントと色のデフォルト設(shè)定

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

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

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

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

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

1.一貫性の必要性

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

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

2.カスタムCSSの柔軟性

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

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

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

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

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

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

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

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

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

2.チェックボックスをオンにした場(chǎng)合の効果

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

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

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

お問い合わせ
チュートリアルが読めない？無料でお答えします！個(gè)人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時(shí)間: 月～金、9:30～18:30、祝日休み