2020年1月19日
アドセンス,黄色

 

このお話は、なぜかアドセンスの余白部分が黄色くなっているのを発見し、CSSコードの追加でわずか3分程で解決した子猫のお話です。

子猫ってもちろんの事ですが・・

 

※ちなみに「チャッチャと解決方法教えろやヾ(。`Д´。)ノ!」と、お急ぎの方は【解決編】へlet’s la go〜♪

いつから黄色(コード)だったの??

 

最近、自分のサーバーにアクセスする必要があって、以前このサイト内で書いた「バックアップ記事」を参考にしようと思って、このサイト(ゴマ)のホームを開いたんですね。

ふとインデックスページの最初のアドセンス周りに黄色い枠があるのを発見したんです。

アドセンス,黄色

はて? この黄色い枠はなんぞや?

 

画面を横にすると、ちがった形の黄色い枠になります。ふと気になり今度はiPad から見てみると・・・

アドセンス,黄色

あらまっ! なんじゃらほい!?

 

うむむむむっ・・、気になるといえば気になるし、気にならないといえば気にならない・・

ゴマ
当たり前なのかな

 

そもそも記事自体はアップする前に、プレビューで確認する事はあってもインデックスページから開いて自分のサイトをじっくりと見た事がないから、いつからこんな状態なのかも分からず(-_-)

あとはPCからのレイアウト確認だとフルスクリーンだから問題はなくても、スマホから確認する事がないからかも。

いや!この前のイヴォークの車検の時にスマホで見返した時には気にならなかったなぁ🤔

しかし何度確認しても黄色い枠は消えず・・

黄色い枠の原因を考える・・

 

まぁ、アドセンスのレスポンシブ広告がそうさせてるのだろうという考えにはすぐにたどり着きます。

つまりは、さまざまなデバイス・縦横の比率が違う画面に対応して、アドセンスが自動的に伸縮自在に形を変えるのだが、その際にアドセンス側、もしくはこちらのプログラム上で不具合が発生しているという事。

まずはアドセンスのコードを確認します。

<ins class=”adsbygoogle” style=”display:block” data-ad-client=”ca-pub-*****” data-ad-slot=”*****” data-ad-format=”auto”></ins>

 

コードの一部の抜粋ですが、先頭の「ins(インサート)」。意味は「挿入する」ですが、アドセンスコード側がレスポンシブという配置を伸縮自在にする都合上、その余白の可能性部分を自動的に僕のサイトの初期設定値のbackground color(背景色)を呼び出していたんですね。

つまりはデフォルトが黄色の枠を呼び出していたという事。

いくつか方法はあるんだけど・・

 

この問題を解決する為にはいくつか方法があります。そもそもの初期設定の背景色を変更する方法です。

僕のThema(masonic)の場合だと、「style php」のreset周辺にBackground colorの指定があります。

アドセンス,黄色
masonicの場合

この赤で囲んでいる部分を好きな色(背景色)に指定してあげれば、謎の黄色枠が変更できるんですね☝

ただ普通、背景色といえば白色が一般的なので「#ffffff」の変更で済むのですが、このサイトの様にオサレぶってレンガ調にしていると、少し厄介な事になります。

一度試したんですが、僕のサイトの場合だと、レンガ調の背景の上にアドセンスの余白部分に改めてレンガ調の背景を乗せると、これはこれでレンガに切れ目が入って不自然な感じになったんですね。

ゴマ
意味が分かんないよ

 

確かに! これはトラブルを抱えた人にしか分からないと思いますよ☝️ いつか誰かの為です

 

しかも、phpファイルをローカル環境で変更して、サーバーにアップロードしなきゃいけなかったりと地味にめんどくさい( ´Д`)y━・~~

で! 結局、一番簡単なのが・・

【解決編】カスタムCSS上書きが超楽チン!!

 

別に、問題をややこしく考えないでシンプルに考えましょう。

「ins(インサート)」タグが背景色を指定しているなら、カスタムCSSから更に上書き指定してあげればいいだけです。

しかも透明色(transparent)に指定すれば、僕のように背景色が不規則な色パターンでも問題ないはずです。

記述の仕方は超絶簡単です(`・ω・´)

ins{ background-color:transparent; }

まずはこちらのコードをコピーします。
意味は背景色を透明に指定しています。

次にwordpreesの管理画面の「外観」から「カスタムCSS」を選択。

「カスタムCSS」はthemaによっては元々装備されてないのもあるそうですが、最近のthemaであれば普通はあるらしい・・。

先程、上でコピーしたコードを一番下にペーストします。

ワードプレス,アドセンス,黄色

ちなみに僕の場合は、別のタグと干渉しないように強制的な命令をする「!important」をつけています。

ins{ background-color: transparent !important; }

最後に「適用ボタン」を忘れずに!

これで無事にindexやarchiveページのアドセンス周りの黄色枠が消えました。

まとめ

 

今回はカスタムCSSから強制的に指令を出したのですが、ホームページの構成によっては別の箇所で副作用が現れるかもしれないので、変更後はホームページ内を巡回してチェックした方がいいかもしれませんね。

そう、結論としてはホームページも作りっぱなし・書きっぱなしではなく、たまには自分のサイトも見直してあげましょう!

ゴマ
自分自身の「心」も、内観をして修正できる時間的余裕を持てるといいかもね☝

 

いい心がけです~(=^・・^)ヾ(^^ )

 

アドセンスの余白(背景)が黄色くなってしまう時の簡単対処法【wordprees】

投稿ナビゲーション


コメントを残す

メールアドレスが公開されることはありません。