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年以上 WordPress 情報パッケージのブログを運営している。 Naver カフェ Admin

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) {...}

カカオトーク相談 カトクサービス相談