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

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

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でモバイル版のように見えるように設定する」セクションを参照してください。

参照

• WordPress Diviテーマ：フルサイトフロントエンド編集機能の導入
• GeneratePress テーマ設定の例
• Avada テーマのCSSメディアクエリ分岐点（デバイス別解像度）