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

サイト運営
OLYMPUS DIGITAL CAMERA

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

参考 Simplicity 公式サイト

2018年7月以降、最新の「Cocoon」へテーマ変更しています。

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

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

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

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

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

photo by Christopher Ross(リンク切れ)

 

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

ビックバナーがはみ出る原因

「ビックバナー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タグで自動挿入する方法 [プラグイン不要]
WordPressの人気テーマ「Simplicity」は無料テーマとは思えないほど充実した機能を搭載しており、本ブログでも採用しています。 参考 Simplicity 公式サイト ブログの収益性を高めるために広告配置に関しても様...

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

<div style="margin: 0 -24px 15px;">
//ココに「ビックバナー728x90」のコードを記入する
</div>

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

 

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

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

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

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

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

サイト運営
おるくすをフォローする

関連記事

あっとはっく

コメント