バナー広告を掲載ページのコンテンツと一緒に保存する

質問

バナー広告のファイルをハードディスクに保存する方法を教えてください。 また、バナー広告をそれが表示されたページと一緒に保存する方法を教えてください。

回答

ウェブページに表示されたバナー広告のファイルは、ブラウザーのキャッシュというフォルダに保存されています。 Internet Explorerのキャッシュは、次の手順で閲覧できます。

  1. Internet Explorer の「ツール」メニューから「インターネット オプション」を選択します。
    スクリーンショット
  2. 「インターネット オプション」ウィンドウの「全般」タブの画面に、「インターネット一時ファイル」という項目があります。そこの「設定」ボタンをクリックします。
    スクリーンショット
  3. 「設定」ウィンドウの「ファイルの表示」ボタンをクリックします。
    スクリーンショット
  4. 「Temporary Internet Files」フォルダ(ブラウザーのキャッシュ)が表示されます。このフォルダには、過去にブラウザーが読み込んだ各種ファイルが保存されています。「最終アクセス日時」や「最終チェック日時」、「インターネット アドレス」や「種類」などの情報を参考にして、バナーを探し出してください。

ブラウザーのキャッシュとして使用するディスク領域の設定によっては、キャッシュのフォルダを表示するのに数十秒の時間がかかることがあります。 また、古いファイルは削除されていることがあります。

さて、Internet Explorer において、バナー広告を掲載ページのコンテンツと一緒に保存する方法は次のとおりです。

  1. 保存したいページを表示したうえで、ブラウザの「ファイル」メニューから「名前をつけて保存」を選択します。
    スクリーンショット
  2. 「ファイルの種類」は、「Web ページ、完全 (*.htm;*.html)」または「Web アーカイブ、単一のファイル (*.mht)」を選択します。
    スクリーンショット
  3. 「保存する場所」「ファイル名」を任意に指定して、「保存」をクリックします。
  4. インターネットに接続していない環境で、保存したファイルを開き、意図どおりに保存できたことを確認します。

この手順で保存できないことも少なからずあります。 そのときは、ページのコンテンツを画像として保存してHTMLに貼り付け、その上にバナーのレイヤーをかぶせることをおすすめします。 その手順は次のとおりです。

  1. 保存したいページを表示したうえで、キーボードの「プリントスクリーン(Print Screen)」キーを押して、画面のイメージをクリップボードに保存します。
  2. クリップボードに保存したイメージを、フォトレタッチソフトで編集します。ブラウザのウィンドウの枠を省いて、ページのコンテンツだけを切り抜いて、GIFまたはJPEGとして保存します。
    スクリーンショット
  3. バナーのファイルは、手順2で作成したページのイメージとは別に用意しておきます。バナーがGIFのときは手順4へ、バナーがフラッシュのときは手順5へお進みください。
    スクリーンショット
  4. (バナーがGIFの場合) テキストエディタ(ウィンドウズに付属のメモ帳(Notepad.exe)など)を起動して、次のコードを入力します。「bg.jpg」の部分は、手順2で作成したページのイメージのファイル名にします。「banner.gif」の部分は、貼り付けるバナーのファイル名にします。
  5. <html>
    <body>
    <!-- 背景イメージここから -->
    <div style="position:absolute; top:0px; left:0px;">
    <img src="bg.jpg" />
    </div>
    <!-- 背景イメージここまで -->
    <!-- 広告イメージここから -->
    <div style="position:absolute; top:100px; left:50px;">
    <img src="banner.gif" />
    </div>
    <!-- 広告イメージここまで -->
    </body>
    </html>
    
  6. (バナーがフラッシュの場合) テキストエディタ(ウィンドウズに付属のメモ帳(Notepad.exe)など)を起動して、次のコードを入力します。「bg.jpg」の部分は、手順2で作成したページのイメージのファイル名にします。「banner.swf」の部分(2箇所)は、貼り付けるバナーのファイル名にします。「WIDTH(幅)」と「HEIGHT(高さ)」の値(各2箇所)は、SWFファイルの幅と高さをピクセルで指定します。
  7. <!-- saved from url=(0013)about:internet -->
    <html>
    <body>
    <!-- 背景イメージここから -->
    <div style="position:absolute; top:0px; left:0px;">
    <img src="bg.jpg" />
    </div>
    <!-- 背景イメージここまで -->
    <!-- 広告イメージここから -->
    <div style="position:absolute; top:100px; left:50px;">
    <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="468" HEIGHT="60" id="" ALIGN="">
     <PARAM NAME=movie VALUE="banner.swf">
     <PARAM NAME=quality VALUE=high>
     <PARAM NAME=bgcolor VALUE=#FFFFFF>
     <EMBED src="banner.swf" quality=high bgcolor=#FFFFFF
     WIDTH="468" HEIGHT="60" NAME="" ALIGN=""
     TYPE="application/x-shockwave-flash"
     PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
     </EMBED>
    </OBJECT>
    </div>
    <!-- 広告イメージここまで -->
    </body>
    </html>
    

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

  8. 入力したコードを、任意のファイル名でHTMLファイルとして保存します。またはテキストファイルとして保存したうえで、ファイルの拡張子を「.txt」から「.html」に修正します。
  9. 作成したHTMLファイルとそれに貼り付けるページのイメージおよびバナーのファイルが異なるフォルダに保存されているときは、それらを同一のフォルダに移動します。
  10. 作成したHTMLファイルをダブルクリックしてブラウザで開き、ページのイメージおよびバナーのファイルが貼られていることを確認します。
    スクリーンショット
  11. 「<!-- 広告イメージここから -->」の次の行にある「top(上からの距離)」と「left(左からの距離)」の値を加減して、バナーの位置を補正します。
    スクリーンショット

注意

HTMLにおいてファイル名を相対パスで指定すれば、HTMLに貼り付けるファイルはHTMLと異なるフォルダにあってもかまいません。 フラッシュのバナーを貼り付ける場合、SWFファイルによっては、背景色指定部分(「NAME=bgcolor VALUE=#FFFFFF」および「bgcolor=#FFFFFF」)などを変更する必要があります。 HTMLに任意の文字を記述したり背景色を指定したりする方法についての解説は省略します。

応用

HTMLに貼り付けたバナーをクリックしたとき、任意のウェブページにリンクするようにするには、HTMLを編集する必要があります。 例えば、クリックしたときに「http://***.jp/」にリンクさせたいとします。GIFのバナーの場合、

<img src="banner.gif" />
の部分を
<a href="http://***.jp/"><img src="banner.gif" border="0" /></a>
としてください。フラッシュのバナーの場合、
"banner.swf"
の部分(2箇所)を
"banner.swf?clickTAG=http://***.jp/"
としてください。

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

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

Agile Media Network パートナーブログ