＼3分でわかる！ferret One／
PCとスマートフォンでパーツを分ける方法
完成パーツ
【PCでの表示】
【スマートフォンでの表示】
設定するCSS
下記CSSはサンプルであり、お客様のサイトに正しく反映されるかについては検証しておりません。
またCSSの詳細についてはサポート対象外となるため、CSSが動作しないといったお問い合わせについてはご遠慮下さい。
またCSSの詳細についてはサポート対象外となるため、CSSが動作しないといったお問い合わせについてはご遠慮下さい。
//変数
@mixin breakpoint-pc {
@media screen and (min-width: 769px) {
@content;
}
}
@mixin breakpoint-sp {
@media screen and (max-width: 769px) {
@content;
}
}
@mixin breakpoint-tb {
@media screen and (min-width: 600px) and (max-width: 769px) {
@content;
}
}
@mixin edit-page {
.frame-root .frame-content {
@content;
}
}
//PCとスマートフォンでパーツを分ける
.spOnly {
@include breakpoint-pc {
display: none !important;
}
}
.pcOnly {
@include breakpoint-sp {
display: none !important;
}
}
@include edit-page {
.spOnly {
display: block !important;
}
}
@mixin breakpoint-pc {
@media screen and (min-width: 769px) {
@content;
}
}
@mixin breakpoint-sp {
@media screen and (max-width: 769px) {
@content;
}
}
@mixin breakpoint-tb {
@media screen and (min-width: 600px) and (max-width: 769px) {
@content;
}
}
@mixin edit-page {
.frame-root .frame-content {
@content;
}
}
//PCとスマートフォンでパーツを分ける
.spOnly {
@include breakpoint-pc {
display: none !important;
}
}
.pcOnly {
@include breakpoint-sp {
display: none !important;
}
}
@include edit-page {
.spOnly {
display: block !important;
}
}
設定方法
PCで表示させたい行の「行・カラムの編集」のカスタマイズからclass名に
「pcOnly」を設定します
スマートフォンで表示させたい行の「行・カラムの編集」のカスタマイズからclass名に
「spOnly」を設定します
ページのCSSに貼り付けて保存します
下書き保存、または更新して完成です
