フレックスエディタに関してなにかトラブルがある場合は、こちらの記事の各項目で当てはまるものをまず確認してください。
よくあるご質問
Q. 既存のアクションはどう変換できますか?
A. 「既存アクションをフレックスエディタに変換する」機能を使って切り替えられます。「注意点」と合わせてご確認ください。
Q. フレックスエディタには利用制限や注意点がありますか?
A. 「活用シーン」 や「 アプリ配信時の注意点」 、「既存アクションをフレックスエディタに変換する際の注意点」をご確認ください。
🔧 基本操作・デザイン編集に関する質問
Q. フレックスエディタでモーダルの背景(黒い部分)をクリックしても閉じないようにできますか?
A. モーダルの表示設定 > 「背景クリック動作」の設定を削除(「✕」ボタンをクリック)することで可能です。
※参考:フレックスエディタの編集画面
Q. フレックスエディタでモーダルの背景(黒い部分)を色変更や非表示にできますか?
A. モーダルの表示設定 > 「背景色」や「背景表示」で設定可能です。
※参考:フレックスエディタの編集画面
Q. フレックスエディタで z-index は使えますか?
A. モーダルのスタイル > 「z-index」で設定可能です。
※参考:フレックスエディタの編集画面
Q. フレックスエディタで表示されるフォントの指定をしたい
A. Webフォントの選択か、共通コード(CSS)・ブランドスタイル設定からの直接指定で行います。
※参考:フレックスエディタでのフォント指定について
Q. ボタンのカラーを任意にカスタマイズ変更したいが、どこで設定できますか?
A. ボタンエレメントのテーマ設定 > 「カスタマイズ」から変更できます。
※参考:フレックスエディタの各エレメントのプロパティ項目
Q. ボタンのホバー時の色や透過を任意にカスタマイズ変更したいが、どこで設定できますか?
A. プロパティエディタ内の「CSSカスタマイズ」で対象ボタンのクラスに :hoverを指定することで変更できます
※CSSカスタマイズはサポート対象外です。
サンプルコードは以下になります。
.layout[data-layer-id="layerid"]:hover {
opacity: 1;/* ホバー時に透過させない */
background-color: #f5f5f5;/* ホバー時の背景色を指定 */
}Q. ボタンのラベルが長い場合、折り返して複数行で表示できますか?
A. プロパティエディタの「折り返しする」をONにすると複数行表示できます。
※参考:フレックスエディタの各エレメントのプロパティ項目
Q. ✗ボタン(閉じるボタン)が背景の後ろに隠れてしまいます。
A. 閉じるボタンの配置位置を見直すと解決します。デフォルトでは上部に配置されていますが、必要に応じて下部に変更も可能です。レイヤー>「閉じる」ボタンを下部に移動させることで解消するかご確認ください。
Q. iPhoneで画像が表示されず、閉じるボタンだけが表示されます。
A. 画像の横幅サイズが「自動」に設定されていることが原因です。プロパティエディタの「横幅」を「最大幅(100%)」または固定値(例:335px)に変更してください。
※参考:フレックスエディタのアプリ配信時の注意点
Q. アイコン/ボタンのクリック時の動作に「スライド遷移」を指定したのですが、うまく操作できません
A. アイコン/ボタンの配置位置を見直すと解決できる場合があります。
配置位置を下部に移動させ解消するかご確認ください。
Q. PCとスマホで配置を変えられますか?
A. モーダルの表示設定 > 「スマホ・PCで表示位置を変える」から可能です。
※参考:フレックスエディタの編集画面
Q. テキストリンクの“ネイティブ機能呼び出し”とは何ですか?
A. アプリ側のネイティブ機能(例:App Storeのトラッキング許可など)を呼び出す設定です。
※参考:テキストリンクのネイティブ機能呼び出し
Q. レイヤー欄の順番とプレビュー上の重なりはどのように対応していますか?
A. 基本的にはレイヤーの上部のエレメントが上部に表示されますが、絶対配置(absolute)された要素は、後から描画されたものが構造上前面に表示されるため、レイヤー欄の順番と一致しない場合があります。
※参考:フレックスエディタのレイヤー構造(モーダル/レイアウト/エレメント)とレイアウト化 > 注意点
Q. ボタンの色をデフォルトでブランドカラーに設定したいが、反映されません
A. 既にボタンにカスタムカラーやCSSでの上書きが設定されている場合、ブランドカラーが優先されず反映されないことがあります。
※参考:フレックスエディタのブランドスタイル設定 > CSSカスタマイズ利用時
Q. フレックスエディタでテンプレートのフォント指定や影を変更したいが、思った通りに反映されません
A. 既存のカスタマイズCSSが優先されるため、意図した表示にならないことがあります。意図しない影やフォント指定が残る場合はCSSの削除や修正を行ってください。
フォント指定の方法
単体のテキストにWebフォントを指定したい場合
サイトに読み込まれているWebフォントを選択し、右側の「カスタムCSS」から設定可能です。
全体のデフォルトWebフォントを指定したい場合
ブランドスタイル設定でWebフォント名を追加し保存する(すべての接客で反映)
共通コード設定(CSS)から任意の要素に対してfont-familyを上書きする
影(box-shadow)が残る場合
原因
カスタマイズCSSに
box-shadow指定が入っている場合、プレビュー上で古いスタイルが残ることがあります。実際の配信には反映されません。
対応方法
CSSタブで該当の
box-shadowを削除し、サイトプレビューに切り替えると古い影が消えることを確認できます。
Q.テキストの間にリンクを追加(例:詳細はこちら)することはできますか?
A. テキストとテキストリンクをレイアウト(横)で横並びにして設定します。
🧩 レイアウト・要素構造に関する質問
Q. 他のアクションの要素をコピーすることはできますか?
他のアクション(フレックスエディタ対応)から要素をコピーし、別のアクションにペーストすることが可能です。
※参考:コピー&ペースト
Q. 要素のテキスト内容が長文になった際に、ポップアップ内でスクロールは可能でしょうか?
A. レイアウトに高さを設定し、スタイルの「領域外の表示」を「スクロール」にすることで対応できます。
※参考:「レイアウトで設定できる項目 > スタイル > 領域外の表示」
Q. レイアウトはどういう概念ですか? どう使い分ければいいですか?
A. レイアウトは「要素のグループ構造」を定義する考え方です。
※ 参考:フレックスエディタのレイヤー構造(モーダル/レイアウト/エレメント)とレイアウト化
Q. いじっているうちにレイアウトが二重になってしまいました。空白が直せません。
A. 不要なレイアウトが入れ子になっている可能性があります。一度外側のレイアウトから要素を出すと解決します。左側のレイヤー上で外側のレイアウトの三点リーダーをクリックし、「レイアウトから出す」を選択してください。
Q. 表示/非表示の制御や条件分岐はできますか?
A. プロパティ設定から要素の表示・非表示や条件分岐を制御することができます。
※参考:フレックスエディタの表示/非表示設定
Q. CSS/JavaScript を使ったカスタマイズはできますか?
A. 共通コード設定(CSS・JavaScript の挿入)機能を使って、より細かいカスタマイズを行うことも可能です。
※カスタマイズはサポート対象外になります。
※参考:フレックスエディタの共通コード設定によるCSS・JavaScriptでのカスタマイズ
🎨 デザイン調整・スタイルに関する質問
Q. エンコードされたURLを設定するとページ遷移できません
A. リンク先URLがエンコードされた形式(例:%3Dや%2Fなどが含まれる)になっている可能性があります。「クリック時の動作>リンク設定」の「URLをデコード」をオンにしてください。
※参考:クリック時の動作 > リンク設定
Q. フォントを変更したいが、どこから設定できますか?
A. 右側のプロパティエディタ > 「フォント」から設定できます。その他にもブランドスタイル設定や共通コード設定などでも対応可能です。
※参考:フレックスエディタのフォント指定について
Q. ボタンを下に配置したいです。
A. 右側のプロパティエディタ > 「絶対配置」の指定がされていると動かせません。不要な場合は設定を削除(「✕」ボタンをクリック)してください。
※参考:レイアウトで設定できる項目 > 絶対配置
Q. 画像URLとリンク先URLを混同していました。
A. 画像自体のURLと、クリック時に遷移するURLは別設定です。「クリック時の動作」から設定しましょう。
※参考:レイアウトで設定できる項目 > クリック時の動作
🎞️ スライダー・カルーセル関連
Q. スライダーの2つ目以降のアイテムを見えなくしたい。
A. スライダーアイテムの幅を100%に設定することで、1枚ずつ切り替え表示が可能です。
Q. スライダーのアイテム切り替えを確認したい。
A. 編集画面右上の「操作モード」をオンにして確認できます。自動スライドを設定しておくとより分かりやすいです。
Q. ステートとカルーセルはどう使い分ければいいですか?
A. ステート=内容切り替え、カルーセル=複数スライドの並び、という違いがあります。動きで見せたいときはカルーセル、条件で切り替えたいときはステートが向いています。
※参考:
フレックスエディタでスライダー形式(カルーセル)のポップアップを作成する
フレックスエディタでボタンクリックでステート遷移するポップアップを作成する
💡 その他の質問・発見
Q. widget actionで書いていたスクリプトは、フレックスエディタでも使えますか?
A. 基本的には利用可能ですが、一部動作には制約がありますので、動作確認をお願いいたします。
Q. 追加したテキストをマウスで掴んで微調整したかったのですが、できません。
A. 現状はドラッグによる微調整は非対応です。プロパティ数値で調整してください。