スキップしてメイン コンテンツに移動

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

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

このブログの人気の投稿

資生堂、広告媒体費の9割以上をデジタルに

資生堂は、世界の媒体費のデジタル化率を、現在の約50%から2023年には90%以上に引き上げるという。2020年第2四半期の決算説明で方針を明らかにした。代表取締役社長の魚谷雅彦氏によると「限りなく100%」を目指すという。https://www.irwebcasting.com/20200806/5/aa3167b53b/mov/main/index.html

信濃毎日新聞、拡張現実で花火大会

諏訪湖祭湖上花火大会など長野県内の多くの花火大会が中止となったことを受け、信濃毎日新聞が広告企画として「実験 ARおうち花火大会」を実施。朝刊紙面をスマートフォンのカメラで読み込むと、花火が打ち上げられる。養命酒製造とスカパーJSATグループが協賛。 https://prtimes.jp/main/html/rd/p/000000001.000063584.html