Diviのギャラリーモジュールで縦幅に合わせた画像スライダーを作る方法
こんにちは、ナオミです！
昨日こんな質問が自分の運営するサロンで出ました。
ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』
【質問】ギャラリーモジュールのスライダー表示について
ギャラリーに使う画像で、横画像と縦画像を混合させて
レイアウトをスライダーに設定した場合…
縦画像の表示の際に、画面いっぱい表示されて変な感じです。
できたら、横画像の表示の範囲内で、縦画像も表示されたら嬉しいのですが…
どういうことかと言いますと、Diviのギャラリーモジュールのスライダーモードは画像の横幅を固定してますので、縦長の画像が表示されるとページが縦に伸びるんです。
こんな感じで、横幅が固定されてるため、縦長の画像は大きく表示されてしまいます。
解決方法は画像が横幅ではなく縦幅にあって表示されればいいわけです。
どうやったらこのように設定できるのか紹介していきます。
手順
- 画像スライダーを作る
- CSSの追加
- モジュールの設定
1. Diviのギャラリーモジュールで画像スライダーを作る
まずはDiviのモジュールから『ギャラリー』を選び、高さの違う画像を追加していきます
次にデザインタブのレイアウトに行き、スライダーを選択します。
この状態ですでにスライダーは完成なのですが、保存して試してみてください。
画像が変わる度に高さが変わってしまいますよね。
これが従来の画像スライダーです。
ではどうやって高さを固定するのか説明します。
2. DiviにCSSを追加
まずはCSSを追加します。
以下の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を使うためにはモジュールの設定が必要です。
『ギャラリーの設定 → 詳細 → CSSIDとクラス → CSSクラス』へ行きます。
そこに上の画像のようにsame-height-galleryと入力してください。
モジュールの高さの設定
次に『デザイン → サイズ変換 → 高さ』にいきます。
ここで設定する高さが、画像スライダーの高さになります。
タブレットやスマホでのモジュールの幅が変化しますので、それらでも個々に高さを指定することを推奨します。
これで準備完了です。
ビルダーを終了してスライダーをみてみましょう。
このようにスライダーの高さが固定されれば、成功です。
Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。
Diviの最新情報を知りたいなら、このノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか？
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。
最新情報だけではなく技術的な質問も飛び交っています。
また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。
『TOFUラボ』の紹介はこちらです
興味があれば、是非参加してくださいね。
入会してから７日間は無料で合わないなと思えばいつでもキャンセル可能です。
それではまた。
