Stinger3でスマホのアドセンスが途中で切れてしまうとき

WordPress個別サポート

Stinger3でアドセンス広告を入れる方法はいくつかありますが、場合によってはスマホで見たときに広告画像の下半分が切れてしまうことがあります。

アドセンスの広告画像が半分切れてしまう
アドセンスの広告画像が半分切れてしまう
検証したバージョンはstinger3ver20140327です。

原因はスマホ用のCSSを定義するsmart.cssです。55行目から次のようにCSSが記述されています。

.kizi img, .wp-caption, .kizi video, .kizi object, .kizi iframe, .kizi table {
    margin-bottom: 20px;
    height: auto;
    max-width: 100%!important;
}

このうち、iframeに対する「height: auto;」がうまく機能しない場合にアドセンス広告の下半分が切れてしまいます。

同じ理由で、投稿に差し込んだYouTube動画もスマホで見ると高さがおかしくなる場合があります。

YouTubeもスマホでうまく表示されない場合も
YouTubeもスマホでうまく表示されない場合も

対処法1:「height: auto;」を削除

お急ぎの方は、smart.cssの57行目の「height: auto;」を削除してみましょう。または次のようにコメントにして無効にしておくと、後で問題が起きたときにすぐに元に戻せます。

.kizi img, .wp-caption, .kizi video, .kizi object, .kizi iframe, .kizi table {
    margin-bottom: 20px;
    /* height: auto; */
    max-width: 100%!important;
}

アドセンスの広告画像が半分で切れずに表示されるようになります。

アドセンスの広告画像が切れずに表示される
アドセンス広告が切れずに表示される

対処法2:iframeに個別の高さを指定

上記の「やっつけ」だとムズムズする方や、問題が起きてうまくいかなかった方は個別のiframeタグに対して高さを指定する方法があります。

たとえば、表示するアドセンス広告が幅300px、高さ250pxの場合、生成されるiframeタグには「height="250"」のような属性が付加されます。

これを目印に次のようなCSSを指定して特定のiframeのみに高さを指定できます。

/* アドセンス広告の高さを調整 */
.kizi iframe[height="250"] {
	height: 250px;
}

smart.cssの最後に追記するか子テーマのstyle.cssなどに入力してください。

「iframe」や「height="250"」を変更すれば記事内(class="kizi")にある特定の属性を持つ特定のタグに対して個別のスタイルを指定することができます。

この方法でも上記の「やっつけ」と同じようにアドセンス広告が切れずに表示されるようになります。ただし、個別のiframeタグのみに機能するので反映させたい広告(またはYouTubeなど)に合わせて「height="250"」や「height: 250px;」を修正する必要があります。

対処法3:アドセンス用のウィジェットを利用

紹介する順番としてはこちらが先かもしれませんが、Stinger3にはアドセンス広告を表示するためのウィジェットが用意されているので、そちらにタグをコピーペーストする方法が安全です。

具体的には「外観」-「ウィジェット」メニューの「Googleアドセンスのスマホ用width300」です。

スマホ用のアドセンス広告を表示するウィジェット
スマホ用のアドセンス広告を表示するウィジェット

ここにテキストウィジェットを追加して、アドセンス用のタグをコピーペーストします。これでスマホで表示したときにアドセンスが表示されるようになります。

ちなみに、PC用の広告エリアはすぐ上の「Googleアドセンス用」を使います。

  • PC用のアドセンス --- Googleアドセンス用
  • スマホ用のアドセンス --- Googleアドセンスのスマホ用width300

このアドセンスの分岐ロジックはad.phpに記述されています。参考にしてください。