目次に行く・戻る
メルカリ招待コード: 招待コードをコピー
既に、 多くの方が利用されているかと思われます。
Google AdSenseという広告配信サービスです。 がレスポンシブコードがβ版から始まり現在では正式版になっています。
また、 以下のように同期コードによるレスポンシブコードの改変は容易でした。 ≫https://productforums.google.com/forum/#!topic/adsense-ja/kB5OpyPC5-U
レスポンシブ推奨いて広告コードを発行すると、 autoになっていて自分の意図する広告サイズとは違います。
そこで、 cssを利用した広告サイズの変更方法は多く拝見されます。
ですが、 今回はcssによるレスポンシブ対応ではなく、
+これまでによく読まれている記事一覧クリックでOPEN+
150,450件の PV
106,481件の PV
75,738件の PV
67,234件の PV
43,812件の PV
40,608件の PV
38,212件の PV
37,255件の PV
36,559件の PV
33,192件の PV
別の方法にてレスポンシブにて自分の意図する広告サイズの表示方法です。
アドセンス336pxPC閲覧記事下表示1つ目コード
まず現在のレスポンシブコードを発行すると、
以下の様なものかと思います。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <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>の中です。 ここの中に以下のようにコードを追加します。
まずは完成形です。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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 の横幅に合わせて可変させる事も可能です。)
あなたにおすすめな関連記事 おすすめの記事一部広告 おすすめ!! 世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!
おすすめ2 楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。
Total290
アドセンス336pxPC閲覧記事下表示1つ目コード
目次に戻る
-AdSense , WordPress , カスタマイズ -AdSense , カスタマイズ , レスポンシブデザイン , 非同期コード
目次に戻る
目次に戻る
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
This opt out feature requires JavaScript.
The tracking opt-out feature requires cookies to be enabled.
comment