だれかの、なにかに、役立てるウェブ制作者YoTaの趣味ブログ

アドセンス 関連コンテンツユニットの背景色などcss調整は難しそう

Googleアドセンスで稼ぎ頭でもある、関連コンテンツユニット。

これは、デフォルトのオプション機能で、並べ方などのレイアウトを設定できます。

カスタマイズ方法

こちらの記事で詳しく紹介がありました。

・関連コンテンツユニットのデザインカスタマイズ方法【Google Adsense】
https://naoyu.net/design-customization-of-related-content-unit/

css調整が難しい

しかし、外部リソースを呼び出すわけなので、cssでゴリゴリにカスタマイズすることが、やはり難しい。

cssで背景色を透明にしたり、細かく色を変えたり、フォント指定などができると嬉しいので、ちょっとだけチャレンジしてみたのですが、やはり無理でした。

jsからのiframe操作も無理

iframeに「google_ads_frame5」というid名。

そして、内部divには「adContent」などのid名。

jsのcontentWindowでiframe内のDOM操作できないか検証してみるも、ダメでした。

外部リソースの読込なので、やはりレンダリングにおいて、イベント定義のできるDOMに含まれないっぽいです。

デベロッパーツールからはもちろんカンタンに編集できるんですが……残念です。

スマホ版は読込のたびに名称の変わるclass名が

スマホ版のほうを見ていると、読込のたびに変わるクラス名もありました。

一義的な要素名の指定ができませんので、これはもうどうしようもないですね……。

読込のコードをいじってみる?

NAVERの投稿Tipsに、こんな記載がありました。

ajaxでDOMにappendした要素に対して、イベントを定義するなどの操作を行う場合は、ajaxでの読み込みが完了したときのコールバック:complete の中で行う。
他のところに書いても、読込み前に評価されてしまって、イベントが定義されない。

もしかしたら、ものすごく色々と頑張ると、なんかいじれるのかもしれません。しかし、関連コンテンツユニットの埋込ソースをいじると、なんだか怒られそうな気がするので、結論としては、「関連コンテンツユニットのcssいじりはできなさそう」が答えかと思います。(ほぼ諦め)

それに、冷静に考えると、広告出稿者のコンテンツを、勝手にいじれちゃうって、かなり致命的な問題なので、カスタムできる仕様になるわけもないんですよね。

できそうなのは、外側をdivで囲って、そこからの指定くらいだと思います。

もし、こうすればcssいじれるぜ!って方法を知っている人いれば、お知らせ頂けると、超うれしいです。

ページ上部に戻る