2021年3月28日gomaコメントなしPC、wordpress、アドセンスこのお話は、なぜかアドセンスの余白部分が黄色くなっているのを発見し、CSSコードの追加でわずか3分程で解決した子猫のお話です。※ちなみに「チャッチャと解決方法教えろやヾ(。まとめいつから黄色(コード)だったの??最近、自分のサーバーにアクセスする必要があって、以前このサイト内で書いた「バックアップ記事」を参考にしようと思って、このサイト(ゴマ)のホームを開いたんですね。インデックスページの最初のアドセンス周りに黄色い枠があるのを発見したんです。この黄色い枠はなんぞや?画面を横にすると、ちがった形の黄色い枠になります。なんじゃらほい!?うむむむむっ・・、気になるといえば気になるし、気にならないといえば気にならない・・ゴマ当たり前なのかなそもそも記事自体はアップする前に、プレビューで確認する事はあってもインデックスページから開いて自分のサイトをじっくりと見た事がないから、いつからこんな状態なのかも分からず(-_-)あとはPCからのレイアウト確認だとフルスクリーンだから問題はなくても、スマホから確認する事がないからかも。黄色い枠の原因を考える・・まぁ、アドセンスのレスポンシブ広告がそうさせてるのだろうという考えにはすぐにたどり着きます。さまざまなデバイス・縦横の比率が違う画面に対応して、アドセンスが自動的に伸縮自在に形を変えるのだが、その際にアドセンス側、もしくはこちらのプログラム上で不具合が発生しているという事。アドセンスのコードを確認します。data-ad-format=”auto”></ins>コードの一部の抜粋ですが、先頭の「ins(インサート)」。color(背景色)を呼び出していたんですね。デフォルトが黄色の枠を呼び出していたという事。いくつか方法はあるんだけど・・この問題を解決する為にはいくつか方法があります。そもそもの初期設定の背景色を変更する方法です。colorの指定があります。masonicの場合この赤で囲んでいる部分を好きな色(背景色)に指定してあげれば、謎の黄色枠が変更できるんですね☝ただ普通、背景色といえば白色が一般的なので「#ffffff」の変更で済むのですが、このサイトの様にオサレぶってレンガ調にしていると、少し厄介な事になります。一度試したんですが、僕のサイトの場合だと、レンガ調の背景の上にアドセンスの余白部分に改めてレンガ調の背景を乗せると、これはこれでレンガに切れ目が入って不自然な感じになったんですね。【解決編】カスタムCSS上書きが超楽チン!!別に、問題をややこしく考えないでシンプルに考えましょう。「ins(インサート)」タグが背景色を指定しているなら、カスタムCSSから更に上書き指定してあげればいいだけです。透明色(transparent)に指定すれば、僕のように背景色が不規則な色パターンでも問題ないはずです。}まずはこちらのコードをコピーします。意味は背景色を透明に指定しています。次にwordpreesの管理画面の「外観」から「カスタムCSS」を選択。「カスタムCSS」はthemaによっては元々装備されてないのもあるそうですが、最近のthemaであれば普通はあるらしい・・。先程、上でコピーしたコードを一番下にペーストします。ちなみに僕の場合は、別のタグと干渉しないように強制的な命令をする「!important」をつけています。}最後に「適用ボタン」を忘れずに!これで無事にindexやarchiveページのアドセンス周りの黄色枠が消えました。まとめ今回はカスタムCSSから強制的に指令を出したのですが、ホームページの構成によっては別の箇所で副作用が現れるかもしれないので、変更後はホームページ内を巡回してチェックした方がいいかもしれませんね。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。おっさんのくせに毎日遊ぶ事ばかり考えている。合理的かつ効率を重んじるものの、わびさび情緒に弱く涙もろい。プラチナの現物、アンティークコイン、btc、etc...)酒タバコが大好き。基本精神は自己責任、金がないなら頭を使え。ThemeGrill。