WordPress モバイル版のレイアウトを調整する

Last Updated:2023年07月16日| | 21のコメント

最近出てくるほとんどの WordPress テーマは反応型(Responsive)として、別の修正なしモバイル機器でも最適化されて出てくる場合があります。 モバイル版でのレイアウトを調整することを希望する場合のCSSメディアクエリ(Media Query)を使用して制御することができます。

WordPress モバイル版のレイアウトを調整する方法

ページビルダーを使用するか、ページビルダーを搭載したテーマを使用すると、モバイルとPCバージョンのレイアウトを簡単に作成できます。 詳しくは「WordPress モバイルとPCのレイアウトは異なる作成する方法「を参考にしてください。

例えば、画面(ブラウザウィンドウ)のサイズが500pxより小さいとき、背景色を変えたい場合は、次のようなCSSコードを使用することができます。

// Only applies to mobile device screens whose maximum width is 500px
// 최대 폭이 500px인 모바일 기기 화면에만 적용
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

ここから直接テストすることができます。 上記のコードは、max-width(幅)が500pxである画面(つまり、500pxよりも小さい画面)にのみ適用さという意味になります。

// Only applies to mobile device screens whose minimum width is 768px
@media only screen and (min-width: 768px) {
/* your code */
}

このコードは、min-width(最小幅)が768pxある画面(つまり、768pxより大画面)にのみ適用さという意味です。

ここでiPad、iPhone、スマートフォンなどのモバイル機器に使用可能なメディアクエリが紹介されてますので参考にしてください。

そして、モバイル機器のみ、特定のコードを適用したい場合に WordPressでサポートされてwp_is_mobile()関数を使用することができます。 しかし、wp_is_mobile()を使用すると、スマートフォンだけでなく、タブレットにもモバイル機器で検出し、CSSメディアクエリやプラットフォーム固有のスタイリングを置き換えません。

wp_is_mobile()関数を使用する場合、この関数のバグを修正するプラグインを使用することを考慮してみることができます。

メモ:


21のコメント

コメント

  1. こんにちは情報パッケージ! 違いはなく、新しくオープンしました WordPressモバイル画面ではロードできないエラーが発生しています。
    デスクトップでは正常に接続されますが、モバイルで接続すると、単に白い画面だけが出てレイアウトページが出ません。 解決策がありますか? 投稿をXNUMXつしかしていない状況なのでバックアップをしなければならないのかと思いますが、ㅠㅠ解決策があれば助けてください!

    応答
  2. こんにちは? エリーメンターに基づいてサイトを制作したが、携帯電話では、スレッド内の画像が出ません。
    この現象どのように解決することができますか?

    応答
  3. 私のブログをモバイルでジェトペク的に見れば、最初の画面は大丈夫だ、文を選択して入ると左に集まり、幅が急に狭くなって見えます。
    ジェトペクずサイト全体を見るに入ると、両側のマージンが入り中央に集まり、幅が急に減少んです。
    最初の画面のように正常に見えるようにする方法があるでしょう?

    応答
    • こんにちは?

      最近のテーマは、ほとんど反応型であるため、あえてジェトペクの携帯電話のテーマ機能を使用する必要はないようです。

      JetPackで「携帯電話のテーマ」機能を無効にすることを検討してください。

      応答
      • はい。 ジェトペクモバイルを無効にしても、やはり狭く見えるのは同じです。
        私書いているテーマは、元そうします。 サイト全体の幅はつまら万記事本文部分の幅だけ狭いんです。 どうすれば解決するのか研究みましょう。

      • こんにちは?

        現在、小型画面の場合containerが80%で表示されるように設定されていてそうです。

        @media all and (min-width: 480px) and (max-width: 768px) {
        .single .container {
        width: 100% !important;
        padding-right: 20px !important;
        padding-left: 20px !important;
        }
        }

        @media all and (max-width: 479px) {
        .single .container {
        width: 100% !important;
        padding-right: 10px !important;
        padding-left: 10px !important;
        }
        }

        上記のコードを入れてテストしてみてください?

        padding値は適切に調整してみてください。

      • ありがとうございます。 padding値を5に入れたら解決しました。
        ところが、公知やゲストブック、全体文のようなページの幅は依然として狭く見えます。 応用力がゼロですね。 ㅜ

  4. こんにちは。 私は一般的なコンピュータ(768サイズ以上)のすべてのスクリーンでは、モバイルサイズ(正確に言えばタブレットサイズ)画面を出力したいです。 cssにコマンドだけ入れて、常にモバイル版だけ露出させる方法(下?桁)ができるのかよ? また、いつも有益な情報ありがとうございます。 @media screen and(min-width:512px)and(max-width:2800px){? }

    応答
    • こんにちは?

      PC上でモバイル版が出れば表示に良くないと思います。 そうしなければならない理由がありますか?

      CSSをチェックしてタブレット部分のCSSをチャイルドテーマのstyle.cssに移動させ、breakpointを非常に高く設定すると、なりそうです。

      set the mobile breakpoint super high

      応答
      • こんにちは。 回答ありがとうございます。 個人的な運営計画ですが。 プログラマーではないので、実力が不足して時間もないので…一つに集中しなければならないのですが、ビジネス特性上、PCよりもモバイルがユーザーが2倍以上に調査されています。 ちなみに私と同じ形で進行する会社が http://mefactory.co.kr/m2/index.php? ここでした。 私が作ったページでは決裁団が700未満で壊れてしまいます。 私はモバイル版だけを公開したいと思います...私に教えてくれました。 ありがとうございます。

      • モバイル専用のテーマがあり助けになるかは分からないですね。

        https://1.envato.market/039PM

        リンクされたサイトを確認してみたところbodyの幅を狭く作りましたね。

        一般テーマであってもbodyの幅を調整すると、同様の効果を得ることができないかと考えます。

        仮に Enfold(https://www.thewordcracker.com/go/enfold ) テーマの中でスモール Blog デモがボディ幅が狭い方です。 他のテーマの場合でもサイトバーを飛ばしてボディ幅を狭くすれば似たように作れそうです。

  5. こんにちはㅠ 作業中ですが…ホームページではちゃんとよく見えるのに反応型テーマを書くのにこれが月見よく見えたがモバイルでㅂ反応型が解けたようです…。 ....ハンバーガーメニューが左上にあるのにちょうど真ん中に来ていて問題が多いですね... http://www.thebigstudy.co.kr/ このページです...お願いします...

    応答
  6. こんにちは現在作業中ですが、 pc で見ると問題はありませんが、 tablet や mobile で見ると画面が右に撮影されて出てくるのに何が問題なのでしょうか? the simple themeを使用しました。 今はテスト中ですが、上記の問題は解決されていません。 heida.dothome.co.krで確認可能です。 お忙しいですが、ご意見お願いいたします。 ありがとうございます。

    応答
  7. こんにちは。 ホームページを作ったが、モバイル版で確認すると、問題がありましたよ。

    初めてホームページを入った場合、サムネイルをクリックすると、大きな画像が開かなければする浮かばアング、
    リフレッシュをしなければなら正常に動作しましたよ。
    これはどこに問題があるんですか。
    応答
    • こんにちは?
      まず、ブラウザのキャッシュを消去見問題が表示されることを確認してください。
      それでも問題が発生した場合、プラグインやテーマの作成者に連絡する必要がそうです。
      例えばサムネイルをクリックすると、大きな画像が開かれる機能をlightboxとするんですが、プラグインとして実装した場合、プラグイン自体のバグがあります。 テーマでサポートしている場合も同様であることがあって。

      応答