既に、
多くの方が利用されているかと思われます。
Google AdSenseという広告配信サービスです。
がレスポンシブコードがβ版から始まり現在では正式版になっています。
また、
以下のように同期コードによるレスポンシブコードの改変は容易でした。
≫https://productforums.google.com/forum/#!topic/adsense-ja/kB5OpyPC5-U
レスポンシブ推奨いて広告コードを発行すると、
autoになっていて自分の意図する広告サイズとは違います。
そこで、
cssを利用した広告サイズの変更方法は多く拝見されます。
ですが、
今回はcssによるレスポンシブ対応ではなく、
人気記事
車のキーナンバー確認方法。キーレス紛失や壊れた時
140.7k件のビュー
ECUをリセットする方法。アイドリング不安定だったのでしょうがなく
101.7k件のビュー
Windows10,Windows8.1プロダクトキー確認方法
75.1k件のビュー
Windows10でエラーコード0x800705b4の対処方法
67.2k件のビュー
スロットルポジションセンサー調整で不安定なアイドリング調整
38.9k件のビュー
車から異音の原因。カラカラ、カタカタ、コトコトなど…。
37.9k件のビュー
Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法
37.2k件のビュー
ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法
36.5k件のビュー
ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法
34.9k件のビュー
カーメイトのエンジンスターターでエラー15表示と対処方法
29.7k件のビュー
別の方法にてレスポンシブにて自分の意図する広告サイズの表示方法です。
スポンサーリンク
まず現在のレスポンシブコードを発行すると、
以下の様なものかと思います。
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-ご自分のID"
data-ad-slot="スロットID"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
ここで最下部の<script>の中です。
ここの中に以下のようにコードを追加します。
まずは完成形です。
<ins class="adsbygoogle" style="display:inline-block" data-ad-client="ca-pub-○○○○○○○○○○○○"></ins>
<script>
// ○○○○○○○○○○○ はサイト運営者IDの数字部分
google_ads_params = ["336", "250", "××××××××"]; // ×××××××× は 広告ユニットのID
if (document.documentElement.clientWidth > 800) {
google_ads_params = ["336", "280", "×××××××"]; // ×××××××× は 広告ユニットのID
}
if (document.documentElement.clientWidth > 500) {
<!-- 横幅が500px以上なら 300x250 のリンク広告を表示する -->
google_ads_params = ["300", "250", "×××××××"]; // ×××××××× は広告ユニットのID
}
if (document.documentElement.clientWidth > 300) {
<!-- 横幅が300px以下なら 300x250 のリンク広告を表示する -->
google_ads_params = ["300", "250", "×××××××"]; // ×××××××× は広告ユニットのID
}
(adsbygoogle = window.adsbygoogle || []).push({
params: {
google_ad_width: google_ads_params[0],
google_ad_height: google_ads_params[1],
google_ad_slot: google_ads_params[2]
}
});
</script>
<ins>タグ内にwindow.adsbygoogle || []というものがあります。
ここに、
上記のようにparamsキーを使います。
- width→google_ad_width、
- height→google_ad_height、
- data-ad-slot →google_ad_slot
に対応となっています。
最後に、
自分で任意に作成した配列google_ads_paramsに、
[width,height,data-ad-slot]の順序で、
条件にあった値を入れれば完成です。
以上が、
非同期の広告コードをレスポンシブデザインに対応させるようにした広告コードです。
もっと細かく対応させたい場合は、
広告コードの種類を別途いくつか作成して、
アクセスされた方の画面の横幅で条件分岐を増やせばOKです。
今回は、3つの条件分岐の場合でした。
（もしくは、div の横幅に合わせて可変させる事も可能です。）
難点と言いますか問題点と言いますか…。
ブラウザのウィンドウの幅が可変できる場合に、
（スマホなどで横向きと縦向きでは幅が異なります。）
可変しても広告コードが切り替わらないという点だけです。
しかし、
これは今のところそんなに苦ではないと思います。
また、
多くの方はスマホで横向き縦向きが自動で変わる設定は、
ゲームをする時くらいしかONにしてないのではないでしょうか。
以上です。
まとめ
以下のサイトのコードよりスマートにできたかと思われますがいかがでしょう。
≫How to Use Google AdSense Link Units on Responsive Websites - Digital Internals
comment