WordPress GeneratePress テーマCSSメディアクエリレスポンシブブランチポイント

Last Updated:2024年01月28日| | 10のコメント

デバイスの解像度に応じて異なるスタイルを適用したい場合は、CSSメディアクエリを使用して、デバイスの解像度に応じて異なるCSSスタイルを指定できます。 GeneratePress テーマの基本的なレスポンシブブランチポイントは、モバイルの場合は768ピクセル、デスクトップの場合は1024ピクセル、タブレットは768ピクセルと1024ピクセルの間です。

WordPress GeneratePress テーマCSSメディアクエリレスポンシブブランチポイント

WordPress GeneratePress テーマCSSメディアクエリレスポンシブブランチポイント

基本反応型分岐点

GeneratePress テーマでは、次の@mediaを使用して特定のデバイス解像度のCSSを指定できます。

@media (max-width: 768px) {
    /* CSS in here for mobile only - 모바일 전용 CSS 코드 */
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only - 태블릿 전용 CSS 코드 */
}
@media (min-width: 1025px) {
    /* CSS in here for desktop only - 데스크톱 전용 CSS 코드 */
}

IE10+特定のスタイル

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  /* IE10+ specific styles go here - IE10 이상 브라우저 특정 스타일 */
}

hide-on-* クラスを使用して特定のデバイスで非表示にする

デバイスの解像度に応じて特定のコンテンツを表示/非表示にしたい場合 GeneratePress テーマに組み込まれたクラスを使用すると便利です。

  • モバイルに隠す - モバイルで非表示/表示しない
  • タブレットに隠す - タブレットから隠す
  • デスクトップに隠す - デスクトップから隠す

例:

モバイル端末で特定のメニュー項目を非表示にしたい場合 CSSクラス フィールドに モバイルに隠すを追加できます。 メニュー項目にCSSクラスを指定する方法は、WordPressの特定のメニュー項目に他のCSSスタイルを適用する「を参考にしてください。

PCでのみ特定のコンテンツ 代表したい場合は、次のコードのように モバイルに隠すタブレットに隠す クラスを同時に追加すると、モバイルやタブレットでは表示されず、デスクトップでのみ表示されます。

<div class="hide-on-mobile hide-on-tablet">
    Content here will only display in Desktop - PC에서만 표시될 콘텐츠
</div>

hide-on-* クラスは GeneratePress 文書に記載されていますが、実際に動作するかどうかを確認してください。私はテストしてみるとうまくいきませんでした。

カスタムCSSコードを追加する

カスタムCSSコードは、 ルックス>ユーザー定義>追加CSSに追加するか、チャイルドテーマフォルダ内のスタイルシートファイル(style.cssの)に追加するだけです。

Avada など、一部のテーマでは、独自のテーマオプション内にカスタムCSSコードを配置できるセクションもあります。 GeneratePress テーマは別のオプションを提供しないので、基本的な WordPress 方法に応じてカスタムCSSコードを挿入してください。

CSSの基本は、「ライフコーディング」のような無料のインターネットレッスンで学んだり、市販のCSS関連書籍をXNUMXつ購入してみると便利です。

付録:PCでモバイルメニュー(ハムガーバーメニュー)を表示する方法

PCでもモバイルメニューを表示したい場合 この記事の「PCでモバイル版のように見えるように設定する」セクションを参照してください。

参照


10のコメント

コメント

  1. ただ GeneratePress チャイルドテーマを一つ作ってAny Mobile Theme Switcherプラグインの設定をデスクトップとタブレットに GeneratePress テーマをモバイルに GeneratePress チャイルドテーマを適用しました。

    応答
  2. 現在はAny Mobile Theme Switcherプラグインを使用して、モバイルはアストラテーマに設定しました。

    応答
  3. 以下のCSSコードを使用して GeneratePress テーマ無料版レイアウトをリスト形式にしました。 問題は、モバイルでポートレートモードの場合は画面が奇妙に見えますが、@mediaコードをどのように適用できますか?

    https://issue-note.com/

    /* メインページレイアウトの変更 */
    .wp-post-image {
    表示:インラインブロック;
    幅:250ピクセル。 /*画像の幅*/
    height: 150px; /*画像の高さ*/
    オブジェクトフィット: カバー;
    margin-right: 15px; /* イメージと要約文の間の間隔 */
    フロート:左;
    }.entry-summary {
    オーバーフロー:隠されました;
    width: calc(100% - 265px); /*残り幅の計算*/
    }.post-image:empty {
    表示:なし;
    }.entry-summary {
    margin-left:150px。
    }

    応答
    • 上記のコードをデスクトップ(PC)でのみ表示するようにメディアクエリを追加してください。

      @media (min-width: 1025px) {
      /* 상기 CSS 코드 */
      }

      応答
      • 数値を720pxに調整するので、デスクトップとタブレットでのみ表示になり、モバイルでは横モードの場合のみ表示になって、ちょうど私が望む通りになりましたが、他のデバイスではどのように見えるかわかりませんが、私がした方法が正しいのでしょうか?

      • GPテーマでは、デフォルトで769pxに設定すると、タブレット以上のデバイスに適用されます。

        @media (min-width: 769px) {...}

割引ニュース
アストラテーマで最大40%割引!
期間限定
You This Coupon Code in Checkout
Click the code to Copy