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

今日は2025年5月12日です。

目次に行く･戻る

2025年5月12日 (月曜日)本日の人気記事トップ１０

• キッチンシンク下がドブ臭い下水臭い原因と解決方法20
• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ14
• プラグイン不要アイキャッチ画像自動生成コード5
• Google推奨のJSON-LD形式で出力する構造化データのパンくずリストをトップページにもJSON-LDの構造化データを出力4
• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法4
• 2025年4月（先月）のETCトラブルNEXCO中日本が方針転換で後払いでの料金請求しない4
• ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に3
• WordPressでRSSフィードに確実にアイキャッチ画像を反映させる方法2
• Windows10で動かないアプリを動かす方法22
• ピカットロンプロでキッチンシンク排水口のヌメリやお風呂のカビ取り2

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

• 本日
• 週間
• 月間

1. 

   キッチンシンク下がドブ臭い下水臭い原因と解決方法 7PV

   意外と知られていないのが、キッチンシンクからいつもと違う臭いや異臭や下水臭い強烈な匂いが出てくることがあります。いくらシンク内をカビキラーやキッチンハイターなどの塩素系漂白剤などできれいにしても・・・…

   もっと読む

2. 

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

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

   もっと読む

3. 

   ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 4PV

   本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

   もっと読む

1. 

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

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

   もっと読む

2. 

   車のキーナンバー確認方法。キーレス紛失や壊れた時 25PV

   初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

   もっと読む

3. 

   エクストレイルT32ヘッドライト光軸調整方法 17PV

   エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

   もっと読む

1. 

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

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

   もっと読む

2. 

   車のキーナンバー確認方法。キーレス紛失や壊れた時 25PV

   初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

   もっと読む

3. 

   エクストレイルT32ヘッドライト光軸調整方法 17PV

   エクストレイルT32やエクストレイルT33などでは純正LEDヘッドライトが採用されているグレードや車種があります。メーカーオプションのLEDヘッドライトだと光軸調整が難しいと思われる方のいらっしゃるか…

   もっと読む

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

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

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

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

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

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

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

カーメンテナンス
ワコーズ

カーパーツ
WAKO'S

+人気カー用品を見てみるクリックでOPEN+

→人気のカーナビランキングカーメンテナンスWAKO'S車バイク用オイル

カーメンテナンス
ワコーズ

車バイク用オイル

ワコーズカーメンテナンス

メルカリ招待コード： 招待コードをコピー

• 廃バッテリー処分方法
• シガーライターソケット増設方法
• ナビテレビが見れなくなった時
• Windows10・Windows8.1プロダクトキー
• アルミテープチューン貼る場所
• 車から異音の原因
• スロットルポジションセンサー調整方法
• バッテリー交換後アイドリング不調
• ハンドルセンターズレ調整方法
• 車のキーンナンバー確認方法
• ECUリセット方法

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

アドセンス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サポート終了まで

Multiplex 広告

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

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

関連記事内（途中）にインフィード広告を入れる挿入方法

先月いや先々月の7月初旬頃かと思います。Google Adsenseにおいて、 インフィード広告や 関連コンテンツ内広告 そして記事内広告 の3つが追加されてこれまでよりより使いやすくなりました。 （…

もっと読む

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

インターネット カスタマイズ カスタマイズ ツール 伝えたいこと 備忘録 時事ネタ

カラーコード検索をGoogleで簡単に確認する方法

ホームページやブログなどサイトのデザインには画像はもちろんですが、 その他にCSSやHTML（HTML5も含む）で色の付け方？などでカラーコードと呼ばれるものを使用すると思います。 （他にもRGBなど…

もっと読む

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

WordPress カスタマイズ テーマ 伝えたいこと 備忘録 時事ネタ

ブログやサイト運営はBloggerとWordPressどっちがいい?

ブログは今や庶民である私や普通の一般人でも見事にサイトとして運営できるようになってきます。ブログが出始めた頃はブログとホームページは明確に違いがあり検索ポータルサイトなどでも通常の検索とブログ用の検索…

もっと読む

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

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

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

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

もっと読む

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

Stinger6 WordPress カスタマイズ

WordPress,css外部ファイル化方法Stinger

昨今…。 といっても、 ここ数年ページ表示速度もSEO対策のひとつにもなります。 また、 検索してくれた方がそのサイトが表示されるのになかなか表示されないと離脱率どころではなく、 サイトにすら訪れてく…

もっと読む

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

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

YouTube動画が重い時や遅い時に遅くならない簡単解決方法(続)

以前の記事にYouTubeの動画が重い時や遅い時に、ページの表示速度やサイト自体が重くなってしまわないようにする方法を記載しました。ですが、WordPressにおいてのショートコード化で動画IDのクイ…

もっと読む

【AmazonタイムセールSALE車＆バイク】！

人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

人気の商品が日替わりで登場。毎日お得なタイムセール

年金倍増で日本経済は大復活する!デフレの終わり、第二の「高度成長」の始まり

¥2,749 （2025/05/08 05:43時点 | Amazon調べ）

Amazon

楽天市場

Yahooショッピング

メルカリ

ポチップ

エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー

すべての車でバッテリーが搭載されています。特にアイドリングストップ車以降現在主流になりつつある電気自動車などではバッテリーの性能がとても重要になってきます。今回は日産エクストレイ

📅 2020.11.14 | 📂 メンテナンス, 車

バッテリー交換後の廃バッテリー処分方法3つ

バッテリー交換は、どの車においてもいずれは発生する事象です。新車で購入して3年で乗り換えなんて言う方は今ではそんなに多くはないと思います。（中に入ると思いますが、多くの方々はそれ

📅 2023.08.06 | 📂 メンテナンス, 車

あなたが訪問してから

⏰ 0 秒経過 🎉

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

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

今週の人気記事トップ１０

• キッチンシンク下がドブ臭い下水臭い原因と解決方法 153件の PV

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

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

• 車のキーナンバー確認方法。キーレス紛失や壊れた時 16件の PV

• Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法 15件の PV

• 2025年4月（先月）のETCトラブルNEXCO中日本が方針転換で後払いでの料金請求しない 12件の PV

• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 11件の PV

• アイドリングストップシステム異常警告灯表示対処方法 11件の PV

• プラグイン使わずにアイキャッチ画像自動生成コード 9件の PV

• シガーライターがない車にシガーライターソケットの付け方と増設方法 7件の PV

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

カウントダウンタイマー

おすすめの記事一部広告

• キッチンシンク下がドブ臭い下水臭い原因と解決方法221
• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ90
• 車のキーナンバー確認方法。キーレス紛失や壊れた時77
• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法68
• アイドリングストップシステム異常警告灯表示対処方法53
• エクストレイルT32マイナーチェンジ後ステアリング外し方48
• カーメイトのエンジンスターターでエラー15表示と対処方法45
• ECUをリセットする方法。アイドリング不安定だったのでしょうがなく45
• エクストレイルT32おすすめバッテリーPanasonicカオスバッテリー43
• 多要素認証を楽天証券、SBI証券、松井証券などのネット系証券会社やSMBC日興証券など32

目次に戻る

-AdSense, WordPress, カスタマイズ
-AdSense, カスタマイズ, レスポンシブデザイン, 非同期コード

目次に戻る

目次に戻る