Diviの画像スライダーの高さを固定する

Diviのギャラリーモジュールで縦幅に合わせた画像スライダーを作る方法

こんにちは、ナオミです!

昨日こんな質問が自分の運営するサロンで出ました。

ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』

【質問】ギャラリーモジュールのスライダー表示について
ギャラリーに使う画像で、横画像と縦画像を混合させて
レイアウトをスライダーに設定した場合…
縦画像の表示の際に、画面いっぱい表示されて変な感じです。
できたら、横画像の表示の範囲内で、縦画像も表示されたら嬉しいのですが…

どういうことかと言いますと、Diviのギャラリーモジュールのスライダーモードは画像の横幅を固定してますので、縦長の画像が表示されるとページが縦に伸びるんです。

Diviギャラリーモジュールの問題

こんな感じで、横幅が固定されてるため、縦長の画像は大きく表示されてしまいます。

解決方法は画像が横幅ではなく縦幅にあって表示されればいいわけです。

Diviギャラリーモジュールのスライダーが縦幅に合う

どうやったらこのように設定できるのか紹介していきます。

手順

  1. 画像スライダーを作る
  2. CSSの追加
  3. モジュールの設定

1. Diviのギャラリーモジュールで画像スライダーを作る

まずはDiviのモジュールから『ギャラリー』を選び、高さの違う画像を追加していきます

Diviのギャラリーモジュールでスライダー設定1

次にデザインタブのレイアウトに行き、スライダーを選択します。

Diviのギャラリーモジュールでスライダー設定2

この状態ですでにスライダーは完成なのですが、保存して試してみてください。

画像が変わる度に高さが変わってしまいますよね。

これが従来の画像スライダーです。

ではどうやって高さを固定するのか説明します。

2. DiviにCSSを追加

まずはCSSを追加します。

以下のCSSのコードをあなたのサイトに追加してください。

Diviにcssを追加する方法はこちら

.same-height-gallery .et_pb_gallery_items,
.same-height-gallery .et_pb_gallery_item,
.same-height-gallery .et_pb_gallery_image {
  height: inherit;
}

.et_pb_gallery_fullwidth.same-height-gallery .et_pb_gallery_image img {
  width: initial;
  height: initial;
  max-width: 100%;
  max-height: 90%; 
}

.same-height-gallery .et_pb_gallery_item {
  text-align: center;
}

.same-height-gallery .et-pb-controllers {
  margin-bottom: 22px;
}

このCSSに関する細かい説明は『TOFUラボ』でお願いします。

ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』

これで準備完了です。

3. 縦幅に合わせるためのギャラリーモジュールの設定

追加したCSSを使うためにはモジュールの設定が必要です。

Diviのギャラリーモジュールでスライダーの高さを固定する設定1

『ギャラリーの設定 → 詳細 → CSSIDとクラス → CSSクラス』へ行きます。

そこに上の画像のようにsame-height-galleryと入力してください。

モジュールの高さの設定

次に『デザイン → サイズ変換 → 高さ』にいきます。

Diviの画像スライダーの高さの設定

ここで設定する高さが、画像スライダーの高さになります。

タブレットやスマホでのモジュールの幅が変化しますので、それらでも個々に高さを指定することを推奨します。

これで準備完了です。

ビルダーを終了してスライダーをみてみましょう。


Diviギャラリーモジュールのスライダーが縦幅に合う

このようにスライダーの高さが固定されれば、成功です。

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

Diviの最新情報を知りたいなら、このノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

https://tofulab.app/join/

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

それではまた。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通