DIVI – DESIGN

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

INTRODUCTION

Diviを使っていて、画像やアイコンなどを横に並べたい時ありますよね。

例えば、こんな感じで。

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

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

CONTENTS

>> 複数カラムにする設定と手順

>> まとめ

>> デザイン関連記事

*目次をタップで各コンテンツに飛べます

MULTI COLUMNS ON MOBILE

複数カラムにする設定と手順

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

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

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

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

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

2列表示にしたい場合

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

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

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

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

.two-columns .et_pb_column  {

width:50%!important;

}

}

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

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

モバイルで複数列表示したい列に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を用意しておけば困ることはないと思います。

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

 カスタムCSSの記述

MATOME

まとめ

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

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

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

【神機能】Webサイト制作を10倍楽にするDIVIの使い方5選

作業効率を大きくあげるDiviのおすすめ機能を紹介しています。

【超簡単】5分でできるDIVIのインストールとセットアップの仕方

Diviの購入からWordpressでのセットアップの仕方までを画像付きでわかりやすく説明しています。

More of DESIGN

デザイン関連記事

デザイン関連の記事をピックアップして紹介します。

併せて読んでみてください。

【2020年版】定番ストックフォト6選を比較検証。おすすめはどれ?

定番のストックフォトを項目別に比較しています。

【初心者も簡単】YouTubeの再生回数を上げるサムネイルの作り方。

サムネイルの作成方法を解説しています。

【動画編集】Premiere ProとAfter Effectsの違い。初心者が知っておきたい6つの特徴について解説。

動画編集で使うPremiere ProとAfter Effectsの違いについて説明しています。

【動画編集】Premiere「Rush」と「Pro」8つの違いと使い方を解説。

Adobeの動画編集アプリPremiere RushとProの違いについて説明しています。

IllustratorとPhotoshopの違いを12の実例で比較。安く使えるセットプランも紹介。

IllustratorとPhotoshopの違いについて説明しています。

【超便利】Adobe Stockとは? 初月無料&利用する5つのメリットを解説。

Adobe Stockを利用するメリットについて書いています。

【2020年版】Adobeのおすすめプランは?7の職業・デザイン別にコンプリートプランユーザーが解説。

Adobeを始める人にどのソフトとプランを使うべきかを書いています。

【無料・有料8選】おすすめフリー素材・画像イラストストックサイト【商用利用可】

無料から有料までオススメの画像サイトをまとめました。

【特典】2ヶ月間無料でAdobe CC・Stockのプランを利用する方法。これから始める方も。

利用しているプランを2ヶ月間無料にする方法について書いています。

【特典】Adobeのプランを2ヶ月無料で利用する方法

既存ユーザーも新規ユーザーも2ヶ月無料でCC/Stockを利用する方法についてです。

【商用利用可】おすすめフリー素材・画像サイト

商用利用もできるフリー素材を入手できるおすすめサイトを紹介しています。

Adobe Photoshopでできる10のこと

Photoshopでできるデザインや機能について解説しています。

【UI/UX】Adobe XDでできる6のこと

Adobe XDでできるデザインや機能について解説しています。

【3D】Adobe Dimensionでできる9のこと

Dimensionでできるデザインや機能について解説しています。

Pin It on Pinterest

Share This