Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

使用中 エレメンタ ウェブサイトをデザインする際にフォントの組版と色の設定Elementorは、ウェブサイトの全体的な外観とユーザーエクスペリエンスに簡単に適応できる柔軟なデザインオプションを幅広く提供しています。文字サイズ、色、フォントファミリー、フォントウェイトおよびその他の組版設定。これらのオプションは通常、設定パネルの "タイプ"タブが見つかりました。

フォント組版設定の変更

タイポグラフィは単にフォントのサイズや色を選ぶだけではありません。フォントファミリー、フォントのウェイト、行の高さ、単語の間隔など、他の重要なタイポグラフィのプロパティを調整することも含まれます。ここでは、Elementorでフォントのタイポグラフィを変更する方法を説明します。

1.組版設定を開く

Elementorエディタに移動し、テキストを修正したいページのウィジェットを選択します。テキスト関連の各ウィジェット(例えばキャプションテキストエディタなど)でフォントの組版を編集することができます。次へ

  • クリック "タイプタブ
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド
  • それを探せ"タイポグラフィ"セクションで、フォントの様々なプロパティを調整することができます。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

2. フォントの変更範囲

フォントファミリーはテキストのスタイルと個性を決定するため、ブランドに適したフォントを選ぶことは非常に重要です。

  • クリック "タイポグラフィ「メニューにあるフォントシリーズ「ドロップダウンメニュー
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド
  • 利用可能なフォントファミリーは、ドロップダウンメニューで確認できます。リストをスクロールするか、検索ボックスにフォント名を入力してください。
  • グローバル設定でグローバルフォントを設定している場合は、"" をクリックします。地球のアイコン"でグローバルフォントを使用します。これにより、サイト全体の一貫性が保たれます。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

グローバルフォント設定

グローバルフォントはElementorが提供する機能で、サイト全体で同じプリセットフォントのセットを使用することができます。グローバルフォントを使うには

  • で "フォントシリーズ「フィールドをクリックしてください。地球のアイコン"を選択し、事前に定義されたグローバルフォントを選択します。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド
  • グローバルフォントをカスタマイズする必要がある場合は、Elementorの設定の"グローバル設定"セクションでグローバルフォントを設定してください。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

3.フォントサイズの調整

フォントサイズは、特にモバイルデバイスでのテキストの読みやすさに影響します。Elementorのフォントサイズスライダーを使えば、デバイスごとに異なるフォントサイズを簡単に設定できます。

  • で "タイポグラフィ「設定から探すマグニチュード「スライダー
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド
  • スライダーをドラッグしてフォントサイズを増減します。また、値ボックスに希望の値を直接入力することもできます。
  • Elementorはレスポンシブ設定機能を提供しています。デスクトップ、タブレット、モバイルデバイス異なるフォントサイズを設定します。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

4.文字の太さ、行の高さ、文字間隔の調整

テキストスタイルをさらにカスタマイズするには、単語の太さ、行の高さ、単語の間隔を設定できます:

  • 語重フォントの太さは、フォントの太さを決定します。選択できるのは"正常","太字","極細"など、選択したフォント・ファミリーによって異なるフォント・ウェイト・スタイルがあります。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド
  • 御身長行の高さは、テキストの行と行の間の垂直方向の間隔を制御し、適切な行の高さを設定することにより、テキストの読みやすさを向上させることができます。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド
  • 単語間隔単語間隔とは、各文字の水平方向の間隔のことです。単語間隔を広げることで、テキストをまばらに見せたり、逆にコンパクトに見せることができます。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

5.カスタムレイアウト設定の使用

ウィジェットによってはカスタマイズタイポグラフィ設定グローバルフォントスタイルこれは、ウィジェットの組版設定を個別に調整することで調整できます:

  • クリック "タイポグラフィ" タブの鉛筆アイコンでカスタム組版設定を有効にします。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド
  • 希望する機能(フォントサイズ、フォントの太さ、行の高さなど)を調整します。このような設定は、サイトのグローバルな組版スタイルには影響しません。

フォントカラーの変更

組版設定に加えてカラーまた、ビジュアルデザインの重要な要素でもあります。Elementorには、テキストに特定の色を設定できる便利な色選択ツールが用意されています。

1.スタイルタブで"テキストの色「フィールド

まず、変更したいウィジェットを選択し、その"タイプ「タブで"テキストの色「セッティング

  • "テキストの色「このオプションは通常、"タイプ"タブで該当するコンテンツセクションを検索してください。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド
  • 打込む色の変更フィールドでカラーセレクターを開きます。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

2.グローバルカラーの選択

グローバルカラーを使用する場合は、"地球のアイコン"で、サイトの定義済みのグローバルカラーを選択します。

Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

これにより、サイト全体で色の一貫性を保つことができ、グローバルカラーが変更されると、その色を使用するすべてのウィジェットが自動的に更新されます。

  • クリック "地球のアイコン「をクリックして、適用したいグローバルカラーを選択します。色が必要な場合カスタマイズグローバルカラーはElementorの "グローバル設定「一部変更しました。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

3.カラーセレクターの使用

をカスタマイズしたい場合ウィジェットグローバルカラーを使用する代わりに、カラーピッカーを使用して適切な色を選択することができます。

  • カラーフィールドをクリックして、カラーピッカーパネルを表示します。
  • 色見本を選択するか、色の16進コード、RGB値またはHSL値を入力して、色の正確性を確認します。
  • また、Elementorではグラデーションカラー効果を設定することができ、テキストカラーをより重層的で視覚的に魅力的なものにすることができます。
Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド

概要

エレメンタ 強力なウェブサイトビルダーツールとして、タイポグラフィやカラー設定の豊富なオプションを提供しています。これらのステップに従うことで、フォントサイズ、カラー、ファミリー、その他の属性を簡単に調整し、あなたのスタイルに合ったウェブサイトを作成することができます。グローバル設定によってウェブサイトの一貫性を確保したい場合でも、カスタムタイポグラフィによって特定のウィジェットにユニークなスタイルを与えたい場合でも、Elementorはあなたのニーズを満たす柔軟性を持っています。


お問い合わせ
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間:月~金、9:30~18:30、祝日休み
投稿者:photon fluctuations、リツイート(帰属表示付き):https://www.361sale.com/ja/20336/

好き (2)
前へ 2024年9月21日午後1時59分
次のページ 2024年9月21日 16:27

おすすめ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

お問い合わせ

020-2206-9892

QQ咨询:1025174874

Eメール:info@361sale.com

勤務時間:月~金、9:30~18:30、祝日休み

カスタマーサービス WeChat