なんか色んな意味で微妙な記事です。あんまり参考にしない方がいいと思います。（2020/9/7）
小ネタ記事。
Google AdSenseには「インフィード広告」ってやつがあります。
AdSenseの広告自体を画像として掲載するのはちょっと危険っぽいので塗りつぶさせてもらってます。
こんなやつ。
今回はこれの見た目・没入感をアップさせて、さらにはクリック率も上げちゃおう！というのがお題目。
利用規約、ポリシーには抵触しないはずです。その説明もします。
やりたいこと
「インフィード広告」はページ内のあるひとまとまりの要素が繰り返し現れる場所の合間に、同じようなデザインで勝手に入ってきてくれる広告です。もっと言うと、ほとんどが記事一覧のループの合間に入ってきます。
さっきもそうですね。
自分のサイト、ブログのデザインに徹底的に溶けませられるのが最大のメリットではあるんですが、それはつまり「サイト内のコンテンツだと思ってクリックしたのに広告だった、騙された」と感じるユーザーもいるかもしれない点には留意しておきましょう。
ちょっと逸れました。
今回やりたいことは簡単です。
勝手にデザインを似せてくれるとはいえ、デフォルトだと完璧じゃない。それを、
こうしようということです。
どうですか？より周りのデザインと似るようになって、まるで広告とは思えないユーザー体験になると思いませんか？
作業内容としては
- デベロッパーツールで広告周辺のデザインの適用先要素を確認
- まわりのフィード（自分の記事一覧など）のデザインをcssで追記
だけです。楽勝ですね。
ちなみに僕のブログではインフィード広告はなぜかモバイルでしか表示されないので（自作ユニットじゃなくて自動広告でしか使ってません）、今回はメディアクエリしたモバイル用のcssだけをいじる前提です。
※この記事の原稿を書いた時点ではたしかにモバイルでしか見たことなかったんですが、スクショを撮ろうと思ったらPCでも普通に表示されてました。
利用規約やポリシー違反について
「AdSenseポリシーに違反しないの？」
っていうところですが、ざっと調べた感じ大丈夫なんじゃないかな？と思ってます。
まず「禁止されているコードの改変方法」ですが、よく読んでみてもここには該当しそうにありません。
この辺のポリシーページをちょっと読めば分かりますが、基本的にGoogleが禁止しているのは広告コード自体の改変です。唯一の例外としてレスポンシブ対応のための改変のみポリシー違反にはなりませんが。
もっと言うと、
text-align: center;とか、好きなCSSを与えること自体は普通にみんなやりますよね？やっていることはそれと同じレベルな気がしているので全然問題ないと思います（むしろそういう場合は<div>で囲んだりするので「広告コード自体の改変」という意味では危険度的にはより高い気がする）。
と言いつつ、気になることがないかと言えばそれはちょっと嘘で、
「サイトのコンテンツと区別が付きにくくなるのはやめて」っていうこれまた超微妙なニュアンスで書いてあるものも発見してしまいました。
でもさ、もともとネイティブ広告ってそういう趣旨じゃん！？と激しく思います。しかもインフィード広告なんてその最たる例じゃないですか。それを自分たちで用意しておいて「サイトと似るのはよくありません」って言われても「？」って感じです。
一応実験結果というか僕の状況報告として、この作業を完了させてからこの記事執筆時点で4ヶ月近く経過してますが、ペナルティ、通知、その他なにかいつもと変わることは一切起きてません。っていうのがあるので僕はポリシー違反にはなっていないと勝手に判断してます。
「AdSenseのデザインをcssでいじる」ってほとんど聞いたことないし、ある意味いい感じの人柱になっているような気もするので、そういう情報として発信するのもありかなと思ってます。笑
→追記：そりゃそうでしょう、広告自体のデザインを公式が提供している方法以外で変更するのは明確なポリシー違反ですからｗ
このときは認識が甘々でしたが、そのまま残しておきます。
このセリフ好きじゃないんですが、まあ「いずれにしろ自己責任で」って付け加えざるを得ないですね。。
実際にやってみる
作業開始。
さっきも言いましたがモバイル環境にしているのは（現在は）特に意味はありません。
まずはPCでブラウザのデベロッパーツールを開きます。
ここがAdSenseの場所。ソースでも1行だけ明らかに違うのですぐ見つけられます。
触ったら確認できますね。今回のいじる対象要素はここです。もっと言うとcssで指定するクラス名は「google-auto-placed」です。
デベロッパーツールでどんどん深く見ていけば分かりますが、AdSenseの要素はどんなに細かく分解していっても目に見えているそれぞれのパーツごとは触れないようになっています。つまり「画像」にcssを適用したり、「広告の文章」にcssを適用したりはできないということ。広告が改変されるの防止でしょう。
しかし一番外側であるクラス（google-auto-placed）だけはどうしようもないので、今回はここに着目してデザインを適用させるというわけです。
そしたら今度はまわりの記事一覧から適当に１つ選んで、デザインのcssを確認。
ふむふむ。僕のブログのここの場合は、
.entry-card-wrap {
background-color: #fefefe;
border-radius: 4.3px;
margin-bottom: 1em!important;
box-shadow: 0 3px 17px -6px rgba(0,0,0,.23);
}というcssになっていそうです。
あとは簡単。
さっきの「google-auto-placed」にそのデザインのソースを丸コピするだけ。
.google-auto-placed {
height: 105.4px!important;
background-color: #fefefe;
border-radius: 4.3px;
margin-bottom: 1em!important;
box-shadow: 0 3px 17px -6px rgba(0,0,0,0.23);
}※高さのみなんか調整した記憶があります。heightは手打ちしたような…。
コピーして、デザインが揃っていることが確認できました。
ちなみに、こうなってくると「画像のサイズをアイキャッチに揃えたいな…」とか色々出てきますが、それはさっきも言ったように不可能です。我慢しましょう。
おわり。
あとがき
ちょっとした工夫を伝えたいだけの記事だったのに、まさか「人柱の状況報告要素」まで含まれているとは思いもよらなかった。笑
まあそもそもクリック率ももともと大したことない広告ユニットだし、こんなことしているくらいなら別の記事を1本書くほうが500倍マシなんでしょうが、実験報告という意味ではきっと価値があるので、やっぱり何事もやってみるのがいいなと思いました。
この先なにか異変があったら追記します。もちろんあって欲しくはないんですけどね！！
それではどうもです。