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

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

目次に行く･戻る

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

• 車のキーナンバー確認方法。キーレス紛失や壊れた時8
• CPU温度とGPU温度が高いのでおすすめCPUグリスを塗り直し温度を下げた。5
• CPUグリスのおすすめ最適解かもやはりナノダイヤモンドグリス4
• 多要素認証を楽天証券、SBI証券、松井証券などのネット系証券会社やSMBC日興証券など4
• アルミテープチューン貼る場所で燃費向上と走行性能アップTOYOTAの特許を試してみた3
• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ3
• ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法2
• エクストレイルフォグランプが下を向きすぎている光軸調整方法2
• エンジンオイル漏れ止めのおすすめはPlus91評価レ PV2
• 省電源のため自動的に電源をOFFにします2

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

• 本日
• 週間
• 月間

1. 

   省電源のため自動的に電源をOFFにします 2PV

   車にはバッテリーからの電気が必須になっています。また、そのバッテリー自体をエンジン始動時にはオルタネーターにてアイドリングストップ車などほとんどすべての車は充電しています。エンジンのみかかっていて運行…

   もっと読む

2. 

   エンジンオイル漏れ止めのおすすめはPlus91評価レビュー 2PV

   以前、オイル漏れ・オイル滲みが分かりエンジンオイルシーリング剤であるNUTECのOEM版でpitworkのNC81エンジンオイルシーリング剤を使用してみました。 ですが、一時オイル滲み・オイル漏れが止…

   もっと読む

3. 

   Windowsスポットライト画像保存場所と方法 1PV

   Windows10においてロック画面の時に表示される画像がとてもきれいになりました。 この機能は、Windows10以前のバージョンの時には単なるロック画面でした。 そんな綺麗な画像が気になったので、…

   もっと読む

1. 

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

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

   もっと読む

2. 

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

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

   もっと読む

3. 

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

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

   もっと読む

1. 

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

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

   もっと読む

2. 

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

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

   もっと読む

3. 

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

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

   もっと読む

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

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 広告

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

WordPress カスタマイズ カスタマイズ テーマ 不具合 伝えたいこと 備忘録 設定

Search Consoleカバレッジに関する問題解決方法AFFINGERなど

時々、Search Consoleからさまざまなエラー報告内容のメールや問題があります。という通知メール内容が来ることがあります。特に多いのがガバレッジに関する問題があります。という通知メール内容が多…

もっと読む

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

AdSense Stinger6 WordPress カスタマイズ

Stinger6右サイドバー上に別広告を表示する方法

はぁ…。やっと、できた！！って何がという感じですが、 とても使い勝手の良いテーマStingerの最新版Stinger6を選ばせて頂いて、四苦八苦の日々が続いていたわけですが、アドセンス広告は1ページ当…

もっと読む

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

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

ポチップ（pochipp）データのバックアップ方法

ここ数年で2020年にアフィリエイト管理ツールとして、これまでにあったカエレバ・ヨメレバなどの代替ツールとして有名どころとなったポチップ（pochipp）です。ポチップは現在でも開発者のヒロさんが随時…

もっと読む

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

WordPress アップグレード 不具合 伝えたいこと 備忘録

バージョンアップしたらjetpackが連携できず有効化できないエラー

本日、やいやいと思いWordPressのバージョンを4.5.1からそろそろバグや不具合などの情報も出きったのかなぁ…。なんて思いバージョンアップをしました。 そしたら、jetpackが連携できなくなっ…

もっと読む

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

AdSense 伝えたいこと 備忘録 時事ネタ

アフィリエイト、ドロップシッピング、広告の歴史

アフィリエイトが始まってもうすぐ20年くらいになろうかと思います。元祖アフィリエイト提供サイト（ASP）としてはA8netとValueCommerceかと思います。そのどちらにも初めの頃から登録もして…

もっと読む

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

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

Table of Contents Plus（TOC+）目次のCSSカスタマイズ方法

本日、かの有名な目次作成プラグインであるTable of Contents Plus（TOC+）を導入してみました。   でも、・・・・・・。 なんとなくデザインがどうなのかなぁ。的な感じで…

もっと読む

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

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

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

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

¥2,070 （2025/05/15 06:05時点 | Amazon調べ）

Amazon

＼楽天ポイント4倍セール！／

楽天市場

＼ポイント5%還元！／

Yahooショッピング

メルカリ

ポチップ

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

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

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

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

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

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

あなたが訪問してから

⏰ 0 秒経過 🎉

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

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

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

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

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

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

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

• 多要素認証を楽天証券、SBI証券、松井証券などのネット系証券会社やSMBC日興証券など 15件の PV

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

• エクストレイルT32マイナーチェンジ後ステアリング外し方 10件の PV

• スロットルポジションセンサー調整で不安定なアイドリング調整 10件の PV

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

• エンジンオイル漏れ止めのおすすめはPlus91評価レ PV 8件の PV

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

カウントダウンタイマー

おすすめの記事一部広告

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

目次に戻る

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

目次に戻る

目次に戻る