技術情報

カスタムHTMLタグ内で変数を使用するには?

 

カスタムHTMLの内容を定義すると、中括弧を通してコンテナ内の任意の変数の内容にアクセスすることができます。その変数をJavaScript変数やCSSスタイルに割り当て、HTML内で使用することができます:

<script>
    // correct
    var myVariable = {{PageUrl}};
    var screenWidth = {{ScreenWidth}};
    var pageWidth = myVariable + screenWidth;

    // not correct (do not put quotes around it)
    var myVariable = '{{PageUrl}}';
    // not correct (do not put two variables next to each other)
    var pageWidth = {{PageUrl}}{{ScreenWidth}};
</script>

<style>
    // correct (can only be used as a value)
    body {
        width: {{ScreenWidth}};
    }

    // not correct
    body {
        {{myVar}}: 15px;
    }
</style>

<div>{{PageUrl}} <a href="{{PageUrl}}">Click Me</a></div>

変数名がわからない?テキストフィールドの横にあるアイコンをクリックするだけで、変数セレクタが開き、必要なプレースホルダが自動的に挿入されます。

CSSスタイル値「mTmKpwoqM」とは何ですか?

CSSスタイルの一部として変数を代入した場合、変数が値を返していなければ、結果の値は “mTmKpwoqM “になるかもしれません。例えばbody{ color: mTmKpwoqM; }にお気づきかもしれません。この値は、CSS構文を “有効 “に保つために(そしてこのFAQ記事を見つけやすくするために)選ばれました。