メディア別表示

PCのみ表示したい。スマホの時だけ表示したい。という場面で使えるCSSです。

使用例

PCのみ表示

PCのみ表示します。for-pc

スマホのみ表示

スマホのみ表示します。for-mobile

段落に設定>高度な設定>追加CSSクラスに各クラス名を追加します。

CSS名を入れたら、リストビューで分かるように要素に名前を付けておくと後に分かりやすいです。

CSS

/* 750px以下で有効 */
@media(max-width:750px){
    /* for-pc表示しない */
    .for-pc {
        display:none !important;
    }
}
/* 750px以上で有効 */
@media(min-width:751px) {
    /* for-mobile表示しない */
    .for-mobile {
        display:none !important;
    }
}

テーマ用CSSに上記コードを追加します。

利用上の注意事項

display:none !important;の「!important;」は会った方が良いみたいです。CSSの優先度が上がるみたいで、無い場合は無効になる場合がありました。

実際に試しながら調整してください。

最近の記事

カテゴリー

カレンダー

2025年2月
 12
3456789
10111213141516
17181920212223
2425262728  

タグクラウド

css gutenberg html JavaScript カスタマイズ カラム テーマ プラグイン ページビルダー

Beabo

コンテンツへスキップ