「インターネット広告のひみつ」による小ネタ備忘録ブログ。注目の話題について抄録と寸評。たまに辛口ですが悪気はありません。
2012/08/19

ニコニコ動画のようなディスプレイ広告

ニコニコ動画のように文字が流れるディスプレイ広告を、広告画像とテキストだけで作成できる。静止画の広告を目立たせる手法として利用したい。複数のブラウザーで同じように表示させるため、不要そうなタグも必要。
<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>
Posted by Kenji at 22:30 | Permalink |
ShareShare |

自己紹介

オオタケンジ。都内で広告の仕事をしています。テレビが好きです。

過去ログ

フォローしてみる

最新記事をメールで受信

無料購読申し込み無料購読申し込み

Agile Media Network パートナーブログ