デバイスの解像度に応じて異なるスタイルを適用したい場合は、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>
カスタムCSSコードを追加する
カスタムCSSコードは、 ルックス>ユーザー定義>追加CSSに追加するか、チャイルドテーマフォルダ内のスタイルシートファイル(style.cssの)に追加するだけです。
Avada など、一部のテーマでは、独自のテーマオプション内にカスタムCSSコードを配置できるセクションもあります。 GeneratePress テーマは別のオプションを提供しないので、基本的な WordPress 方法に応じてカスタムCSSコードを挿入してください。
CSSの基本的なことは、「ライフコーディング」などの無料のインターネットレッスンで学ぶことができます。
コメントを残す