【Elementor】スマホでも画像ギャラリーを横2つ、3つ並びにする方法

この記事は以下の方を対象にしています。

Elementor Proは不要です。以下、Elementorを使って2つの画像を横並びにしています。

ElementorのCSSサンプルコード

スマホで画像を2つまたは3つに横並びにするには、CSSを修正する必要があります。

以下はスマートフォン（画面幅が600px以下）で画像（ベイシック）ギャラリーの列数を3列に設定するサンプルのCSSコードです。

2列にしたい場合は100% / 2に書き換えてください。

@media screen and (max-width: 600px) {
  .elementor-gallery-item {
    flex-basis: calc(100% / 3) !important;
  }
}

もし、↑コードで動かない場合は以下のコードも試してみてください。2列の場合は33％のところを、50％に書き換えてください。

@media screen and (max-width: 600px) {
  .elementor-widget-image-gallery .elementor-gallery-item {
    width: calc(33% - 10px) !important;
  }
}

このコードを追加するには、WordPressのダッシュボードから「外観」 > 「カスタマイズ」を選択し、「追加 CSS」に移動します。ここに先ほどのCSSコードを貼り付け、「公開」をクリックして変更を保存します。

もし、上手くいかない場合は、コメント欄で質問をしてください。該当URLを書いて頂けるとお答えしやすいです。