Divi にはサイトの文字の大きさを変える複数の方法が存在します。それぞれで使いどころを分けて利用すると便利です。

Diviの使い方8 外観のカスタマイズ2
サイトの文字の大きさを変える

2.外観のカスタマイズでサイト全体で文字の大きさを変える

外観のカスタマイズでテキストのサイズを変えることで、サイト全体での文字の大きさを変えることができます。

①④ボディのヘッダーテキストサイズ

②メタ情報のテキストサイズ

③ボディのテキストサイズ

 

「外観」>「カスタマイズ」をクリックします。

表示されるメニューで、

「一般設定」をクリックし「書式」をクリックします。

1)本文の段落(paragraph)文字サイズの変更

書式のボディテキストサイズを変更することで、

サイト全体の本文領域の文字の大きさが変更できます。その下は行(Row)の高さの設定です。

2)本文のヘッダー文字サイズの変更

書式のヘッダーテキストサイズを変更することで、

サイト全体の本文領域のヘッダーテキストの文字の大きさを変更できます。ここではヘッダー文字間隔と、行の高さの変更もできます。

3)ヘッダーメニューの文字サイズの変更

ヘッダーメニューの文字のサイズは、

「ヘッダーとナビ」の第一と第二メニューバーをクリックします。

表示されるメニューで、

テキストサイズと文字間隔をへんこぅできます。

4)メタ情報の文字サイズの変更

メタ情報の文字のサイズは、「ブログ」の「投稿」をクリックします。
メタ情報のテキストサイズや文字間隔を変更できます。

5)フッターメニューの文字サイズの変更

フッターの文字サイズの変更は、「フッター」をクリックし、

「フッターメニュー」をクリックします。
文字間隔とフォントサイズを変更できます。

6)ウィジェットの文字サイズの変更

ウィジェットの文字のサイズの変更は、上記フッターメニューの「ウィジェット」をクリックします。

ヘッダーテキストサイズと、ボディリンクテキストサイズを変更します。

7)下部ナビの文字サイズの変更

下部ナビの文字のサイズは、上記の「フッター」の「下部ナビ」をクリックします。

8)モバイルの文字サイズの変更

モバイルでの文字サイズは、

「モバイルスタイル」をクリックすることで別に設定できます。
セクションと行の高さ、ボディとヘッダーの文字サイズを変更できます。

3.モジュールの設定で文字サイズを変える

サイト全体での文字の変更は上記の機能を組み合わせて行いますが、モジュールの設定パネルで、さらに追加で個別のモジュールごとに設定できます。

各モジュールのデザインタブをクリックします。

テキストサイズは「テキスト」で、ヘッダー文字サイズは「Heading Text」で設定できます。

 

1)テキストの変更

テキスト文字のサイズ、文字間隔、行の高さを変更できます。

また、文字サイズは直接 px 単位で設定できるだけでなく、 em でも指定できます。em を使うと、全体設定の文字のサイズを 1em として、倍率で指定もできます。

文字サイズの「スマホマーク」をクリックすると切り替えタブが表示され、それぞれを別に設定が可能です。

2)Heading Text の変更

Heading Text では、タブで切り替えてそれぞれのサイズごとに、設定が可能です。
見出し文字のサイズ、文字間隔、行の高さを設定できます。
文字サイズの「スマホマーク」をクリックすると切り替えタブが表示され、それぞれを別に設定が可能です。

これらの機能を組み合わせることで、自由に文字サイズを設定できます。

ワードプレス Divi レッスン Diviの使い方図解

写真サイトを構築する際に、役に立ちそうな設定や情報をまとめています。こちらは、ワードプレステーマ Divi に関連する記事の目次ページとしています。なるべく図を用いて簡単に説明するようにしています。参考にどうぞ。

Divi-lesson9-logo

Divi レッスン9 テーマのオプションのおすすめ設定

Divi でサイトを作成したら、ぜひオプション設定も変更しましょう。Divi...
divi-lesson8-2-logo

ワードプレス Divi の使い方8 外観のカスタマイズ2 サイトの文字の大きさを変える

Divi にはサイトの文字の大きさを変える複数の方法が存在します。それぞれで使いどころを分けて利用すると便利です。Diviの使い方8 外観のカスタマイズ2...
divi-reference2-logo

ワードプレス Divi リファレンス2 テーマのオプションの設定方法

Divi では専用のオプションメニューを利用して様々な設定を行えるようになっています。今回はその「テーマのオプション」の設定方法について図解します。Diviの使い方9...
divi-lesson6-logo

ワードプレス Diviの使い方6 設定でデザインできる共通項目と固有項目

Divi Builder の設定のデザインタブで設定できる項目として、セクションの Dividers...

Pin It on Pinterest