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

FacebookさえずりredditPinterestのLinkedInのmail

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

ページビルダーを使用したり、ページビルダーが搭載されたテーマを使用すると、簡単にモバイルとPC版のレイアウトを別の方法で作成することができます。 詳細については、「ワードプレスモバイルと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()関数を使用する場合、この関数のバグを修正するプラグインを使用することを考慮してみることができます。

注:

カテゴリー その他


17のコメント

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

    応答
    • こんにちは?

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

      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に入れたら解決しました。
        ところが、公知やゲストブック、全体文のようなページの幅は依然として狭く見えます。 応用力がゼロですね。 ㅜ

  2. こんにちは。 私は一般的なコンピュータ(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 )テーマの中からSmall Blogデモがbodyの幅が狭い方です。 他のテーマの場合でも、サイトバー飛ばしbodyの幅を狭くすると同様に行うことができそうです。

  3. こんにちはㅠ作業中なのに...ホームページでは正常によさそうだ反応型のテーマを書くこれウォルレンよく見せるが、モバイルでㅂ反応型が解かれたようです....ㅠ作業者に尋ねてみると、特定のプラグインの問題だとしてプラグインの削除したのに....ハンバーガーメニューが左上にイトオトた膜の中の、問題が多いですね... http://www.thebigstudy.co.kr/ このページです...お願いします...

    応答
    • こんにちは?

      現在のサイトでフォントを正しくデコードできないエラーが発生してOTS Parsing errorも示されていますね。

      Failed to decode downloaded font: http://www.thebigstudy.co.kr/innofish/webfont/nanumgothic/NanumGothic-Regular.woff2
      (index):1 OTS parsing error:Failed to convert WOFF 2.0 font to SFNT
      (index):1 Failed to decode downloaded font: http://www.thebigstudy.co.kr/innofish/webfont/nanumgothic/NanumGothic-Regular.woff2
      ...
      (index):1 OTS parsing error:GSUB:zero-length table

      よくされた後ならないということは、その間に何の変更/更新/追加/削除などの操作があったことです。 その部分をチェックしてみてください。

      応答
  4. こんにちはㅠ作業に改編してから問題が... thefoxというテーマを使用するウェブでは問題ないのに、モバイル版で反応型が完全に解けハンバーガーメニューもうちにきて、...どちらが問題なのか〓〓続け探しても出なくて苦しい心にコメント書いて見ます...
    http://www.thebigstudy.co.kr です....ㅠ

    応答
  5. こんにちは、現在の作業中なのにpcで見れば問題がないのにtabletやmobileで見ると画面が右にソルリョソ出る何が問題でしょうか? the simple themeを使用したんです。 今ではtest中なのに、上記の問題が解決されていない。 heida.dothome.co.krに確認できます。 忙しいだろうがこうせつお願いいたします。 ありがとうございます。

    応答
    • こんにちは? CSSファイルに次の行を探して修正してください。

      .header_7 .viewport {padding-left:280px;}

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

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

      応答

コメントを残す