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の優先度が上がるみたいで、無い場合は無効になる場合がありました。
実際に試しながら調整してください。