Facebook
RSS Feed
Nov 2, 2014

忍者AdMax、Amazonの貼付け広告コード(iframe広告)をレスポンシブテーマで使う時に、広告画像の下の方が途中で切れるのを解決する方法

Google Adsenseの他にクリック課金型の広告として、
忍者AdMaxを使っている方もいるかと思います。

忍者AdMaxのiframe貼付けコードをレスポンシブテーマでそのまま貼ると、
コード内のサイズ指定が無視されて、下の方が切れちゃうので、以下解決方法を。
適当なclass名を付けて、CSSのmin-heightで高さの最小値を指定します。

忍者AdMaxの貼付けコードをレスポンシブ対応にする方法

◎AdMaxの貼付けコードに<div class=”admax”>〜</div>を追加

<!-- admax -->
<div class="admax">
<script src="http://adm.shinobi.jp/s/xxxxxxxxxxxxxxxxxx"></script>
</div>
<!-- admax -->

*全ての「<」と「>」「”」は半角に置き換えてね。

◎CSS内に下記の指定を追記

.admax iframe {
min-height: 300px;
}

*高さ指定は貼りたい広告のサイズに合わせてください。

Amazonのiframe広告の貼付けコードをレスポンシブ対応にする方法

アマゾンの場合も上記と同様です。

◎Amazonの貼付けコードに<div class=”amazon-ad”>〜</div>を追加

<!-- amazon-ad -->
<div class="amazon-ad">
<iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?t=XXXXXXXXXX-22" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</div>
<!-- amazon-ad -->

*全ての「<」と「>」「”」は半角に置き換えてね。

◎CSS内に下記の指定を追記

.amazon-ad iframe {
min-height: 300px;
}

*高さ指定は貼りたい広告のサイズに合わせてください。

これで解決すると思います。

カスタマイズの無料サポートは行ってませんので、分からない所はGoogleで調べてくださいね!特にHTML/CSSの記述方法・外部サービスの仕様は時代とともに変わるので最新情報を各自見直してください。あと作業する時はバックアップを忘れずに!
Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト