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

質問

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

回答

クリエイティブでは、対象ページにて読み込んでいる外部CSSファイルを<style>タグやjQueryを使用して別のCSS指定に変更することが可能です。
ここでは

・ワンコード実装時にワンコード実装用エディターを使用したCSS指定方法
・ダイレクトコード実装時にHTMLエディターを使用したCSS指定方法

上記内容のクリエイティブを作成する場合、下記2つのパターンを使用したCSS指定方法をご案内致します。

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

2）jQueryライブラリを使用したCSS指定

CSS指定方法

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

外部CSSファイルが適用されている以下のようなページを例に設定方法をご説明します。
ここでは、変更対象のタグに”class”属性で”test”という値が指定がされています。
※クリエイティブ配信の際、ワンコード実装時はワンコードタグを、ダイレクトコード実装時は制御タグ及び<body>内の配信箇所にエリアタグを設置してください。

【ページ側(変更前)】

　　<head>
　　<link rel="stylesheet" href="css/style.css" type="text/css" />
　　</head>
　　<body>
　　　　︙
　　　<div class="test">変更対象</div>
　　　　︙
　　</body>

【ページ側(変更後)】

　　<head>
　　<link rel="stylesheet" href="css/style.css" type="text/css" />
　　</head>
　　<body>
　　　　︙
　　　<div class="test">変更対象</div>
　　　　︙
　　</body>

■ワンコード実装時にワンコード実装用エディターを使用したCSS指定方法

ワンコード実装用エディターを利用して文字色が「赤」になるように指定します。

図１：ワンコード実装時にワンコード実装用エディターを使用したCSS指定方法

対象のタグに設定されている”class”属性に対して、新たに<style>タグを使用し効果を適用しています。
HTMLページでは上から順にソースが読み込まれていくため、<head>タグ内に記述されている外部CSSファイルより後の<body>直後に記載されているワンコードタグが読み込まれ、最終的に上記クリエイティブ登録内容が対象箇所に反映されます。
※ワンコード実装用エディター内で”id”や”class”の指定がない場合、クリエイティブはタグ最上部に展開されます。
※図中の赤線部分「!important」は、ここでのCSSによる指定を優先して適用させるための記述になります。必須の記述ではありませんが今回のように外部CSSを利用していて、且つクリエイティブにて別のCSSを適用させる場合は記述することをおすすめします。

■ダイレクトコード実装時にHTMLエディターを使用したCSS指定方法

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

図２：ダイレクトコード実装時にHTMLエディターを使用したCSS指定方法

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

HTMLエディターご利用時は、下記のような空のエリアタグを<body>タグ内の変更対象より前に設置する必要があります。

　<div class='ADLPODefault'>
　　<!–<style>タグ(クリエイティブ)展開位置–>
　</div>
　<script type='text/javascript'>adlpoMain('***','lc=os','ch=UTF-8');</script>

エリアタグを設置した位置にクリエイティブで登録した<style>属性が展開されます。

2）jQueryライブラリを使用したCSS指定

　<script type="text/javascript" src="js/jquery-1.*.*.min.js"></script>

jQueryでは対象のタグにid(class)セレクタを指定し、そのid(class)セレクタに対して変更を指定する方法でクリエイティブ設定します。

【ページ側(変更前)】

　<head>
　　<link rel="stylesheet" href="css/style.css" type="text/css" />
　</head>
　<body>
　　　︙
　　<div class="test">変更対象</div>
　　　︙
　</body>

【ページ側(変更後)】

　<head>
　　<link rel="stylesheet" href="css/style.css" type="text/css" />
　</head>
　<body>
　　　︙
　　<div class="test">変更対象</div>
　　　︙
　</body>

■ワンコード実装時にワンコード実装用エディターを使用したCSS指定方法

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

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

クリエイティブを下記の形で記述します。

図３－２：JavaScriptを設定する

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

■ダイレクトコード実装時にHTMLエディターを使用したCSS指定方法

HTMLエディターで設定する場合は<script>～</script>までをそのまま記述します。

図４：ダイレクトコード実装時にHTMLエディターを使用したCSS指定方法

HTMLエディターでご利用時は、下記のような空のエリアタグを<body>タグ内の変更箇所よりも前、且つjQueryライブラリ読み込み位置よりも後に設置します(jQueryライブラリを<body>タグ内で読み込む場合)。

　<div class='ADLPODefault'>
　　<!–jQuery(クリエイティブ)展開位置–>
　</div>
　<script type='text/javascript'>adlpoMain('***','lc=os','ch=UTF-8');</script>

エリアタグを設置した位置にクリエイティブで登録したjQueryが展開されます。

注意事項

ワンコード実装用エディターにて「JavaScriptを配信する」をご利用の際、コメントアウト(<!—->や//)を使用してしまうとクリエイティブが正常に動作しませんのでご注意ください。
その他jQueryを使用した記述例に関しましては「jQueryサンプル集」も併せてご確認ください。