異なるブレークポイントでのDiviギャラリーモジュールの列数の変更

公開: 2019-02-23

Divi Gallery Moduleを使用すると、レスポンシブグリッドレイアウトで美しい画像ギャラリーを作成できます。ギャラリーは、画像のサイズを拡大縮小し、さまざまなブラウザの幅に応じてグリッドの列数を調整するため、応答性が高いと見なされます。

デフォルトでは、ギャラリーモジュールには、グリッド内の列数を調整する3つのブレークポイント（特定のブラウザー幅でスタイルが変更されるポイント）があります。画像ギャラリーはデスクトップでは4列で表示され、タブレットでは3列、小型タブレット（および大型電話）では2列、電話では1列に分割されます。

このデフォルト設定は通常ほとんどの場合に機能しますが、特定のブラウザ幅で表示される列の数をより細かく制御する必要がある場合もあります。そのため、このチュートリアルでは、デスクトップだけでなく、3つの追加のブラウザーブレークポイントについても、Divi GalleryModuleに表示される列の数を完了する方法を示します。

スニークピーク

これは、このチュートリアルで構築するものの概要です。ブラウザの幅が異なれば、画像ギャラリーの列数も異なることに注意してください。

デザイン要素の準備

私たちのYoutubeチャンネルを購読する

このチュートリアルでは、Diviテーマがインストールされてアクティブになっている必要があります。また、画像ギャラリーの構築に使用するには、メディアライブラリに12枚の画像を追加する必要があります。グリッドレイアウトを使用するDiviギャラリーモジュールの場合、ほとんどのデスクトップで画面全体に表示されるように画像をライトボックスディスプレイで開く場合は、画像のサイズを約1500px x800pxにする必要があります。

DiviGalleryモジュールのカスタム間隔の実装

新しいページの設定

手始めに、新しいページを作成し、ページにタイトルを付けて、DiviBuilderをデプロイします。「最初から作成」オプションを選択して、ページを公開します。次に、クリックしてフロントエンドでビルドします。

画像ギャラリーの作成

Divi Builderをデプロイしたら、先に進んで1列の行を持つ新しい通常のセクションを作成し、その行にDivi GalleryModuleを追加します。

Diviは、次のようなグリッド表示でメディアギャラリーからのいくつかの画像をギャラリーモジュールに入力します。

ギャラリーモジュールの設定で、灰色のプラスアイコンをクリックして、ギャラリーに12枚の画像を追加します。

次に、Divi GalleryModuleの設定を次のように更新します。

画像番号：12
タイトルとキャプションを表示：いいえ
ページ付けを表示：いいえ

行設定を調整して、ガター幅のない全幅ギャラリーを作成します

新しい列構造が機能するために必要な主なことは、ギャラリー内の画像間に存在するデフォルトの間隔/マージンを取り除くことです。これを行うには、ガター幅を1に設定するだけです。また、オプションとして、画像ギャラリーをブラウザーの全幅に広げるために、行を全幅にすることができます。これを行うには、行設定を開き、以下を更新します。

この行を全幅にする：はい
側溝幅：1

ギャラリー内の画像間に間隔を追加する場合は、ガター幅を1に設定する必要があるため、この方法を使用することをお勧めします。

ギャラリーがデフォルトでさまざまなブラウザ幅にどのように応答するか

前述のように、デフォルトでは、Diviギャラリーモジュールは画像ギャラリーをデスクトップの4列に表示し、タブレットでは3列、小型タブレット（および大型電話）では2列、電話では1列に分割します。

ただし、これを変更して、カスタムCSSのいくつかのスニペットを使用して、特定のブレークポイントにカスタム数の列を含めるようにします。

すべてのブラウザサイズに特定の列数を設定する

ギャラリーに表示される列の数を変更して、すべてのブラウザーサイズで列の数が同じになるようにする場合は、これを行う簡単な方法があります。これは、ギャラリーを1列、2列、または3列でのみ表示する場合に役立つことがあります。そうすれば、列番号を同じに保ちながら、デスクトップに非常に大きな画像を、モバイルに小さな画像を表示できます。画像が電話で表示するには小さすぎるため、4つ以上の列があると機能しない可能性があります。

すべてのブラウザサイズで3つの列を表示するとします。これを行うには、Diviギャラリーモジュール設定を開き、次のカスタムCSSをギャラリーアイテムに追加します。

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

これで、ギャラリーはすべてのブラウザサイズで3列の構造を保持します。

すべてのブラウザサイズに2列のレイアウトが必要な場合は、widthプロパティの値を50％に変更するだけです。

1列のレイアウトが必要な場合は、幅を100％に更新するだけです。

それでおしまい。

ただし、特定のブレークポイントで列数をより細かく制御したい場合は、読み進めてください。

特定のブレークポイントの列数の変更

ブラウザが特定のブレークポイントに達したときに表示される列の数を完全に制御したい場合は、特定のブラウザ幅を対象とするメディアクエリでCSSのスニペットをいくつか使用できます。

CSSクラスをDiviGalleryモジュールに追加します

カスタムCSSを追加する前に、まずギャラリーモジュールにカスタムCSSクラスを指定して、CSSでその特定のクラスを参照できるようにする必要があります。これにより、cssがこの特定のギャラリーモジュールにのみ適用されるようになります。これを行うには、ギャラリーモジュールの設定を開き、[詳細設定]タブに次のCSSクラスを追加します。

CSSクラス：col-width

この記事の前のセクションでギャラリーアイテムに追加したカスタムCSSを追加した場合は、忘れずに削除してください。

その後、設定を保存します。

カスタムCSSをページ設定に追加する

CSSクラスを配置したら、カスタムCSSを追加する準備が整います。ページの下部にあるページ設定バーの歯車アイコンをクリックして、ページ設定を開きます（または、キーボードショートカット「o」を使用できます）。

次に、[詳細設定]タブの下に次のカスタムCSSを追加します。

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}