ルクセリタスでアドセンスが見切れて左右に空白が出来る場合の対処法

WordPress

今回はWordPressの人気無料テーマのLuxeritas(ルクセリタス)を使用した時に、アドセンス広告をウィジェットに入れた場合に広告が見切れてしまう時や左右に空白が出来てしまう場合の対処法を紹介します。(主にスマホで)

ルクセリタスとは?

ルクセリタスは「るな」さんという方が制作しているWordPressの無料テーマです。SEO対策関連が非常に強く、PWAに対応、AMP対応。カスタムのし易さ、完全レスポンシブ対応。そしてスピードが超速い。とにかく扱いやすく高機能で個人的に最もおすすめなテーマです。しかも「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用が可能です。

Luxeritas は SEO 最適化済み、多機能なのに高速な無料の WordPress テーマです。

詳しくはルクセリタス公式ページより。

アドセンスが見切れてしまう場合の調整

恐らく大抵の人は広告を掲載する場合広告/アドセンスウィジェットを使っているかと思います。
このウィジェットの設定で「true」と「false」を使えばレスポンシブかサイズ固定かを選ぶ事が出来ます。
しかしそのままの設定だと「true」だと広告が見切れてしまう、「false」だと左右に空白が出来てしまう場合があります。(主にスマホで)

イメージ
イメージ

これを広告が見切れずに画面幅限界まで広がり空白もない下記の様な状態にしたいと考えている方は次のCSSを追加して下さい。

イメージ

広告を画面幅ピッタリにするCSS

広告/アドセンスウィジェットの設定は「true」にした状態でスタイルシートに下記のCSSを記述します。

/*スマホad調整*/

@media screen and (max-width: 500px) {
 .ps-widget {
  overflow: visible;
 }
}

広告/アドセンスウィジェットのCSSクラスは「ps-widget」です。これをスマホ端末限定で「overflow: visible」を使い、ボックスに収まらない内容をボックスからはみ出して表示させます。

falseにすると?

<script async src=”//exsamplepage2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-client=”ca-pub-XXXXXXXXXXXXX”
data-ad-slot=”0000000″
data-ad-format=”auto”
data-full-width-responsive=”false”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

「false」にすると上記のグーグル広告コードの7行目の「data-full-width-responsive=””」部分に「false」が入ります。

これはレスポンシブにしないという意味です。

アドセンスはレスポンシブ広告が最も効果があるといったデータが出ているのでなるべくこの設定は避けたいところです。

しかし何らかの原因で先ほど紹介したCSSで広告が綺麗に収まらない場合は止むを得ず「false」使うしかないでしょう。(見切れるよりはマシなので。)


以上が「ルクセリタスでアドセンスが見切れて左右に空白が出来る場合の対処法」でした。

収益最適化では広告の見え方も重要な要素となるので同じ様な状態となっている方はすぐに対処しましょう。

2020年5月8日WordPressLuxeritas,WEB,WP

Posted by KT