1

広告画像の幅をピクセルからパーセンテージに変更しようとしています。Google DoubleClick または「DFP」を使用しています。広告画像が iframe 内に自動的に配置されるため、画像の実際のサイズを変更することは非常に困難です。

したがって、画像の幅をピクセルからパーセンテージに変更する方法は、画像広告を囲む div (ウェブページの 90%) を作成し、画像の幅を 100% に設定して、ラッパーがブラウザの幅のサイズ変更で幅が変更されると、その中の画像は常にラッパーを埋めます。しかし、画像がiframe内にあるため、これをすべて機能させる方法がわかりません（愚かなDFP!!!）

ラッパーの CSS コードは次のとおりです。

#div-gpt-ad-1362958263281-0 {width:90%; border:1px solid black;}

次に、ラッパーにあるiframe：

iframe {width:100%;}

最後に、いくつかの CSS セレクターとさまざまな div クラスを試した実際の画像:

.img_ad, a#aw0, iframe>.img_ad, iframe>#google_image_div>.img_ad {width:100%; display:block; border:1px solid red !important;}

Google Chrome で広告画像の要素を調べると、画像に CSS が適用されていないことがわかります。私がやりたいのは、画像の幅をパーセンテージに変更し、高さを .. に変更することだけですauto。本当にこんなに大変なの？画像がiframeにあるので、これは可能ですか? DFP で失敗する可能性はありますか? よくわかりませんが、イメージ広告のコードを変更するにはどうすればよいでしょうか。どんな助けでも本当に本当に本当に感謝しています！:)

これが jsFiddle です: http://jsfiddle.net/EptwH/3/

4

3 に答える 3

3

「スマート iframe」Google の売り込みと連動して同期読み込みを使用できることがわかりました。これにより、iframe からリンクを切り取って DOM に配置できます。

dfp コードの同じ ID を AdjustGoogleAd メソッドに渡していることに注意してください。レスポンシブ サイトを使用しているため、幅/高さの属性をいじっています。

<script type='text/javascript'>
    (function () {
        var useSSL = 'https:' == document.location.protocol;
        var src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
        document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    })();
</script>
<script type='text/javascript'>
    googletag.defineSlot('{AD SLOT HERE}', [WIDTH, HEIGHT], 'dfp-div-id').addService(googletag.pubads());
    googletag.pubads().enableSyncRendering();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();

    $(function () {
        AdjustGoogleAd('dfp-div-id');
    });

    function AdjustGoogleAd(bannerId) {
       var banner = $('#' + bannerId);
       var contents = $('#' + bannerId + ' iframe').contents();

       contents.find('a').clone().attr('id', bannerId + '_a').appendTo('#' + bannerId);
       var newLink = $('#' + bannerId + '_a');
       newLink.siblings().remove();
       newLink.find(".img_ad").removeAttr('height').removeAttr('width');
    }

</script>

HTML の場合:

<div id='dfp-div-id'>
     <script type='text/javascript'>
         googletag.display('dfp-div-id');
     </script>
</div>
于 2013-04-16T14:27:59.007 に答える
1

ここiframeは別のドメインにあります。CSSまたはJSでコンテンツを変更することはできません。

于 2013-03-11T22:36:09.907 に答える