DIVI

【Divi】モバイルでも複数カラム表示を保つ方法

Diviのデフォルト設定ではデスクトップは問題なく複数列で表示されますが、スマホやタブレットでの表示のときに一列ずつ表示されてしまうので見た目が崩れてしまいます。

幅を狭めてもモバイルでのレイアウトが崩れない設定の仕方を説明していきます。

現在、Diviを10%OFFで購入できる特別セール開催中。

Diviが10%OFF 本日のセールはこちら

https://www.elegantthemes.com/discount/today

新規利用の方も、現在年間プランを利用している方も10%OFFでDiviを購入でます。

下に示すように、横並び複数列の表示がモバイルでもできるようになります。

デスクトップで見ている方は、ブラウザの幅を狭めてみると複数列が保持されていることが確認できるので試してみてください。

紹介するコードをコピー&ペーストするだけでできます。

手順は非常に簡単で以下の2ステップです。

① カスタムCSSにコードを追加する

② CSS Classに設定したい列数の名前を入力する

手順について詳しく説明していきます。

①カスタムCSSにコードを追加する

カスタムCSSに以下のコードを追加します。

(WordPressダッシュボード >> Divi >> Generalタブの一番下)

@media only screen and (max-width: 980px){

.two-columns .et_pb_column  {

width:50%!important;

}

}

*赤字の部分は設定する列数によって記述を変える部分です。

② CSS Classに設定したい列数の名前を入力する

モバイルで複数列表示したい列にCSS Classを設定します。

この場合、入力するのは「two-columns」というクラス名で、コードに書かれているものと一致している必要があります。

これで完了です。

モバイル表示にしてみたり、ブラウザの幅を狭めたりしてうまく動作しているか確認してみてください。

3列以上のカラムにしたい場合は先ほどのコードの赤字部分を変更します。

「two-columns」部分の名前を好きに設定して「50%」の部分を設定したい列数に合わせて下記に変更すればOKです。

(100/n)%　n : 設定したい列数

具体的には以下の数値を設定します。

・3列 : 33%

・4列 : 25%

・5列 : 20%

・6列 : 17%

Diviモジュールのカラムが最大6列までの設定なので、この数値分のCSS Classを用意しておけば困ることはないと思います。

実際に使っている設定はこんな感じです。

モバイルでも複数列表示を保つ設定について説明しました。

個人的にはこの設定をしたことでだいぶモバイルデバイスでの見た目がよくなりました。

もっと良いコードあるよ、という方などいましたらお気軽にご連絡ください。