スタートガイド   ›   クリエイティブテンプレート

クリエイティブのHTMLを直接編集する

「CODE Marketing cloud」では用意されたテンプレートのカスタマイズを行えるだけでなく、HTML, CSS, JavaScript を直接編集することで、自由なデザインのクリエイティブを利用することが可能です。

HTML直接編集の開始

HTML直接編集は既存のクリエイティブやテンプレートからいつでも開始できます。（簡易版クリエイティブを除く）

クリエイティブやテンプレートが直接編集済のものかどうかは、サムネイル下に「直接編集」表示があるかどうかで判断することができます。

HTML直接編集ラベルのついたクリエイティブまたはテンプレートはHTML直接編集専用です。

文言スタイル編集中のHTML直接編集への切り替え

直接編集ではないクリエイティブの編集中に、「HTMLを直接編集する」ボタンを押すと編集しているクリエイティブをそのまま直接編集に変更することができます。

変更は上書き保存するまで反映されることはありません。

HTML直接編集を行うと、直接編集専用となります

直接編集ではないクリエイティブまたはテンプレートからHTML直接編集を開始し、上書き保存を行うと文言スタイル編集に戻ることはできません。ご注意下さい。

クリエイティブの構成要素

クリエイティブは HTML, CSS, Script で構成されています。直接編集する場合、これらをそれぞれ編集することができます。

HTMLの編集

クリエイティブの本文のHTMLを記述します。

以下にランキングへのリンクとクリエイティブを閉じるリンクを持つクリエイティブの例を示します。

<div class='code-creative-1-wrapper' id='code-creative'>
  <a class='code-creative-1-link' 
     href='/ranking.html?cpn=code'
     data-code-track-id='1'>
       Welcome Special Ranking
  </a>
  <a class='code-creative-1-close' data-code-close>閉じる</a>
</div>

• HTMLは必ず一つのタグで囲まれている必要があります。最上位に複数のタグが存在する場合は、最初のタグがクリエイティブとして利用されます。最上位にテキストノードではない要素が見つからない場合、クリエイティブの本体が表示されません。

特殊な属性について

直接編集クリエイティブでは要素に指定する特殊な属性があります。

特殊文字について

クリエイティブの中に、$$$ で囲まれた文字列が存在するクリエイティブテンプレートがあります。(例: $$$signOfUsersCount$$$)
$$$で囲まれた文字列は内部で動的な値を埋め込むためにシステムで利用していますゆえ、編集しないようお願いします。

CSSの編集

クリエイティブ本文のHTMLと同時にロードされるCSSを記述します。

以下に簡単なCSSの例を示します。

div.code-creative-1-wrapper {
     position:relative;
     border:1px solid #CCC;
     background-color: #FFF;
     line-height: 1.5;
     border-radius: 10px;
     padding:16px;
     margin:16px;
     height:120px;
     width:240px;
     box-sizing: border-box;
}
div.code-creative-1-wrapper > a.code-creative-1-link {
     display:block;
     width:100%;
     height:100%;
}
div.code-creative-1-wrapper > a.code-creative-1-close {
     display:block;
     position:absolute;
     bottom:16px;
     left:0;
     right:0;
     width:100%;
     text-align:center;
     cursor: pointer;
}

• 例ではスタイルのリセットの記述は含めていません。詳細なリセット記述を行うことも、ページ側で利用しているスタイルに合わせることもできます。たとえば埋め込みクリエイティブをナビゲーションの一部として利用する場合など、ページ側のスタイルに合わせた方が自然です。
• クリエイティブのスタイルを定義はクリエイティブ内だけでなくサイト全体で有効になる点に注意してください。

Scriptの編集

クリエイティブが表示されるタイミングで実行される JavaScript コードを記述します。実行されるタイミングはクリエイティブの DOM 要素が構築された直後です。

以下に簡単な Script の例を示します。

var creative = document.getElementById("code-creative");
if(creative){
    creative.addEventListener('mouseenter', function(){
        this.style.borderWidth = '5px';
    })
    creative.addEventListener('mouseleave', function(){
        this.style.borderWidth = '1px';
    })
}

この例では、マウスカーソルが要素に重なったタイミングで枠線の太さを切り替えて強調しています。

• Script を編集した場合、プレビューの再描画を行うか、スクリプト編集エリア下にある「再実行」ボタンをクリックすることで実行することができます。自動的に再実行はされません。
• Script の内容は即時関数でそのまま実行されます。特定ブラウザがサポートしない構文の変換などはサポートしておりません。
• jQuery, lodash といった外部ライブラリを自動的にインポートする仕組みはサポートしておりません。