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のモジュールの使い方6 アクションの呼び出しとボタン

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

ワードプレス Diviの使い方 7-2 イラストの形にグラデーション画像を表示する

前回は文字の形に画像を切り抜いて表示させましたが、今回はイラストの形にグラデーション画像を切り抜いてみましょう。Divi...
divi-lesson5-3-youtube-logo01

DiviでYouTubeを表示する Diviの使い方5の3

Divi は YouTube 動画も簡単にサイトに設置できるように作られています。今回はその設置方法を図解したいと思います。Diviの使い方5の3 Divi で YouTube...

動画 と 動画スライダーモジュール Diviの使い方10-3

今回は Divi の各種モジュールのうちから、動画モジュールと動画スライダーモジュールについて図解したいと思います。 動画と動画スライダーモジュール...

Pin It on Pinterest