今まで記事下広告にはTHE THORの推奨通りダブルレクタングルでディスプレイ広告を設置していたのですが、どうやらMultiplex広告が良さそうだったので、置換しました。
すると、PCから閲覧したときに左半分だけしか表示されなかったため、追加CSSで修正しました。
本記事では、変更した広告コード、記述した追加CSSの紹介とその解説をします。
変更箇所
広告コード
class="adsbygoogle" を class="adsbygoogle under-article-ads" に変更。
追加CSS
/* ダブルレクタングルを使う場合削除 */
.rectangle__item {
float: none;
width: 100%;
}
.rectangle__item.rectangle__item-left {
padding-right: 0px;
}
.rectangle__item.rectangle__item-right {
padding-left: 0px;
}
/* ==== */
/* PCレイアウトで広告がバグるのを修正 */
.under-article-ads {
width: 100% !important;
}
/* ==== */解説
ここからは技術的な解説をします。
用語解説をしながら解説するので、初心者の方も是非ご覧ください。
rectangle__item クラスがダブルレクタングル前提になっている
そもそもクラス名からしてそうなのですが。
クラスとは、HTMLの各要素に対してCSSから装飾を適用するためにつけられる名前です。
例えば <p class="str">あいうえお</p> とHTMLに書かれていたら、「あいうえお」という文字列を含むpタグに対して、CSSから装飾を適用できます。
さて、これの中身が float: left; width: 50%; となっていました。
これは、幅を半分にして、左右それぞれに配置するという意味です。
今回はMultiplex広告で幅いっぱいに表示したいため、これらを打ち消すCSSを記述しました。
rectangle__item.rectangle__item-{left,right} クラスにpaddingがついている
これがついていると、ちょっとだけ右にズレます。
同じく打ち消すCSSを記述しました。
.rectangle__item.rectangle__item-right の方は別に直さなくてもいいのですが、left 直したらついでに right も直したくなったので、直しました。
under-article-ads クラスにwidth指定をする
さて、ここまでしたら直るんじゃないかと思ったのですが、なぜかMultiplex広告のwidthがおかしなことになってます。
半分になっていたときのスタイルがGoogle側にキャッシュされているのでしょうか…?
原因はよくわかりませんが、幅を最大にするCSSを記述したところ直ったので、これで解決ということにしておきます。
まとめ
これでTHE THORでMultiplex広告を違和感なく使えるはずです。
ネイティブ広告はWebサイトにうまく溶け込むので、今後の主流になりそうですね。
プログラミングに興味のある方は、私の今までのプログラマ人生を是非ご覧いただけると幸いです。