現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

AdSense WordPress カスタマイズ

非同期レスポンシブコード

非同期のAdSenseレスポンシブコードの変更方法

所要時間目安：約3分

This session is using　 IPv4 　is established in

この記事は2015年12月25日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く･戻る

2025年4月2日 (水曜日)本日の人気記事トップ１０

2025年4月2日 (水曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 4PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 4PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長（バックル延長） 4PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 34PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 24PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 23PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 4PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. アイドリングストップシステム異常警告灯表示対処方法 4PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  3. 純正シートベルトバックル

    シートベルトがきついのでシートベルト延長（バックル延長） 4PV

    すべての車に付いているシートベルト…。 ですが、体型や車種によってシートベルトのバックルが短いとシートベルトを締めた際にきつくて運転自体がしにくくなってしまいます。 それでは、せっかくの安全装置である…

    もっと読む

カーメンテナンスWAKO'S

今日は2025年4月2日です。

メルカリ招待コード：

既に、
多くの方が利用されているかと思われます。

Google AdSenseという広告配信サービスです。
がレスポンシブコードがβ版から始まり現在では正式版になっています。

また、
以下のように同期コードによるレスポンシブコードの改変は容易でした。
≫https://productforums.google.com/forum/#!topic/adsense-ja/kB5OpyPC5-U

レスポンシブ推奨いて広告コードを発行すると、
autoになっていて自分の意図する広告サイズとは違います。

そこで、
cssを利用した広告サイズの変更方法は多く拝見されます。

ですが、
今回はcssによるレスポンシブ対応ではなく、

この記事を読む方へのオススメ


別の方法にてレスポンシブにて自分の意図する広告サイズの表示方法です。

アドセンス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 の横幅に合わせて可変させる事も可能です。）

難点と言いますか問題点と言いますか…。

 

ブラウザのウィンドウの幅が可変できる場合に、
（スマホなどで横向きと縦向きでは幅が異なります。）
可変しても広告コードが切り替わらないという点だけです。

しかし、
これは今のところそんなに苦ではないと思います。
また、
多くの方はスマホで横向き縦向きが自動で変わる設定は、
ゲームをする時くらいしかONにしてないのではないでしょうか。

以上です。

まとめ

 

以下のサイトのコードよりスマートにできたかと思われますがいかがでしょう。
≫How to Use Google AdSense Link Units on Responsive Websites - Digital Internals

Windows10サポート終了まで

【AmazonスマイルSALE】！


3/28(金)9時から4月1日（火）23時59分まで、「AmazonスマイルSALE」開催予定

3月28日(金曜日) ～ 2025年4月1日(火曜日) 23:59まで

あなたにおすすめな関連記事

RSSフィード画像

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

【決定版】プラグインなしでRSSにアイキャッチ画像を表示する2つの方法

この度は、度重なるRSSフィードにアイキャッチ画像を出力表示させる方法を連続して検証も兼ねて投稿してしまい申し訳ありませんでした。 何度か実際に実施してみてプラグインを使わないでRSSフィードにアイキ…

もっと読む

インフィード広告アドセンス

人気記事ランキング表示

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

人気記事ランキングに順位を付けてCSSで丸く表示する方法

多くのサイトやブログにおいて人気のある記事は異なると思います。 また、 人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります…

もっと読む

インフィード広告アドセンス

WordPressの文字コードUTF-8（BOMなし）

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ テーマ 不具合 伝えたいこと 備忘録

WordPressの文字コードはUTF-8で改行LFにて保存する方法

えーっと、この度WordPressのバージョンを4.6.1にバージョンアップしてから管理画面にjetpack4.3.2のダッシュボードを表示した際に、ちょっとしたWarningメッセージが表示されるよ…

もっと読む

インフィード広告アドセンス

Pixlrオンライン画像編集サイトにて作成

WordPress カスタマイズ 伝えたいこと 備忘録

ページ表示速度が遅いのでphotonが使いたくてJetpackプラグインをインストールしてみた…。

ここのところ、サイト（ブログ）のページ表示速度が気になってしまいます。以前に運営していたBloggerブログでも同様のことを考えたりしていました。ですが、サイトのページ表示速度が少しくらい遅くても時代…

もっと読む

インフィード広告アドセンス

カテゴリの人気記事一覧画像

WordPress カスタマイズ 伝えたいこと 備忘録

カテゴリの人気記事を表示する方法

  記事を読んで頂いていて該当記事を読み終わった後に、同じカテゴリーに属する人気記事を表示する方法です。 せっかく訪問して頂いて記事を読んでもらった後に同じカテゴリー内で人気のある記事が表示…

もっと読む

インフィード広告アドセンス

コンタクトフォーム

Stinger6 Stinger7 WordPress カスタマイズ 備忘録

続、プラグインなしでコンタクトフォームを作成方法

  先日、 WordPressでプラグインを使わないでお問い合わせ（先）フォーム（コンタクトフォーム）の作成する方法を記載しました。 （プラグインなし）   WordPressプラ…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

「AdSense, WordPress, カスタマイズ」の人気記事

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total477


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-AdSense, WordPress, カスタマイズ
-, , ,

目次に戻る

目次に戻る

コメントを閉じる

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.