テーマオプション 本文のフォント設定

Body Typography

ホーム/Theme Options/Typography/テーマオプション 本文のフォント設定
  • テーマオプション 本文のフォント設定

    このコンテンツでは、【テーマオプション 本文のフォント設定】全9のオプションについて解説をしています。

    このオプションは、本文で使用するフォント設定をします。

    見出しのフォントについては、テーマオプション 見出しのフォント設定から設定することができます。また、オリジナルフォントやAvadaのデフォルトにないフォントを使用したい場合は、テーマオプション カスタムフォントを参考にしてください。

    サクッと画像で概要を見たい方はこちら

    1.Body Typography / 本文のフォント設定

    このオプションは、本文のフォント設定を行います。
    選択するフォントファミリーによって最大8のオプションが表示されます。

    Font Family / フォントファミリー

    フォントファミリーを設定します。

    フォントは大きく分けて以下の3種類に分類できます。

    1. スタンダード
    2. Google Font(Webフォント)
    3. カスタム

    スタンダードはその名の通りArialやHelveticaなどの定番フォントです。残念ながらメイリオやヒラギノといった日本語の定番フォントはないので、カスタムを利用するまたはcssによる記述が必要になります。

    Google Fontは、Googleが無償で提供しているWebフォントです。スタンダード同様にGoogle Fonts + 日本語 早期アクセスといった日本語向けのフォントに対応していないため調整が必要になります。

    カスタムフォントは、上記のようなデフォルトにないフォントを追加し使用することができます。
    詳細については【テーマオプション カスタムフォント】をご覧ください。

    当サイトではカスタムフォントとcssを調整し、日本語版のGoogle Font(Noto Sans CJK JP)を使用しています。

    Backup Font Family / フォントファミリーのバックアップ

    フォントファミリーでGoogle Font(Webフォント)を選択した場合のオプションです。Google FontはWebフォントなので、不具合等で読み込めない場合の代替フォントになります。そのためこのオプションで選べるフォントは、スタンダードフォントになります。

    Font Weight & Style / フォントの太さ

    フォントの太さを設定します。

    このオプションはフォントファミリーで選択しているフォントによって選択肢が変化します。

    例えば、Arial,Helvetica…のスタンダードフォントを選択した場合は

    • Normal 400
    • Bold 700
    • Normal 400 Italic
    • Bold 700 Italic

    となりますが、Google FontのAbelではNormal 400のみとなります。

    Font Subsets / サブセット

    フォントのサブセットを設定します。

    このオプションは、Google Fontを使用している場合にキリル文字(ロシア語)やラテン語などの文字セットをサポートする機能です。日本語がメインのサイトやWebフォントを使用しない場合は気にする必要はありません。

    Font Size / サイズ

    フォントの大きさを設定します。

    px・em・rem・ex・% といった単位が使えます。

    Line Height / 行の高さ

    行の高さを設定します。

    px・em・rem・ex・% といった単位が使えます。

    Letter Spacing / 文字の間隔

    文字の間隔を設定します。

    px・em・rem・ex・% といった単位が使えます。

    Font Color / フォントカラー

    本文のテキストカラーを設定します。

    2.Link Color / リンクカラー

    このオプションは、リンクテキストのカラー設定をします。

    1点注意点として、このオプションを上の「Font Color / フォントカラー」と別にすると、ありあらゆるリンクテキスト(メニューやサイドバーなど)のカラーが変わってしまいます。

    ブログのような記事を主体としたサイトでAvadaを使用する際は、リンクカラーとフォントカラーは同じまたは似たような色にしておき、テキストを編集する際にビジュアルエディターで個別にリンクカラーを変えたほうがいいでしょう。