Diviテーマカスタマイザーの究極のガイド

Divi Theme Customizerは、Diviテーマをカスタマイズするための強力で便利なツールです。 Visual Builderと同様に、Divi Theme Customizerを使用すると、視覚的なフロントエンドのカスタマイズとデザインの変更が可能になり、推測ゲームをカスタマイズプロセスから除外できます。 このツールを効率的に使用すると、将来のプロジェクトで時間を大幅に節約し、ジャンプスターターになる可能性があります。

今日の投稿は、テーマカスタマイザーがどのように機能するかをよりよく理解し、将来のプロジェクトの生産性を向上させるために使用できるようにすることを目的としています。 テーマカスタマイザーで使用できるほとんどすべてのオプションについて、Diviに固有のオプションに重点を置いて説明します。 ある意味で、この投稿は、途中でいくつかの詳細な説明と設計のヒントを提供するドキュメントの一部として機能します。 また、次のプロジェクトで使用するためにカスタマイザー設定をエクスポートする方法も示します。

カバーすることがたくさんあるので、最初から始めましょう。

WordPressを念頭に置いて構築

テーマカスタマイザーはWordPress3.4​​で導入されました。 この便利な機能により、WordPressユーザーはテーマに加えた変更をリアルタイムでプレビューし、それらの変更をワンクリックで保存できます。 以前は複数のウィンドウと数え切れないほどの更新を行っていましたが、今では1つのブラウザウィンドウですばやく実行できます。

テーマTwentySeventeenのテーマカスタマイザーオプションの例を次に示します。

ご覧のとおり、以前はWordPressのバックエンドのさまざまなページにあったWordPressの機能の多く（サイトID、メニュー、ウィジェットなど）に、このフロントエンドカスタマイザーですべて1か所でアクセスできるようになりました。

一方、Divi Theme Customizerは、このTheme Customizerの拡張バージョンとして構築されており、あらゆる種類のDivi固有のオプションがあります。 ユーザーにとって、これによりDiviのカスタマイズプロセスがはるかに簡単になります。 また、編集中に（同時に）カスタマイズを実際に確認できるため、これは便利なデザインツールになります。

Divi Theme Customizerには、まだ多くの標準のWordPress Customizerオプションがありますが、さらに多くのオプションがあります。

ご覧のとおり、Diviテーマカスタマイザーに追加された設定は他にもたくさんあります。 それでは、これらについてさらに詳しく調べてみましょう。

一般設定

テーマのカスタマイズを開始するときは、最初に[一般設定]から始めて、下に向かって進むのが最善だと思います。

サイトID

このセクションはDiviに固有のものではありません。 これは、サイトのタイトルとタグラインを変更するのに便利な場所です。 また、Diviテーマオプションで追加できるファビコンアイコンとは異なり、ブラウザやアプリに使用されるサイトアイコンを入力することもできます。

レイアウト設定

レイアウト設定を使用すると、セクションと行の間にあるスペースの量と、メインコンテンツセクションの最大幅を決定することで、テーマのフレームワークを調整できます。

ボックスレイアウトを有効にする

ここでは、サイトをボックスレイアウトに変更して、サイトのコンテンツをフレーム化し、カスタマイズ可能な背景を公開することができます。

ウェブサイトのコンテンツの幅

ここで、コンテンツセクションの最大幅を設定できます。 コンテンツはレスポンシブレイアウトになっているため、小さいサイズに調整されますが、ここで設定した最大幅より広くなることはありません。

デフォルトは1080pxに設定されています。 これは、ほとんどの標準的なラップトップおよびデスクトップに適した幅です。

ウェブサイトの雨どいの幅

ガター幅は、各行の列間の水平方向のスペース（マージン）の量に対応します。

ガター幅のオプション値の範囲は1〜4です。

1は、列間のゼロマージンを表します。
2は、列間の3％の右マージンを表します。
3は、列間の5.5％の右マージンを表します。
4は、列間の8％の右マージンを表します。

カスタムサイドバーの幅を使用する

これにより、テーマのデフォルトのサイドバー幅が設定されます。 これは、サイドバーがあり、DiviBuilderを使用して作成されていないテーマのすべてのページに適用されます。

セクションと行の高さ

これらのオプションは、各セクションと行の垂直方向の間隔（上部と下部のパディング）の量を調整します。

デフォルトでは、セクションのパディングは上部と下部で50pxです。 行の場合、デフォルトのパディングは上下の30pxです。 ただし、カスタマイザーを使用してセクションまたは行のパディングを変更すると、パディング値は、テーマカスタマイザーのオプションダイヤルの番号に対応するパーセンテージに変わります。

たとえば、「0」は上下のパディングの0％を表し、「1」は上下のパディングの1％を表し、「2」は2％を表します。 パディングのパーセンテージは、コンテナ（セクションまたは行）の幅に基づいています。 したがって、セクションの実際の幅が1080pxで、セクションの高さを1に設定した場合、これは次のことを意味します…

1080px x 0.01 = 10.8px

…上下に10.8pxのパディング。

オプションの範囲は0〜10であるため、最大10％のパディングを使用できます。

テーマアクセントカラー

他の要素の色を変更する前に、まずこれを変更する必要があります。 変更したら、設定を保存して公開し、ページを更新します。 これで、更新されたテーマアクセントカラーが他の要素に自動的に入力されているはずです。

テーマアクセントカラーを更新すると、以下も更新されます。

• ボディリンクカラー
• ウィジェットのヘッダーの色
• ウィジェットの箇条書きの色
• フッターソーシャルアイコンホバーカラー
• アイコンのデフォルトの色
• フッターメニューアクティブリンクカラー
• 二次メニューの背景色
• スライドインとフルスクリーンヘッダースタイルの背景色
• モバイルメニューの色のハンバーガーメニューアイコン
• プライマリメニューアクティブリンクの色
• ドロップダウンメニューの線の色
• 二次メニューの背景色
• 二次ドロップダウンメニューの背景色
• 二次メニューの背景色
• アクティブなプライマリメニューのリンクの色
• フッターメニューアクティブリンクカラー

タイポグラフィ

これは、ユーザーや開発者に無視されがちなWebサイトの最も重要な側面の1つです。 これらのオプションを見落とすのを間違えないでください。 これらの詳細を正しく理解することは、大きな違いを生む可能性があります。 時間をかけてテーマのデフォルトのタイポグラフィを設定すると、モジュールレベルでカスタマイズを行う必要がなくなるため、長期的には時間を節約できます。

本文のサイズ

これにより、テーマのデフォルトの本文テキストが変更されます。 デフォルトのサイズは14pxです。

デザインのヒント： 14pxは、標準の本文テキストサイズには少し小さすぎるようです。 基本レベルの本文のフォントサイズは、実際には16px未満にしないでください。 40歳以上の方に感謝します。 ほとんどのブラウザでさえ、標準の基本レベルのフォントサイズとして16pxを使用しています。

ボディラインの高さ

テキストの個々の行の行の高さ。

設計のヒント：線の高さは長さの値「em」で測定されます。 Diviのデフォルトは本文テキストで1.7emです。 このem値は、要素の現在のフォントサイズに基づいており、親のインライン値（この場合は現在のフォントサイズ）に合わせてスケーリングされるため、ピクセル（px）値よりも優れています。 値「1.7em」は基本的に現在のフォントサイズの1.7倍を表します。 したがって、現在のフォントサイズが16pxの場合、行の高さは27.2pxになります。 これにより、上部に5.6ピクセル、下部に5.6ピクセルの余分なスペースができます。 これは読みやすさの良いリード（コピーの行間のスペース）のようです。

ヘッダーテキストサイズ

Diviでは、ここでデフォルトのh1ヘッダーテキストサイズを設定できます。 これは、全幅ヘッダーモジュールのタイトルなどのDiviの要素に影響します。 他のヘッダーレベル（h2、h3など）のサイズを調整する場合は、追加のCSSでそれらを追加することをお勧めします（これについては、後の投稿で説明します）。

設計のヒント：ほとんどの場合、ページごとにヘッダーは1つしかないため、それを考慮に入れてください。 本の表紙のタイトルと考えてください。 それは人が最初に気づくことです。 そして、人気のスローガンとは反対に、特にこの場合、人々はまだ本を表紙で判断します。

ヘッダーテキストサイズのデフォルト値は30pxです。 これは、最初から安全なサイズです。 特に一部の見出しはより長いコピーを必要とするためです。 ただし、モニターディスプレイのサイズの拡大に対応するために、ヘッダーサイズを大きくする傾向があります。 さらに、ほとんどのクライアントは、「Aboutus」や「ContactUs」などのシンプルで短い見出しのWebサイトを必要としています。これは、フォントサイズが大きいほど見栄えが良くなります。 h1ヘッダーを少なくとも48pxに設定するのが好きです。

ヘッダー文字の間隔

文字間隔は、文字間の水平方向の間隔を調整します。 ヘッダー文字の間隔の値は、すべてのヘッダーレベル（h1、h2、h3、h4、h5、h6）、ブロック引用符、およびスライドタイトルに影響します。

設計のヒント：大きなテキストの場合は文字間隔を小さくし、小さいテキストの場合は文字間隔を大きくすることをお勧めします。 ヘッダーに関しては、フォントの太さ（太字）が大きい大きなテキストは、-1pxの文字間隔を小さくすると見栄えが良くなります。

ただし、同じヘッダーを大文字にすると、文字間隔を1〜2ピクセルに増やすと見栄えが良くなる場合があります。

ヘッダーラインの高さ

文字間隔の値と同様に、ヘッダー行の高さの値は、すべてのヘッダーレベル（h1、h2、h3、h4、h5、h6）、ブロック引用符、およびスライドタイトルに影響します。 フォントサイズが大きいため、1emがデフォルト設定です。 特にヘッダーが2行以上になる場合は、1emから1.3emの間の行の高さが適切だと思います。

ヘッダーフォントスタイル

これらのオプションを使用して、ヘッダーのフォントスタイルを変更します。

ヘッダーとボディフォント

ディビでのデフォルトのフォントはオープンなきですが、ディビテーマカスタマイザーの中から選択する、ほぼ百のフォントを持っています！ これらの組み込みフォントを利用して、テーマに最適なフォントをテストしてください。

デザインのヒント：フォントペアリングのインスピレーションについては、GoogleFontsをペアリングするのに役立つfontpair.coをチェックしてください。 Diviは、これらのフォントのすべてをすぐにサポートするわけではありませんが、Diviがサポートしているフォントを検索して、一緒に機能するペアリングを確認することができます。

ボディリンクカラー

ボディリンクの色は、テーマのアクセントカラーに継承されます。 ただし、ここではいつでも変更できます。

設計のヒント：必要に応じて、追加のCSSを使用してすべての本文リンクに下線属性を追加できます（投稿の最後を参照）。

本文の色

ここで、本文の色を変更できます。 New YorkTimesやSmashingMagazineなどの人気のあるブログでは、本文の色に＃333333を使用しています。 私の意見では、これは白い背景で読みやすくなる傾向があります。

ヘッダーテキストの色

ここで、ヘッダーの色を変更できます。 あなたが黒の色合いに固執しているなら、私はそれを少し目立たせるために本文より少し暗くします。 ＃121212のようなものが機能します。

バックグラウンド

このオプションは、テーマの背景を設定します。 Diviテーマの場合、このオプションは実際にはボックスレイアウトにのみ適用されます。 ここで変更しない限り、デフォルトの背景色は白（#ffffff）です。 必要に応じて、背景画像を追加することもできます。

レイアウト設定は以上です。 レイアウトを配置したら、より具体的な要素を検討し始めることができます。

ヘッダーとナビゲーション

ヘッダーとナビゲーションメニューは、おそらくテーマで最も重要な要素です。 このセクションには、必要なほぼすべての種類のヘッダーを作成するための多くのオプションがあります。

ヘッダー形式

ヘッダースタイル

4つのヘッダースタイルにより、ワンクリックでWebサイトの外観を一新できます。 これらのスタイルには、中央揃え、中央揃えのインラインロゴ、スライドイン、およびフルスクリーンが含まれます。

また、独自の機能となる可能性のある垂直ナビゲーションをサイトに追加することもできます。 また、スクロールするまでナビゲーションを非表示にすることもできます。 これは、ナビゲーションバーの邪魔をせずに、折り目の上のより多くのコンテンツを強調表示したい単一ページのサイトに役立ちます。

プライマリメニューバー

プライマリメニューバーは、Webサイトのヘッダー内のメインメニューです。 プライマリメニューの外観を完全にカスタマイズできます。

デザインのヒント： Divi Theme Customizerを使用してメニューを完成させる前に、メニューリンクがどのようになるかを本当に知っておく必要があります。 レスポンシブメニューのスタイルを設定することを忘れないでください。時間をかけて、すべての画面サイズでメニューが見栄えがすることを確認してください。 これを行うには、カスタマイザーの下部にあるデバイスアイコンをクリックするか、ブラウザーのサイズを調整するだけです。 興味がある場合は、レスポンシブナビゲーションを修正する方法をここで見つけることができます。

全幅にする

これにより、メニューがブラウザウィンドウの全幅に拡張されます。

ロゴ画像を非表示

必要に応じて、ここでメニューからロゴ画像を完全に非表示にすることができます。

メニューの高さ

ここで、メニューの高さを好きなように変更できます。 ただし、ホームページのコンテンツではなくメニューの貴重な領域を浪費する可能性があるため、メニューの高さを大きくしすぎないように注意してください。

ロゴの最大高さ

ここで、ロゴの最大幅のパーセンテージを増減して、ロゴを大きくしたり小さくしたりできます。

テキストサイズ、文字間隔、フォント、フォントスタイル、テキストの色、アクティブなリンクの色

これらのオプションを使用すると、メニューリンクを任意の方法でカスタマイズできます。

背景色

これにより、プライマリメニューの背景色を変更できます。

デザインのヒント：ヘッダーに半透明（または完全に透明）の色を使用すると、Diviは自動的にヘッダーを下のセクションに重ねます。 これはかなりクールな効果を生み出します。 たとえば、これは中央に配置されたヘッダースタイルで、背景が透明で、その真下に全幅のヘッダーがあります。 Diviがヘッダーの後ろにうまく収まるように背景画像を自動的に調整する方法に注目してください。

ドロップダウンメニューの設定

ドロップダウンメニューは、メインメニューのスタイルを継承する必要はありません。 ここでは、ドロップダウンメニューのユニークなデザインを作成できます。 ドロップダウンメニューを表示するときに、カスタムアニメーションを追加することもできます。

二次メニューバー

ここでは、提供されているオプションを使用してセカンダリメニューバーをカスタマイズできます。

有効にすると、セカンダリメニューバーはブラウザの最上部にあるプライマリメニューバーの上に表示されます。 電子メールアドレス、ソーシャルメディアリンク、セカンダリメニューなどの追加要素を保持できます。

デフォルトでは、セカンダリメニューを入力するか、[ヘッダー要素]セクションに要素を追加しない限り、セカンダリメニューは非表示のままになります。 メニューを表示するには、テーマカスタマイザを保存して更新する必要がある場合があります。

固定ナビゲーション設定

固定ナビゲーションとは、ユーザーがページを下にスクロールしたときに、メニューが「固定」されているか、ブラウザウィンドウの上部に固定されている状態を指します。 デフォルトでは、固定ナビゲーションの高さが縮小され、サイトのコンテンツを表示するためのより大きなビューポートが提供されます。

デザインのヒント：固定プライマリメニューの背景色を半透明の色に設定して、背後にあるコンテンツの一部を表示することもできます。 これにより、煩わしさがさらに軽減されますが、アクセスしやすくなります。

ヘッダー要素

ヘッダー要素は、ヘッダーに追加できる追加の要素です。 これらの要素には、ソーシャルアイコン、検索アイコン、電話番号、および電子メールが含まれます。 検索アイコンを除いて、これらの要素はすべてセカンダリメニューに表示されます。

ソーシャルアイコン

デフォルトでは、DiviはFacebook、Twitter、Google +、およびRSSのアイコンを表示します。 これらのプロファイルは、Diviのテーマオプションで編集できます。

フッター

デフォルトでは、コンテンツが入力されていない限り、フッターセクションは非表示になっています。 また、フッターは、デフォルトでサイトの最下部に表示され、フッタークレジットとソーシャルアイコンを含むボトムバーと混同しないでください。

レイアウト

ここでは、フッターセクションの5つのレイアウトから選択できます。

デフォルトで＃222222に設定されているフッターの背景色を設定することもできます。

デザインのヒント：このセクションは、サイトのすべてのページに表示されます（空白のページテンプレートを選択した場合を除く）。 したがって、サイトのすべてのページに一致するように、色をよりニュートラルにすることは理にかなっています。

ウィジェット

フッターセクションにウィジェットを追加した場合は、ここでそれらのウィジェットの外観をスタイル設定できます。

ウィジェットはDiviに固有のものではありません。 これらはWordPressに組み込まれており、WordPressダッシュボードの[外観]> [ウィジェット]にあります。 そこには、ウィジェットを追加できる4つのフッターエリアがあります。 これらのセクションに追加したウィジェットはすべて、フッター領域に表示されます。

ただし、テーマカスタマイザー（私のお気に入りの1つ）を離れることなくウィジェット領域にアクセスすることもできます。

フッター要素

ここでは、セカンダリメニューと同じように、下部のバーにソーシャルアイコンを表示するように選択できます。

フッターメニュー

フッターメニューがある場合は、ここでスタイルを設定できます。

ボトムバー

一番下のバーはウェブサイトの一番下にあり、デフォルトでフッタークレジットとソーシャルアイコンが表示されます。 ここでは、ソーシャルアイコンのフォントサイズや色の変更など、これらの要素のスタイルをカスタマイズできます。

フッタークレジットを編集する

デフォルトのフッタークレジットを、このボックス内の任意のhtmlに置き換えることもできます。

ボタン

このセクションでは、デフォルトのボタンスタイルを制御します。

ボタンスタイル

ここでは、テーマに合わせてボタンのスタイルをカスタマイズできます。 ここでは、各オプションについて詳しくは説明しません。 ボタンのスタイル設定方法の詳細については、ボタンモジュールに関するドキュメントを参照してください。

テキストの色

お気づきのように、デフォルトでは、ボタンの色は一般設定で設定されたテーマアクセントの色に継承されます。 これは、テキストが「ダーク」に設定されているモジュール専用です。 また、モジュールテキストが「ライト」に設定されている場合、ボタンは白です。 ただし、ボタンにカスタムテキストの色を設定するとすぐに、この色は特定のモジュール内の暗いテキストバージョンと明るいテキストバージョンの両方に設定されます。

デザインのヒント：テーマアクセントカラーでボタンのテキストの色を設定して、モジュールにボタンの暗いバージョンと明るいバージョンを追加できるようにします。

ボタンホバースタイル

ここで、ボタンのホバー状態のスタイルをカスタマイズできます。

ユーザーがクリックしようとしているのは実際にはボタンであることをユーザーが理解することが重要です。 ホバー効果を追加すると、そこの心の中でこれが固まり、彼らが相互作用するように促します。 デフォルトでは、Diviは明るい背景を追加し、右側の矢印アイコンをアニメーション化します。 ただし、好きなように変更できます。

デザインのヒント：背景を暗い色に変更するか明るい色に変更するかは、ボタンが何らかの方法で変更されていることを確認することほど重要ではありません。 文字間隔を大きくしたり、境界線の半径を調整して、ボタンがホバーに独特の効果を与えるようにすることもできます。

ブログ

役職

このセクションでは、単一の投稿内の投稿ヘッダーコンテンツのスタイルを変更します。 これは、ブログページまたはブログモジュールでのブログの抜粋の外観を変更しません。 ブログ投稿のヘッダーは、サイトの他の部分のヘッダーとは異なって見える必要がある場合があります。 ここで、これらの調整を行います。

ポストヘッダーモジュールを使用することを選択した場合、これらのオプションは効果的ではありません。

モバイルスタイル

私はこのセクションが大好きです。 ここでは、モバイルデバイスでのサイトの外観を調整し、結果をリアルタイムで確認できます。

タブレットと電話のスタイル

タブレットまたは電話を選択すると、カスタマイザーの右側のウィンドウが自動的に調整され、デバイスでのページの外観が表示されます。 次に、[レイアウト]の[一般設定]で行ったように、セクションの高さ、行の高さ、本文のテキストサイズ、ヘッダーのテキストサイズを調整できます。

デザインのヒント＃1：電話のレイアウトをカスタマイズする1つは、行の高さを「0」に設定することです。 これにより、行間の間隔がなくなるため、電話でスクロールするときのコンテンツの流れが改善されます。

デザインのヒント＃2：サイトに適したフォントスケールを見つけます。 これが私のヘッダーのために私が従うのが好きな良いものです：

デスクトップ：48px

タブレット：40px

電話番号：32px

モバイルメニュー

これを見逃さないでください。そうしないと、モバイルメニュー用の完全に一意のヘッダーの作成を見逃す可能性があります。 モバイルデバイスでのみロゴを非表示にし、背景とテキストの色を変更できます。

配色

これらは、迅速な解決に便利です。 ただし、後でテーマカスタマイザでこれらの色の一部を変更する予定がある場合は、配色を使用することはお勧めしません。 一度設定すると、生成されたCSSに！importantルールが含まれているため、カスタマイザーでこれらの色を上書きすることはできません。

私の意見では、これをデフォルトに設定したままにしておくのが最善です。

メニューとウィジェット

WordPressダッシュボードでメニューやウィジェットを盲目的に編集する必要はもうありません。 これで、これらのアイテムを追加およびカスタマイズして、ページ上でリアルタイムにそれらが実現するのを確認できます。 便利さが大好き！

静的フロントページ

デフォルトでは、WordPressは最新の投稿をフロントページ（ホームページ）に表示します。 これは、このセクションで必要な静的ページに変更できます。 また、投稿ページ（またはブログページ）を指定することもできます。

この投稿を書くまで私はこれを知りませんでしたが、実際にはテーマカスタマイザー内から新しいページをデプロイして、カスタマイザーを離れることなくフロントページまたはブログページとして機能させることができます。

追加のCSS

追加のCSSセクションは、テーマの設定に最後の仕上げをする絶好の機会を提供します。 Divi Theme Customizerが制御できないスタイルの変更が何であれ、ここではカスタムCSSを使用して行うことができます。 カスタマイザーではCSSの変更をリアルタイムで確認できるため、外部のスタイルシートを行ったり来たりするよりも、テーマに必要な調整をはるかに簡単に行うことができます。

追加のCSSの例

例1：すべてのヘッダーのサイズを調整する

追加のCSSの良い例の1つは、残りのヘッダータグのスタイル設定です。 Diviを使用すると、見出しフォントの設定をカスタマイズできますが、これはh1ヘッダー専用です。 [追加のCSS]ボックスを使用して、残りのヘッダータグ（h2、h3、h4など）のカスタマイズを入力できます。 私は次のスケールを使用するのが好きです：16、18、21、24、36、48。

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

例2：下部の段落のパディングを本文の行の高さと一致させる

本文の行の高さを1.7emに設定する場合は、一貫したベースライングリッドと垂直方向のリズムを維持するために、段落間の下部のパディングにも同じ値を設定することをお勧めします。 つまり、段落間の距離は行の高さに等しくなります。 これを行うには、単に以下を追加します。

p { padding-bottom: 1.7em}

長さの値emは親のフォントサイズに基づいているため、テーマカスタマイザでベースのフォントサイズを別のサイズに変更すると、それに応じて1.7emの値が調整されます。

例3：リンクにアンダースコア属性を追加する

本文リンクに下線属性を追加します。

a {
    text-decoration: underline;
}

次のプロジェクトのDiviカスタマイザ設定のエクスポートとインポート

Diviテーマカスタマイザーには、ユーザーがカスタマイザー設定をエクスポートまたはインポートできる移植性オプションがあります。 これは、開発者が将来のプロジェクトで使用する一種のカスタマイザー設定テンプレートを作成する絶好の機会を提供します。

まず、時間をかけてWebサイトを構築するときにどのようなカスタマイズを行う傾向があるかを理解することをお勧めします。 これらの設定を特定したら、それらのカスタマイズをDivi Theme Customizerに入力し、それらの設定をエクスポートして、次のプロジェクトで有利なスタートを切ることができます。 あなたがすでにそれをすることができるのに、なぜ同じことを何度も繰り返し続けるのですか？ さらに、これは重要なカスタマイズをスキップしないようにするのに役立ちます。

設定をエクスポートするには、Diviテーマカスタマイザーの上部にある移植性アイコンをクリックします。

エクスポートファイルに名前を付けて、「Diviカスタマイザー設定のエクスポート」ボタンをクリックします。

これで、Diviテーマカスタマイザーで同じ移植性アイコンをクリックし、エクスポートではなくインポートを選択することで、この.jsonファイルを将来使用できます。 次に、.jsonファイルをアップロードして、[Diviカスタマイザー設定のインポート]をクリックするだけです。

以上です。

Diviカスタマイザー設定には何が含まれていますか？

カスタマイザー設定には、基本的に最初の7つのセクションのすべてが含まれます。

1. 一般設定
2. ヘッダーとナビゲーション
3. フッター
4. ボタン
5. ブログ
6. モバイルスタイル
7. 配色

最後の4つのセクションはWordPress固有であり、他のDiviインストールには引き継がれません。 これらのセクションは次のとおりです。

1. メニュー
2. ウィジェット
3. 静的フロントページ
4. 追加のCSS

追加のCSSは引き継がれないことに注意することが重要です。 次のビルドで時間を節約するために、これらの設定に依存している可能性があります。 その場合は、そのCSSを使用して子テーマを作成し、次のプロジェクトのカスタマイザー設定で追加できるようにすることをお勧めします。

Diviカスタマイザースタイルの保存方法

Divi Customizer（DiviOptionsおよびDiviBuilderと共に）の場合、Diviは、ブラウザーによってキャッシュできる静的CSSリソースを提供して、ページの読み込み時間を短縮します。 これは、スタイルがページに印刷されないが、別の静的CSSファイルに保存されることを意味します。 カスタマイザー設定を保存するたびに、静的CSSファイルが更新されます。 これには、追加した追加のCSSも含まれます。

まとめ

Divi Theme Customizerには非常に強力なオプションがいくつか付属しており、カスタマイズプロセスは便利で楽しいものです。 そして、これらのオプションで何ができるかをより深く理解することで、Diviを使用してWebサイトを構築する方法が確実に改善されます。 まだ行っていない場合は、時間をかけてプロジェクトの最適なベースライン設定を調べ、それらをカスタマイザーに接続して、エクスポートファイルを作成します。 あなたはこれが新しいプロジェクトを始めるときにあなたに与えるブースト（そして自信）に驚かれることでしょう。

コメントでお返事をお待ちしております。

乾杯！