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-tips-before-after-images-logo

Diviチップス Before + After Images のインストール

ワードプレス(WordPress)で作成している Web サイトで、写真や画像の分割比較表示をしたくなった場合に、便利なプラグインとして「TwentyTwenty」があります。 Divi...
divi-lesson1-logo

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

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

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

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

Divi用の子テーマ作成プラグインを利用する Diviの使い方8-1-3

今回はDivi で子テーマを作成する方法の3つ目としてプラグインを利用する方法を図解します。複数のプラグインがありますが、その中から今回は「Divi...
divi-lesson7-logo

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

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

Pin It on Pinterest