ニコニコ動画のようなディスプレイ広告 | インターネット広告のひみつ - ブログ

ニコニコ動画のように文字が流れるディスプレイ広告を、広告画像とテキストだけで作成できる。静止画の広告を目立たせる手法として利用したい。複数のブラウザーで同じように表示させるため、不要そうなタグも必要。
<div style="width:300px; height:250px; border:solid 1px #cccccc; position:relative;">
<div style="text-align:center;">
<a href="ランディングページのURL" target="_blank"><img src="ディスプレイ広告のURL" width="300" height="250" alt="" style="border:none;"></a>
</div>
<div style="position:absolute; top:30px; width:300px; height:250px; overflow:hidden; font-weight:bold; text-shadow:1px 1px 1px #202020; filter:DropShadow(color=#202020 offX=1 offY=0) DropShadow(color=#202020 offX=-1 offY=0) DropShadow(color=#202020 offX=0 offY=1) DropShadow(color=#202020 offX=0 offY=-1);">
<a href="ランディングページのURL" target="_blank" style="text-decoration:none;">
<marquee scrolldelay="1" scrollamount="5" style="font-size:24px; line-height:140%; color:#F0F0F0;">テキスト1行目</marquee>
<marquee scrolldelay="1" scrollamount="7" style="font-size:24px; line-height:140%; color:#F0F0F0;">テキスト2行目</marquee>
<marquee scrolldelay="1" scrollamount="9" style="font-size:24px; line-height:140%; color:#F0F0F0;">テキスト3行目</marquee>
<marquee scrolldelay="1" scrollamount="6" style="font-size:24px; line-height:140%; color:#F0F0F0;">テキスト4行目</marquee>
<marquee scrolldelay="1" scrollamount="8" style="font-size:24px; line-height:140%; color:#E0E000;">テキスト5行目</marquee>
</a>
</div>
</div>