Simplicityで記事カラム幅やレイアウトを変えず marginマイナス値を指定してビッグバナー728×90がはみ出るのを防ぐ方法

スポンサーリンク

本ブログ「あっとはっく」はWordPressで運用されており、テーマは「Simplicity」を使っています。

参考 Simplicity 公式サイト

テーマのデフォルト設定では、記事カラム全体が740pxで本文の横幅が680pxとなっているため、本ブログも長い間このレイアウト設定のまま記事を作成していました。

ただ最近、Google AdSenseのビックバナー728×90を配置しようとすると、「Simplicity」は標準で記事本文のpaddingが左右29pxで設定されているため、ビックバナー広告の右側がはみ出てしまう現象に悩んでいました。

参考 Google AdSense – 広告サイズに関するガイド

いろいろ調べた結果、記事カラムや本文の横幅を変えずとも、広告のmarginにマイナス値を指定することで解決できる方法を見つけたので紹介します。

photo by Christopher Ross

スポンサーリンク

幅を変えずにビックバナー728×90を配置する方法

下記より、まずビックバナーがはみ出る現象とその原因を解説した上で、marginを調整することで解決する方法を紹介します。

発生している現象について

まず、本記事で取り上げている「ビックバナー728×90の右側がはみ出てしまう現象」について說明します。

当ブログではh3タグ前にビックバナー728×90を設定していますが、記事カラム全体の枠に収まりきらず、右側が中途半端にはみ出てしまいました。

この状態は見栄えが悪いだけでなく、Google AdSenseの規約にも抵触する恐れがあり、非常によろしくない状況となっていました。

原因について

「ビックバナー728×90の右側がはみ出てしまう現象」の原因は、単純に「幅不足」です。

「Simplicity」テーマのデフォルト設定のレイアウトでは、

記事カラム全体:740px

本文の横幅:680px

記事本文 padding:左右29px

となっているため、「ビックバナー728×90」を記事本文中に配置しようとすると、記事カラム全体が786px(728px + 29px + 29px)以上必要であることが分かります。

以上より手っ取り早い解決策は、記事本文の幅やpaddingに余裕を持たせるようにCSSを変えることです。が、そうなるとすべての記事のレイアウトが変更されてしまい、過去記事の修正が発生するため面倒です。

そのため今回はサイト全体のレイアウトは変更せず、「ビックバナー728×90」のmarginにマイナスの値を指定することで原因を解決できる方法を紹介します。

marginでマイナスの値を指定する

まず記事本文に設定している「ビックバナー728×90」のソースを開きます。

この部分はブログによって広告のコードを記載しているファイルが異なるため、自身の環境に沿ったソースを準備して下さい。

例えばボクの場合、h3タグ前に自動的にビッグバナーが表示される設定をしているため、子テーマのfunctions.phpにビッグバナー広告ユニットのコードが記載されています。

関連記事

Simplicity(WordPress)でGoogle AdSense広告をhタグで自動挿入する方法 [プラグイン不要]

次に、広告ユニットのスタイルとしてdiv要素を使ってmarginでマイナスの値を指定します。

ファイル更新後、再びブログ本文のビッグバナー広告を表示してみると、この通り記事本文カラムに収まるように改善されました。

〆:AdSenseの規約違反に気を付けよう!

以上、說明でした。

本記事で取り上げた「Google AdSense広告がはみ出る」事象以外にも、「ブログのメニューと広告が被っている」・「不正に広告クリックを誘導する配置となっている」等を理由にAdSense規約違反となり、広告配信がストップしてしまう事例があります。

参考 Google AdSense – プログラム ポリシー

もし少しでもAdSense表示に問題が生じていれば、すぐに解決するよう気を付けましょう。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

あわせて読みたい