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-lesson1-logo

ワードプレステーマ Diviの使い方1 Diviとは?~インストールまで

WordPress(ワードプレス)のテーマは数多くあるのですが、世界で一番多くインストールされ利用されているテーマはこの「 Divi 」になるのではないかと思います。入門講座として、...
divi-lesson7-logo

ワードプレス Diviの使い方7 写真を文字の形に切り抜く方法

Webサイトで写真を文字の形に切り抜いて表示させたい場合、通常は Photoshop...

Divi モジュールの使い方4 スライダーと投稿スライダー

今回は Divi の各種モジュールのうちから、スライダーモジュールと投稿スライダーモジュール(スライダーを投稿する)について図解したいと思います。Diviの使い方10 モジュールの使い方4...
divi-lesson3-2-logo

ワードプレス Diviの使い方3 レイアウトを使ったWebページ作成2

今回は Divi を使ったサイト( Webページ )作成練習の続きとして、サイトに写真ギャラリーと、自己紹介と、連絡先情報のページを追加で作成します。ワードプレス Divi の使い方3...
divi-lesson6-logo

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

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

Pin It on Pinterest