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もスマホでうまく表示されない場合も

スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

対処法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に記述されています。参考にしてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート