フローティング広告をオフライン(ローカル)で再生する

質問

フローティング広告をオフライン、すなわちインターネットに接続されていないローカルの環境で再生する方法を教えてください。

回答

「バナー広告を掲載ページのコンテンツと一緒に保存する」で紹介した方法を応用することによって、フローティング広告もオフラインで再生できます。手順は次のとおりです。

  1. フローティング広告の背景となるウェブページを用意します。ここでは、ウェブページを画像として用意して、その上にフローティング広告を表示することにします。
    スクリーンショット
  2. フローティング広告を用意します。フローティング広告とともにリマインダーと呼ばれるバナー広告も表示するときは、それも用意します。以下の手順は、フローティング広告がフラッシュ、バナー広告がGIFの場合のものです。
  3. テキストエディタ(ウィンドウズに付属のメモ帳(Notepad.exe)など)を起動して、次のコードを入力します。「bg.jpg」の部分は、背景ページのイメージのファイル名にします。「reminder.gif」の部分は、バナー広告のファイル名にします。「intro.swf」の部分(2箇所)は、フローティング広告のファイル名にします。「WIDTH(幅)」と「HEIGHT(高さ)」の値(各2箇所)は、SWFファイルの幅と高さをピクセルで指定します。
  4. <!-- saved from url=(0013)about:internet -->
    <html>
    <head>
    <style type="text/css">
    .time { behavior:url(#default#time2); }
    </style>
    </head>
    <body>
    <!-- 背景イメージここから -->
    <div style="position:absolute; top:0px; left:0px;">
    <img src="bg.jpg" />
    </div>
    <!-- 背景イメージここまで -->
    <!-- リマインダーここから -->
    <div style="position:absolute; top:100px; left:50px;" class="time" begin="0" end="">
    <a href="https://www.netadreport.com/"><img src="reminder.gif" border="0" /></a>
    </div>
    <!-- リマインダーここまで -->
    <!-- イントロここから -->
    <div style="position:absolute; top:200px; left:100px;" class="time" begin="1" end="">
    <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
     WIDTH="600" HEIGHT="300" id="" ALIGN="">
     <PARAM NAME=movie VALUE="intro.swf">
     <PARAM NAME=quality VALUE=high>
     <PARAM NAME=wmode VALUE=transparent>
     <PARAM NAME=bgcolor VALUE=#FFFFFF>
     <EMBED src="intro.swf" quality=high wmode=transparent bgcolor=#FFFFFF
     WIDTH="600" HEIGHT="300" NAME="" ALIGN=""
     TYPE="application/x-shockwave-flash"
     PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
     </EMBED>
    </OBJECT>
    </div>
    <!-- イントロここまで -->
    </body>
    </html>
    

    (注)コードの右端の一部が表示されずに切れてしまっているのでご注意ください。コピーは問題なくできます。

  5. 入力したコードを、任意のファイル名でHTMLファイルとして保存します。またはテキストファイルとして保存したうえで、ファイルの拡張子を「.txt」から「.html」に修正します。
  6. 作成したHTMLファイルとそれに貼り付けるページのイメージおよびバナーのファイルなどが異なるフォルダに保存されているときは、それらを同一のフォルダに移動します。
  7. 作成したHTMLファイルをダブルクリックしてブラウザで開き、ページのイメージおよびバナーのファイルなどが貼られていることを確認します。
    スクリーンショット
  8. 「<!-- リマインダーここから -->」や「<!-- フローティングここから -->」の次の行にある「top(上からの距離)」と「left(左からの距離)」の値を加減して、バナー広告やフローティング広告の位置を補正します。
    スクリーンショット
  9. 「<!-- フローティングここから -->」の次の行にある「begin="1"」は、ページが表示されてから1秒後にフローティング広告を表示するための設定です。フローティング広告を途中で終了させる必要があれば、「end」にも値を入力します。
  10. バナー広告の表示時間を設定する必要があれば(バナー広告がフローティング広告の終了後に表示される場合など)、「<!-- リマインダーここから -->」の次の行にある「begin(表示開始秒数)」と「end(表示終了秒数)」に値を入力します。

注意

HTMLにおいてファイル名を相対パスで指定すれば、HTMLに貼り付けるファイルはHTMLと異なるフォルダにあってもかまいません。 フローティング広告のレイヤーの透過や、フローティング広告やバナー広告の表示開始・終了の設定は、一部のブラウザーでは機能しないことがあります。 バナー広告がフラッシュの場合の設定、およびHTMLに任意の文字を記述したり背景色を指定したりする方法についての解説は省略します。

資料作成マニュアルの目次へ

【広告】 楽天市場リアルタイムランキング

Agile Media Network パートナーブログ