#フレックスエディタ #カスタマイズ

フレックスエディタでPCとSPの出し分けを簡単に設定！

2026/06/08

こんにちは！

サポートチームの杉村です。

フレックスエディタでカスタムイベントを発生させる便利な機能をご紹介したこちらのコラムに続き「フレックスエディタってこんな使い方もできるんだ！」の第二弾です。

今日はチャットのお問い合わせでもよくある「PCとSPでクリエイティブを変えたい」についてご紹介します！

エンドユーザーがSPかPCかによって、接客サービスの画像を違うものにしたいのですが可能ですか？

アクション編集画面のGUI上で対応するのは難しいので、接客サービスをPC用とSP用で2つ作成する必要があります。

参考：PCとSPに接客サービスを出し分ける方法
https://support.karte.io/post/3bPzG3WyI4QOcNqqQPj25Z

もしくはメディアクエリを使って頑張ってカスタマイズをする必要がありました。

ざっくり説明すると、PC用とSP用のレイアウトを作成し、あとはそれぞれのレイアウトに対してCSSカスタマイズで表示/非表示の指示をします。
メディアクエリの使用は必要ですが、簡単なステップで設定ができます！

今回は、フレックスエディタ対応の「 Banner 02 」を使用します。

バナー領域を複製してPC用 / SP用を用意します。

2つのレイアウト（横） > イメージにそれぞれPC用 / SP用の画像をセットします。

【PC用のレイアウトで変更した内容】（ 85pp が要素固有のレイヤーIDです。）

@media screen and (max-width: 767px) {
  .layout[data-layer-id="85pp"] {
        display: none;
    }
}

【SP用のレイアウトで変更した内容】（ o1mgs が要素固有のレイヤーIDです。）

@media screen and (min-width: 768px) {
  .layout[data-layer-id="o1mgs"] {
        display: none;
    }
}

プレビュー上でも出し分けをできていることが確認ができます。

上記のように一つの接客サービスで対応できると、「公開可能な接客数」の節約もできます！

公開している接客数が上限に近づいていて、、、という方にもおすすめの方法です。

リリースから日も経ちフレックスエディタは活用されている方も多いのではないでしょうか？

ちょっとした工夫でさらに便利に使える機能ですので、ぜひご活用してみてください！

チャットサポートでは、お問い合わせを受け付けております。

サポートチームへのお問い合わせは管理画面グローバルナビゲーション > [?] サポートガイド > より可能です！

お問い合わせをお待ちしています！