クリエイティブを使用し外部ファイルCSSの指定を変更したい – DLPOヘルプセンター

質問

クリエイティブを使用し外部ファイルCSSの指定を変更したい

回答

クリエイティブでは、対象ページにて読み込んでいる外部CSSファイルを<style>タグやJavaScriptを使用して別のCSS指定に変更することが可能です。
ここでは、標準エディターで下記2つのパターンを使用したCSS指定方法をご案内いたします。

1）<style>タグを使用したCSS指定

2）JavaScriptを使用したCSS指定

CSS指定方法

1）<style>タグを使用したCSS指定

外部CSSファイルが適用されている以下のようなページを例に設定方法をご説明します。
ここでは、変更対象のタグに”class”属性で”test”という値が指定がされています。
※クリエイティブ配信の際、DLPOタグを対象ページに設置してください。

【対象ページ(HTML)】

　　<head>
　　<link rel="stylesheet" href="css/style.css" type="text/css" />
　　</head>
　　<body>
　　　<script src="//d.adlpo.com/***/***/js/smartadlpo.js" type="text/javascript"></script>
　　　　︙
　　　<div class="test">変更対象</div>
　　　　︙
　　</body>

■標準エディターを使用したCSS指定方法

標準エディターを利用して文字色が「赤」になるように指定します。

図１：標準エディターを使用したCSS指定方法

対象のタグに設定されている”class”属性に対して、新たに<style>タグを使用し効果を適用しています。
なお、新たな<style>タグを変更対象のタグよりも前に配信するために「の前に挿入」を選択しています。

HTMLページでは上から順にソースが読み込まれていくため、<head>タグ内に記述されている外部CSSファイルより後の<body>直後に記載されているDLPOタグが読み込まれ、最終的に上記クリエイティブ登録内容が対象箇所に反映されます。

※図中の赤線部分「!important」は、ここでのCSSによる指定を優先して適用させるための記述になります。必須の記述ではありませんが今回のように外部CSSを利用していて、且つクリエイティブにて別のCSSを適用させる場合は記述することをおすすめします。

2）JavaScriptを使用したCSS指定

【対象ページ(HTML)】

　<head>
　　<link rel="stylesheet" href="css/style.css" type="text/css" />
　</head>
　<body>
　　<script src="//d.adlpo.com/***/***/js/smartadlpo.js" type="text/javascript"></script>
　　　︙
　　<div class="test">変更対象</div>
　　　︙
　</body>

■標準エディターを使用したCSS指定方法

JavaScriptで対象の文字色を赤に指定します。
JavaScriptを記載する際、クリエイティブ登録個別画面では下記プルダウンから「JavaScriptを配信する」を選択します。

図２－１：「JavaScriptを配信する」を選択する

CSSセレクタ指定により対象要素を取得し、文字色を変更するJavaScriptを下記の形で記述します。

図２－２：JavaScriptを設定する

必ず<script></script>を除いたJavaScriptを記述します。
※<script></script>で囲んだ形で登録しますと、クリエイティブ配信時にエラーが発生し正しい動作が行われませんのでご注意ください。

静的ページの場合、DOM構成後に設定したJavaScriptが実行されるため、対象要素の文字色が変更されます。

注意事項

標準エディターにて「JavaScriptを配信する」をご利用の際、コメントアウト(<!—->や//)を使用してしまうとクリエイティブが正常に動作しませんのでご注意ください。
クリエイティブ配信対象のページ構成によっては、正しく配信できない可能性があります。その場合は、クリエイティブの反映タイミングの変更やJavaScriptの設定内容を見直してください。クリエイティブの反映タイミングについては「クリエイティブ個別登録」をご覧ください。