高度なレスポンシブ編集のためにDiviの組み込みカスタムCSS入力を使用する方法

Diviにはレスポンシブデザイン編集機能が組み込まれているため、デスクトップ、タブレット、または電話のディスプレイでWebサイトのスタイルを非常に簡単に調整できます（CSSを知らなくても）。 Diviの組み込みのレスポンシブ編集の一部には、カスタムCSSを使用してより高度なレスポンシブデザインの変更を行うための簡略化された方法が含まれています。 これは、メディアクエリで外部スタイルシートに依存するよりもはるかに便利です。 レスポンシブデザインから当て推量の多くを取り除いて、デバイスディスプレイごとにリアルタイムでCSSを視覚的に調整することもできます。

このチュートリアルでは、カスタムCSSを使用して便利なレスポンシブデザイン変更を行う方法を紹介します。これにより、Diviの組み込みデザインオプションでは利用できない高度なデザインの修正を行うことができます。

始めましょう。

レスポンシブ編集のためのDiviの組み込みブレークポイント

Diviには、Divi Builderの任意の要素の設定に組み込まれている、3つの一般的なレスポンシブブレークポイント（ブラウザーの幅に基づいてデザインが変更されるポイント）があります。 これらの3つのブレークポイントは、主にデスクトップ、タブレット、および電話のディスプレイの特定の設計設定を容易にすることを目的としています。

デスクトップ、タブレット、および電話のディスプレイ用のDiviの3つの主要なレスポンシブブレークポイントは次のとおりです。

• デスクトップ：981px以上
• タブレット：980pxから768pxの間
• モバイル：767px以下

これらの3つのブレークポイントは、高度なカスタムCSSだけでなく、Diviビルダー全体のレスポンシブデザインタブすべてで同じです。 したがって、レスポンシブデザインタブを展開するたびに、それらのタブで行われたスタイル設定は、これら3つの主要なレスポンシブブレークポイントの範囲内に表示されます。

また、デバイスディスプレイ用のこれらの一般的なブレークポイントは、Diviテーマの構造に組み込まれているブレークポイントだけではないことにも言及する価値があります。 Diviのレスポンシブブレークポイントの特定に関する記事でそれらについて学ぶことができます。

DiviのカスタムCSS入力ボックスを理解する

Divi Builder内で要素（セクション、行、またはモジュール）をカスタマイズすると、各設計オプションはその要素の特定の部分に対応（またはターゲット）します。 たとえば、テキストモジュールを編集する場合、組み込みの設定（つまり、見出し2フォント、左パディングなど）を使用して、そのモジュールの任意の部分をターゲットにすることができます。

同様に、高度なカスタムCSS入力ボックスを使用してDivi要素（セクション、行、またはモジュール）をカスタマイズすると、各入力ボックスはそのDivi要素の全体または特定の部分に対応（またはターゲット）します。 使用可能なカスタムCSSボックスの数は、スタイリングする要素によって異なります。 テキストモジュールには、3つのカスタムCSS要素入力ボックス（前、メイン、および後）しかありませんが、アクションモジュールの呼び出しには、タイトル、説明、およびボタン用の追加のボックスがあります。 これは、モジュールに、そのモジュール要素内でターゲットにできるより多くのパーツがあるためです。

これは、Call toActionモジュールで使用できるさまざまなカスタムCSS入力ボックスの図です。

各カスタムCSS入力ボックスは、要素内の特定のCSSクラスを対象としています。 特定の要素の対象となるクラスを表示するには、要素にカーソルを合わせて疑問符アイコンをクリックするだけです。 そこに、対象となるCSSクラスが表示されます。

したがって、入力ボックスのCSSスニペットにCSSクラスを追加する必要はありません。 そうした場合、コードは機能しません。

代わりに、CSSプロパティを、すでにターゲットになっているクラスに適用するボックスに直接追加するだけです。

レスポンシブデザインのブレークポイントにカスタムCSSを追加する方法

css入力ボックスのいずれかの3つの主要なレスポンシブデザインブレークポイントにアクセスするには、要素にカーソルを合わせてタブレットアイコンをクリックするだけです。 次に、3つのレスポンシブデザインタブが表示されます。

これで、タブを使用して3つのデバイスディスプレイ（デスクトップ、タブレット、電話）のいずれかにCSSを追加するだけで済みます。

たとえば、タブレットと電話ではモジュールの全幅にまたがるが、デスクトップではないように、召喚状のプロモーションボタンが必要だとします。 [プロモーションボタン]入力ボックスの下にあるタブレットタブを選択し、「display：block;」を追加します。

タブレットタブを選択すると、Divi Builderビューモードがタブレットビューモード（幅768ピクセル）に移行し、デザインがリアルタイムでどのように表示されるかをよりよく確認できることに注意してください。

小さいデバイスはデフォルトで大きいデバイスのCSSを継承します

デフォルトでは、タブレットタブに適用されるコードは、電話のディスプレイにも継承されます。 これを思い出させるために、Diviは、タブレットディスプレイに追加されたのと同じコードを使用して、灰色のプレースホルダーコードを入力ボックスに追加します。

電話のディスプレイがタブレットのディスプレイを継承する理由は、バックエンドのタブレットのディスプレイの実際のブレークポイント（メディアクエリ）が「max-width：980px;」に設定されているためです。 これは、電話のディスプレイの幅が980ピクセル未満であるため、タブレットに追加されたコードが電話にも適用されることを意味します。 したがって、電話に別のスタイルを適用する場合は、電話タブの入力ボックスにコードを追加する必要があります。

注：カスタムCSSも電話のディスプレイに追加すると、Diviは、バックエンドのタブレットのメディアクエリを768pxから980px（または最大幅：980pxと最小幅：768px）のより正確な範囲にスマートに変更します。

カスタムCSSがバックエンドに適用されるもの

3つのレスポンシブタブ（デスクトップ、タブレット、電話）すべてにカスタムCSSを追加するとします。

デスクトップでは、ボタンをモジュールの右下に配置します。

タブレットでは、デスクトップコードをオーバーライドし、ボタンをモジュールの全幅に広げるだけです。

電話では、タブレットのCSSを上書きして、表示を通常に戻します。

バックエンドでCSSを調べると、Diviが次のメディアクエリを使用してコードを整理していることがわかります。そのため、次のことを行う必要はありません。

デスクトップ：

@media only screen and (min-width: 981px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

タブレット：

@media only screen and (max-width: 980px) and (min-width: 768px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: block;
}

電話

@media only screen and (max-width: 767px)
.et_pb_cta_0.et_pb_promo.et_pb_promo .et_pb_button.et_pb_promo_button {
    display: inline-block;
}

CSSはDiviにどのように保存されますか？

Diviに組み込まれている速度最適化の一環として、Divi Builder内のすべてのスタイル（カスタムCSSを含む）が結合され、縮小されて静的CSSファイルとして保存され、ページの読み込みが高速化されます。 したがって、子テーマを介してカスタムCSSを追加する必要性を回避したい場合は、サイトの速度を低下させることを心配することなく、組み込みのレスポンシブCSS入力を利用できます。

詳細については、Diviサイトを高速化する方法に関する投稿をご覧ください。

最終的な考え

この投稿が、Diviの組み込みのカスタムCSS入力ボックスを利用してWebサイトに便利なレスポンシブデザインの変更を加える方法を少しよく理解するのに役立つことを願っています。

ほとんどの人にとって、カスタムCSSをデザインに追加するために[詳細設定]タブに移動する必要はありません。 Diviには非常に多くのオプションが組み込まれているため、上級ユーザーでもカスタムCSSを使用する必要はほとんどありません。 ただし、高度なスタイリングが必要な場合は、Diviでの作業がいかに簡単かを知ることが役立ちます。

DiviのカスタムCSS入力についてどのような経験がありますか？