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

画像[1] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応

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

フォント組版設定の変更

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

1.レイアウト設定を開く

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

  • クリック "タイプタブ
画像[2] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルカバレッジ、迅速な対応
  • 探せ"タイポグラフィ"セクションで、フォントの様々なプロパティを調整することができます。
画像[3] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルカバレッジ、迅速な対応

2. フォントの変更範囲

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

  • クリック "タイポグラフィ「メニュー内のフォントシリーズ「ドロップダウンメニュー
画像[4] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応
  • 利用可能なさまざまなフォントファミリーは、ドロップダウンメニューで確認できます。リストをスクロールするか、検索ボックスにフォント名を入力してください。
  • グローバル設定でグローバルフォントを設定している場合は、"" をクリックします。地球のアイコン"でグローバルフォントを使用します。これにより、サイト全体の一貫性が保たれます。
画像[5] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応

グローバルフォント設定

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

  • で "フォントシリーズ「フィールドをクリックしてください。地球のアイコン"を選択し、事前に定義されたグローバルフォントを選択します。
画像[6] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応
  • グローバルフォントをカスタマイズする必要がある場合は、"グローバル設定"セクションでグローバルフォントを設定してください。
画像[7] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応

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

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

  • で "タイポグラフィ「設定から探すマグニチュード「スライダー
画像[8] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応
  • スライダーをドラッグしてフォントサイズを増減します。また、値ボックスに希望の値を直接入力することもできます。
  • Elementorはレスポンシブ設定機能を提供しています。デスクトップ、タブレット、モバイルデバイス異なるフォントサイズを設定します。
画像[9] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応

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

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

  • 語重フォントの太さは、フォントの太さを決定します。選択できるのは"正常","太字","極細"など、選択したフォント・ファミリーによって異なるフォント・ウェイト・スタイルがあります。
画像[10] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応
  • 御身長行の高さは、テキストの行と行の間の垂直方向の間隔を制御し、適切な行の高さを設定することにより、テキストの読みやすさを向上させることができます。
画像[11] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応
  • 単語間隔単語間隔とは、各文字の水平方向の間隔のことです。単語間隔を広げることで、テキストをよりまばらに見せたり、逆にコンパクトに見せることができます。
画像[12] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応

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

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

  • クリック "タイポグラフィ" タブの鉛筆アイコンでカスタム組版設定を有効にします。
画像[13] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応
  • 希望する機能(フォントサイズ、フォントの太さ、行の高さなど)を調整します。このような設定は、サイトのグローバルな組版スタイルには影響しません。

フォントカラーの変更

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

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

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

  • "テキストの色「このオプションは通常、"タイプ"タブで該当するコンテンツセクションを検索してください。
画像[14] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応
  • 打点色の変更フィールドでカラーセレクターを開きます。
画像[15] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応

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

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

画像[16] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応

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

  • クリック "地球のアイコン「をクリックして、適用したいグローバルカラーを選択します。色が必要な場合カスタマイズグローバルカラーは、Elementorの "グローバル設定「一部変更しました。
画像[17] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルリーチ、迅速な対応

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

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

  • カラーフィールドをクリックして、カラーピッカーパネルを表示します。
  • 色見本を選択するか、色の16進コード、RGB値またはHSL値を入力して、色の正確性を確認します。
  • また、Elementorではグラデーションカラーエフェクトを設定することで、テキストカラーをよりレイヤー化し、視覚的にアピールすることができます。
画像[18] - Elementorでフォントのタイポグラフィと色の設定を変更する方法:詳細ガイド - photonwave.com|プロフェッショナルなWordPress修理サービス、グローバルカバレッジ、迅速な対応

概要

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


お問い合わせ
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事を書いた人: Xiesong
終わり
好きなら応援してください。
クドス0 分かち合う
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし