問題が発生する条件

埋め込みテンプレートをもとに作成したアクションが、以下の条件をすべて満たしている場合、アクションが表示されません。（ページに埋め込まれません）

条件1

埋め込み方法として以下のいずれかを選択している場合

  • 「置き換え」
  • 「子要素の先頭に追加」
  • 「子要素の最後に追加」

条件2

埋め込み先CSSセレクタで指定したタグが以下のいずれかに該当する場合

  • 閉じタグが存在しないHTMLタグ (img / input など）

  • iframe タグ

  • 技術的な参考情報: iframeタグはinnerHTML の書き換えが不可

主に埋め込みテンプレートを利用してページ上の「画像を入れ替えたい」ときに、この問題が発生します。

アクションが表示されない理由

KARTEが提供する現状の埋め込みテンプレートの仕様では、埋め込み方法で「置き換え」「子要素の◯◯に追加」を選択した場合、CSSセレクタで指定したタグの 子要素 としてページ上にアクションが埋め込まれます。

そのため、CSSセレクタで指定したタグが「子要素を操作できない種類」のものだった場合、ページ上にアクションを埋め込むことができません。

これを回避するためには、divやsectionなどの「閉じタグが存在する親要素」をCSSセレクタで指定するよう、アクションの設定を変更してください。

うまく表示されない例

例1) 下記のようなHTMLで埋め込み先セレクタを#img1と設定した場合

    <div class='test1'>
        <img id='img1' href='test.jpg'>
    </div>

例2) 下記のようなHTMLで埋め込み先セレクタを#iframe1と設定した場合

    <div class='test1'>
        <iframe id='iframe1' src='http://example.com'>
                <p>some text</p>
            </iframe>
    </div>

回避するためには

上記の例では、埋め込み先セレクタを.test1と設定することで、アクション編集画面で設定したアクションをページ上に埋め込むことができます。