このお話は、なぜかアドセンスの余白部分が黄色くなっているのを発見し、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の指定があります。
この赤で囲んでいる部分を好きな色（背景色）に指定してあげれば、謎の黄色枠が変更できるんですね☝
ただ普通、背景色といえば白色が一般的なので「#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】投稿に簡単に日付けをつける方法
【wordprees】iPhoneで書いた文章に記述されるコード＜Wbr/＞を一括で消す方法
wordpressの翻訳プラグイン「 Google Language Translator」の導入方法[2018]
ブログの「 サイト名の変更」をしてみる(´･ω･`) （ヘッダー画像の変更）
「 PhotoScape」の使い方、ブログの画像を簡単編集、加工をしよう（wordpress,iphone,iPadの待ち受けも楽々👍)
ロリポップのWPサイトを「簡単、無料、SSL化」でセキュリティをアップさせよう(｀・ω・´) 【2019年】
「Speech Bubble」のアイコンが表示されない時の解決方法（wordpress）
【wordpress】サムネイル（アイキャッチ）上のカテゴリー表示をCSS追加で消す方法-Theme Masonic-