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の使い方10-5 お問い合わせフォームモジュールの利用方法

今回は Divi の各種モジュールのうちから、お問い合わせフォームモジュール(Contact Form)について図解したいと思います。 Diviの使い方10-5...
divi-lesson7-logo

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

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

Divi レッスン8 テーマのカスタマイズ1 子テーマを作成する方法

今回から複数回にわたって、テーマのカスタマイズ、オプション設定について解説します。まず、Divi のテーマをカスタマイズする前に、子テーマ(Divi Childe...
divi-lesson8-3-logo

ワードプレス Diviの使い方8 外観のカスタマイズ3 色を変える方法

今回はサイトの色を変える方法を解説します。Divi では複数の方法で色を変えることができます。Divi の使い方8 外観のカスタマイズ3 色を変える方法 4.カラースキームでサイト全体の色を変える...

ワードプレス Divi リファレンス1 外観のカスタマイズ

今回は Divi テーマのカスタマイズのうち、「外観」>「カスタマイズ」の項目で設定できる内容について図解します。ワードプレス Divi リファレンス1...

Diviのモジュールの使い方6 アクションの呼び出しとボタン

今回は Diviの各種モジュールのうちから「アクションの呼び出し」と「ボタンモジュール」の使い方について、Divi初心者向けに図解したいと思います。Diviの使い方10 モジュールの使い方6...

Pin It on Pinterest