WordPress モバイルとPCのレイアウトは異なる作成する方法

  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

ほとんどのワードプレスのテーマは、反応型であるため、機器の解像度に合わせてサイトのレイアウトが異なります。 デフォルトで表示されるレイアウトを変更して、モバイルとPCのレイアウトを変えることが可能です。

たとえば、デスクトップでのポストが3列ずつ表示され、携帯電話で1列ずつ表示される場合に、モバイルで2列ずつ表示されるようにしたいと思うことができます。 または、PCとモバイルの他のサイズの画像を使用する必要がしたり、特定の要素をPC上でのみ表示して、小型機器では表示されないようにする必要があります。

ページビルダー(例えば、 エレメント・ページ・ビルダー)を使用したり、ページビルダーが基本搭載されたワードプレスのテーマ(ああ、海, 円フォールド, ディビ など)を使用している場合は、ほとんどのページビルダーで、モバイルとPCでのレイアウトを別の方法で設定するオプションが提供されます。

ページビルダーを使用していない場合には、CSSメディアクエリを使用して機器の解像度に応じてレイアウトを別の方法で設定する方法を講じています。

CSSメディアクエリを使用して、モバイルとPCのレイアウトは異なる設定

ページビルダーを使用していない場合、CSSメディアクエリを使用して、モバイル機器、タブレット機器、デスクトップでのレイアウトが異なって表示されるようすることができます。 この方法を利用する場合は、CSSについて少し知っている必要があります。 CSSメディアクエリには、次のW3Schoolsの資料を参照してみてください。

たとえば、カラム(列)を大きな機器の解像度では、4個、中間機器の解像度では、2個、小型機器の解像度では、1つの表示したい場合は、W3Schoolsの例のように、次のようなCSSコードをアプリケーションみることができます。

/* Create four equal columns that floats next to each other */
/* 서로 붙어 있는 동일 크기의 4개 열 생성 */
.column {
  float: left;
  width: 25%;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
/* 992px 이하 해상도 스크린에서는 4개 열에서 2개 열로 바뀜 */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
/* 600px 이하 해상도의 스크린에서는 1개 열로 표시됨 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ああ、海のテーマでは、モバイル機器とPCのレイアウトを別の方法で設定する

ベストセラーのテーマである ああ海(Avada)テーマはFusion Builderと呼ばれる独自のページビルダーを使用しています。 ワードプレスでは、さまざまなページビルダーが、基本的な使い方は似ています。 Fusion Builderでの要素を追加した後で、その要素を機器別に表示するかどうかを設定することができます。

Fusion Builderバックエンドビルダー(既存のエディタ)は、 General> Element Visibility / Column Visibility / Container VisibilitySmall Screen(小画面)、Medium Screen(中間画面)、Large Screen(大画面)について、そのコンテナ(Container)やカラム(Column)または要素(Element)を表示するかどうかを設定することができます。

ワードプレスああ海のテーマFusion BuilderでのモバイルとPCのレイアウトは異なる設定

視覚ビルダーであるFusion Builder Liveを使用している場合でも、同様に[General]タブの下で、Visibilityオプションを設定することができます。

アバターテーマのElement Visibilityオプション - このエレメントを機器の画面サイズに応じて表示または非表示にすることができる。

もしPC用の画像とモバイル用の画像を別の方法で作成設定したい場合XNUMXつの要素を作成一つは、PC上でのみ表示されるようにし、他の一つは、モバイルデバイスでのみ表示されるように設定することができます。

ニュースペーパーのテーマでは、モバイル機器とPCのレイアウトは異なる設定

ニュースペーパーI(Newspaper)は、ブログ、雑誌、ニュースサイトを運営するのに適したマガジンの要素を様々な提供しています。 ニュースサイトでカテゴリ別に記事を一覧表示する場合が多いが、 Newspaper テーマを利用すると便利です。

ニュースペーパーはtagDiv Composerというページビルダーが標準搭載されています。 特にニュースペーパーは、機器のサイズごとにレイアウトを非常に細かく調整することができます。 例えば、PCでは3列の6つのポストを表示するようにして、モバイル機器では、1列3つのポストを表示するように設定が可能です。

ワードプレスマガジンのテーマニュースペーパーのモバイル版とPC版のレイアウトは異なる設定

そのブロック(Block)をクリックして、機器のサイズのアイコンをそれぞれクリックして、レイアウトを必要に応じて指定することができます。

Diviテーマで、モバイルとPCのレイアウトは異なる設定

人気多目的ワードプレスのテーマである ディビでDivi Builderが搭載されています。 Diviビルダーでも、他のページビルダーと同様の機能を提供します。

Diviビルダーでは、RowやModuleの設定]ウィンドウで、 Advanced> Visibility オプションを使用してPhone(スマートフォン)、Tablet(タブレット)、Desktop(デスクトップ)に対して無効にするかどうかを指定することができます。

DiviテーマのVisibilityオプション - スマートフォン、タブレット、デスクトップに応じて、その要素を有効または無効にすることができる。

上の図でPhoneを選択すると、そのモジュールは、モバイル機器で表示されません。 同様に機器ごとに画像のサイズを異に作成して表示したい場合は、画像モジュールを二つを作って、モバイルとデスクトップに対してそれぞれ設定することができます。

Elementorページビルダーで機器サイズごとにレイアウトを別の方法で設定する

エレメント・ページ・ビルダー(エレメンページビルダー)は、現在、400万人以上のサイトに設置されて使用されるほどの人気を得ている無料ページビルダープラグインです。 Elementorも機器サイズ別に特定の要素(エレメント)やカラム、セクションを表示したり、非表示にするオプションを提供しています。

Elementorページビルダーの反応型(Responsive)オプションの設定 - 機器サイズに応じて、エレメントを非表示にすることができる。

左の Advanced> Responsiveで、デスクトップ、タブレット、モバイルに対して表示するかどうかを選択することができます。 次のXNUMXつのオプションの中から選択することができます。

  • Hide On Desktop - 選択すると、デスクトップに表示されません。
  • Hide On Tablet - このオプションを選択すると、タブレット端末で表示されません。
  • Hide On Mobile - モバイル機器で表示されません。

テーマやプラグインで機器サイズに応じて表示したり、非表示にするオプションが提供されている場合は、そのオプション名のVisibilityまたはResponsive単語が含まれている場合があります。

おわりに

以上で、PCとモバイル機器でのレイアウトを別の方法で作成する方法について説明しました。 ページビルダーを使用している場合は、比較的簡単にモバイルとPCでのレイアウトが異なることがあります。

ページビルダーが使用されないか、ページビルダーが使用されてもビルダーの機能に所望の効果を得ることができない場合には、CSSメディアクエリを使用して、画面の解像度に応じてレイアウトを別の方法で変更できます。

注:



3のコメント

  1. こんにちは現在pexeto storyテーマを使用中なのに

    700px以下の携帯電話から2列に見えるようにしたくて
    @media screen and(max-width:700px){
    .column {
    幅:50%;
    }
    }
    Cssを追加したが、最初から未反応です〓〓
    他のcssを追加みても適用されていないことで見てテーマ自体がcssを非対応なように助けてください。クラスのハプニド

    応答
    • Pexeto Storyテーマは有料 WordPress テーマですね。

      お知らせいただいた情報だけでは確認することはできない点ご了承ください。

      !importantを追加してください。

      ( https://www.codingfactory.net/10372 文を参照してください。)

      応答
  2. モバイルで2列に見えるようにしたくて
    @media screen and(max-width:700px){
    .column {
    幅:50%;
    }
    }

    でテーマにcssを追加したが、反応がまったくありません。
    JavaScriptに帰属していてそんなことだ、このような場合は、方法はないでしょうか?..

    応答