モバイルデバイスでDiviの列の積み重ね順序を調整する方法

公開: 2017-05-05

Diviは、デスクトップからモバイルディスプレイに移行するときに、特定の方法で列をスタック（または順序付け）するレスポンシブグリッド上に構築されています。列は左から右の順に積み重ねられます。したがって、デスクトップに3つの列がある場合、左側（最初）の列が最初にモバイルでスタックされ、次に列2と3がその下にスタックされます。これは理にかなっており、通常、ほとんどのWebサイトに必要なものです。ただし、デスクトップで見栄えのする特定のデザインが、モバイルでのコンテンツの順序に一貫性を持たない場合があります。この場合、モバイルでより一貫性のあるユーザーエクスペリエンスを作成するには、列の順序を変更する必要があります。

今日は、モバイルデバイスでDiviの列のスタック順序を変更する2つの方法を紹介します。 1つ目は、Divi内の「無効にする」機能を使用して、モバイルデバイス専用のコンテンツの代替バージョンを作成することです。 2番目の方法は、カスタムCSSを使用して、モバイルでの順序を指定するクラスを列に追加することです。

始めましょう！

コンテンツの作成

私たちのYoutubeチャンネルを購読する

新しいページで、クリックしてDivi Builderを使用し、VisualBuilderを起動します。

ビジュアルビルダーから、2列（1/2 – 1/2）のレイアウトを選択します。

行内の最初の列に画像モジュールを追加します。

[画像の設定]で、画像をアップロードして挿入します。（unsplash.comの770 x 433の画像を使用しています）

次に、行の2番目の列にテキストモジュールを挿入します。

[一般的なテキスト設定]で、テキストを[コンテンツ]テキストボックスに追加します。

保存する

これで、2列の1行ができ、最初の行には画像が含まれ、2番目の行にはテキストが含まれます。次の画像の列にラベルを付けました。

ビジュアルビルダーから、重複行アイコンをクリックして、同じ2列の行を複製します。

2番目の行（作成したばかりの複製行）で、画像モジュールを2番目の列にドラッグし、テキストモジュールを最初の列にドラッグします。

このように各行の画像とテキストの位置を交互に変更することは、Webページにコンテンツを表示するための創造的で効果的な方法である可能性があります。ただし、モバイルで列がスタックする場合にも問題が発生します。ブラウザの幅を980px幅（モバイルデバイスのブレークポイント）未満に縮小すると、各行のコンテンツは左から右にスタックします。これは、行の最初の列が2番目の列の上にスタックすることを意味します。これは、モバイルデバイスでコンテンツのフローの一貫性を維持したい場合に問題を引き起こす可能性があります。現在のレイアウトでは、モバイル上のコンテンツのフローは次の順序でスタックされます。

列1（画像）
列2（テキスト）
列1（テキスト）
列2（画像）

モバイル向けのより良いレイアウトは、コンテンツのより一貫したレイアウトが得られるように、行の1つで列のスタック順序を変更することです。

モバイルで列の積み重ね順序を変更する2つの方法

1：Diviの「無効化」機能を使用したモバイルでの列の積み重ね順序の変更

Diviの「無効にする」機能を使用すると、電話、タブレット、およびデスクトップディスプレイでさまざまなバージョンのコンテンツを作成できます。数回クリックするだけで、任意のデバイスでコンテンツのセクションを表示または非表示にすることができます。

この例では、2番目の行をデスクトップでは表示したまま、モバイルデバイスでは非表示にする必要があります。次に、モバイルでのみ表示されるように、2番目の行の別のバージョンを作成する必要があります。

Visual Builderを使用して、2番目の行を複製します。

複製された新しい行を編集する前に、2番目の行の[行設定]を開きます。

[一般的な行の設定]で、電話とタブレットの行を無効にする場合にオンにします。

保存する

これで、2番目の行がモバイルデバイスで非表示になります。次に、新しい3行目のレイアウトを、モバイルでの列の順序に変更する必要があります。

テキストモジュールのコンテンツを2番目の列にドラッグし、画像モジュールを最初の列にドラッグします。

次に、3番目の行の[一般的な行の設定]に移動し、チェックボックスをオンにしてデスクトップの行を無効にします。

保存する

今、あなたの結果をチェックしてください。 3番目の列はデスクトップでは無効になっていて、モバイルデバイスでは有効になっていることがわかります。これにより、モバイルでより一貫性のあるレイアウトが作成されます。

それでおしまい！

コンテンツの特定のセクションを無効または有効にするこの機能を使用すると、任意のタイプのレイアウトを簡単に変更/並べ替えることができます。

また、Visual Builderからページを表示する場合、Diviはページに非表示になっているコンテンツをフェードアウトするので、無効になっているコンテンツを識別できます。

「無効化」機能を使用して列と行を非表示にするのは安全な方法です。ただし、これをやりすぎたり、コンテンツが多すぎたりすると、ページの編集が混乱する可能性があります。また、コンテンツを更新する場合は、1つだけでなく、すべてのバージョンのコンテンツを更新する必要があります。

コンテンツの無効化と有効化が適切な解決策ではない場合は、CSSクラスを使用してモバイルでコンテンツを注文する別の方法があります。

2.CSSクラスを使用したモバイルでの列のスタック順序の変更

これを行うには、カスタムCSSを使用して、モバイルディスプレイで必要に応じて列を並べ替えるクラスを列に追加できるようにします。

次に、ワードプレスのダッシュボードから、Divi→テーマカスタマイザー→追加のCSSに移動し、次のCSSを追加します。

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.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;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

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

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

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}

保存して公開

追加したCSSを見ると、すべてのCSSに、モバイルデバイス（画面サイズが980px未満）のcssのみを使用するメディアクエリが含まれていることがわかります。
また、「カスタム行」と呼ばれる最初のクラスにも気付くでしょう。このクラスは、モバイルで列のスタック順序を変更する行に追加されます。

次の4つのクラス（「first-on-mobile」、「second-on-mobile」、「third-on-mobile」、「fourth-on-mobile」）には、orderプロパティと数値が割り当てられています。これらのクラスは、「カスタム」行内の列に追加され、モバイルで表示する順序を指定します。

CSSが配置されたので、これらのクラスをページに適用しましょう。

指示に従って、2つの行が作成されていることを確認してください。また、モバイルまたはデスクトップで無効になっている行がないことを確認してください。

この例では、モバイルの2行目の列の順序を変更します。これが私たちが達成したいことの実例です。

Visual Builderを使用して、2番目の行の行設定を開きます。

[行の設定]の[CSS]タブで、次を追加します。

CSSクラステキストボックスに「custom_row」を追加します。（行をフレックスボックスでラップします）

「second-on-mobile」を列1のCSSクラステキストボックスに追加します（これにより、列1の順序が変更され、モバイルで2番目に表示されます。クラス名を使用すると、覚えやすくなります）。

「first-on-mobile」を列2のCSSクラステキストボックスに追加します（これにより、列2の順序が変更され、モバイルで最初に表示されます）。

注：各列に順序付けクラスを追加することが重要です。

それでは、結果を確認してみましょう。モバイルでは、2番目の行の列が最初の行と同じように表示されるように変更されていることに注意してください。これにより、画像→テキスト→画像→テキストの一貫したフローが作成されます。

CSSクラスを使用した任意のレイアウトの列スタック順序の変更

これと同じ方法を使用して、任意の列レイアウトの順序を変更できます。カスタムCSSを使用すると、1番目、2番目、3番目、および4番目の配置値を追加できることに注意してください。たとえば、次のように4分の1、2分の1、4分の1のレイアウトの順序を変更する場合：

以前と同じ手順に従ってください。行設定の[CSS]タブで、クラス「custom_row」を行に追加し、注文クラス（「first-on-mobile」、「second-on-mobile」、「third-on-mobile」）を追加します。各列に。各列にクラスを追加して、すべての列が指定された順序値を持つようにすることを忘れないでください。

それでおしまい！

推奨される方法

デバイスごとに異なるレイアウトを作成する必要がある場合、および/またはモバイルでの列の順序に加えてコンテンツを変更することを計画している場合は、Diviの「無効」機能を使用してレイアウトをカスタマイズする必要があります。

コンテンツを変更せずにモバイルで列を並べ替えるだけでよく、コンテンツの複数の無効/有効バージョンをジャグリングする必要がない場合は、CSSメソッドを利用できます。

SEOに関する考慮事項

検索エンジンがページ上で無効化または非表示になっているコンテンツをどのように処理するかについては、長年にわたって多くの議論がありました。特定のデバイスのコンテンツを非表示にすることができますが、コンテンツは引き続きGoogleによってクロール可能です。これは重複コンテンツと見なされる可能性があり、「無効にする」機能を使用するとページランクに悪影響が及ぶ可能性があります。ただし、Googleのような検索エンジンは、レスポンシブレイアウトの理由でコンテンツが非表示になっているかどうかを識別するのに非常に優れています。つまり、Googleは、ユーザーがさまざまなデバイスのコンテンツを複製しているかどうかを認識しており、ペナルティを課すことはありません。悪意のある理由でコンテンツを非表示にしない限り、安全に使用できます。

最終的な考え

列のスタック順序を変更できることは非常に便利であり、場合によっては必要になります。モバイルでのコンテンツフローの一貫性を損なうことなく、デスクトップディスプレイ用の独自のデザインレイアウトを作成する機能が必要です。 Diviの「無効にする」機能を使用すると、デバイスごとにまったく異なるレイアウトを作成できます。また、数行のカスタムCSSを使用すると、行と列にクラスを簡単に追加して、モバイルデバイスに合わせて並べ替えることができます。

この投稿が、モバイルディスプレイをより細かく制御するのに役立つことを願っています。

コメントでお返事をお待ちしております。

乾杯！