Divi、スマホの画面で列をスワップする方法

Diviでスマホ上で列を自由に並びかえる方法

こんにちは、ナオミです。
こんな感じで、交互に色を変えたりするデザインをたまに見ますよね。

diviでスマホの列をコントロールする

このデザインはDiviで簡単に作成できます。

デスクトップではこんな感じに見えますが、スマホでみたらどうなるでしょう?

diviでスマホの列をコントロールするスマホ画面

あれれ、これはちょっと予想と違いますし見にくいです。
黄黒黄黒と順番を変えて表示させたいですよね。

そんな問題を解決すべく、この記事では、どうやってスマホ上で表示される列の並びを自由に替えるのかを説明します。

Diviでスマホ上で列を自由に並びかえる方法を動画でご覧になりたい方はこちらからどうぞ!

WordPressにCSSを追加

@media all and (max-width: 980px) {
  /*** Flexboxを使う ***/
  .custom-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
  }

  /*** カスタムCSSクラスで、デスクトップ以外の列のオーダーを決定 ***/
  .mobile-order-1 {
    -webkit-order: 1;
    order: 1;
  }

  .mobile-order-2 {
    -webkit-order: 2;
    order: 2;
  }

  .mobile-order-3 {
    -webkit-order: 3;
    order: 3;
  }

  .mobile-order-4 {
    -webkit-order: 4;
    order: 4;
  }
  /*** 最後の列にマージンを追加 ***/
  .custom-row:last-child .et_pb_column:last-child {
    margin-bottom: 30px;
  }
}

このコードをあなたのWordPressに追加してください。
細かい説明は省きますが、列を全てflex boxでコントロールするためのCSSです。

詳しく知りたい方はこの記事からどうぞ。
【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。

Diviにcssを追加する方法はこちらの記事で解説していますので、わからない方はまずはこちらの記事をご覧ください。

DiviでカスタムCSSを追加する4つの方法

行にクラスを追加

Diviでスマホで列をスワップ

列をスワップしたい(並べ替えたい)方の行の設定を開きます。
そして、その行自体に『custom-row』のクラスを追加します。
次に、上に来て欲しい方に『mobile-order-1』その下に来て欲しい列に『mobile-order-2』を追加します。

これで二つの列がスワップします。
デスクトップビューに戻しても、レイアウトは崩れていません。

もし上手くいかない場合はこの動画を見てみてください。

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

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

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

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

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

https://tofulab.app/join/

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

質問があればなんでもどうぞ。

Naomi Suzuki

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

目次

「Diviでスマホ上で列を自由に並びかえる方法」への2件のフィードバック

  1. 「そして、その行自体に『cutom-row』のクラスを追加」の記述は
    『cutom-row』ではなくて【custom-row】が正解ですね。

    1. その通りです。直しました。ありがとうございます!
      何故かコメントがスパムに行っていまして、気づきませんでした。
      申し訳ありません。

コメントする

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

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

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

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