iphoneでアドセンスをはみ出さずに表示させる方法

   2014/06/26

*テンプレートGushでの話です。
他のテンプレートでも参考にはなると思います。

a0001_011708_m

*縦長でサイトを見た場合の話です。

今後iphoneも解像度が上がって横幅も気にならなくなってくるかもしれません。が、私が今使っているiphoneはサイトを表示するときの横幅が320pxらしく、Gushのデフォルトの設定ではグーグルアドセンスがはみ出してしまいます。見た目も良くないですし、スクロールするときに横にぶれて勝手が悪いです。

なので、グーグルアドセンスがはみ出さないようにカスタマイズしてみました。
広告サイズは300×250のレクタングル(中)とします。

サイドバーの上に表示されるアドセンス

PCではコンテンツエリアの右上に表示されるサイドバーのアドセンス。
スマートフォンでは左のメインスペースの下になります。

320pxのiphoneで見るとこんな感じ

iphonead1

右側が切れています。
これは規約に引っかからないのかな?どうなんだろう?
ここはスクロールする時にぶれないので支障は無いのですが、気持ち悪いので直します。

Gushのスタイルシート

Gushはレスポンシブデザインになっており、まずスマートフォン用にデザインされ、その後タブレット端末やPCでの表示で最適化されるように調整してあるようです。

#contentsなど同じ項目が複数個あるのはその為です。

上のほうで変更した値がPCなどで反映されない場合、同じ項目が下のほうにあり上書きされているという事なので、そちらを変更する必要があります。

スタイルシートを調整する

色々やった結果、すんなりいった方法をご紹介します。

#contents の横幅を広げます。

デフォルトではこうなっています。

/*--------------------------------------
  コンテンツエリア
--------------------------------------*/
#contents {
	width: 90%;
	margin: 24px auto 0 auto;
	text-align: left;
	line-height: 1.6;
}

widthが横幅です。90%に設定されています。
これを、

/*--------------------------------------
  コンテンツエリア
--------------------------------------*/
#contents {
	width: 96%;
	margin: 24px auto 0 auto;
	text-align: left;
	line-height: 1.6;
}

96%に変更します。

これでiphoneからの見た目は大丈夫ですが、タブレットからだと横に広がりすぎてしますので、そちらの方も設定します。

/*--------------------------------------
  768px コンテンツ
--------------------------------------*/

#contents {
	text-align: left;
	width: 90%;
}

横幅が設定されていないので、width: 90%;を追加します。
PCの方はwidth: 1040px;が最初から指定してあるので大丈夫です。

もうひとつ。このままだとアドセンスが左端に寄ってしまうので、

#sub .side_ad {
	text-align: center;
	margin-bottom: 24px;
}

#sub .side_adを探して、赤文字のtext-align: center;を付け加えてください。

保存してスタイルシートを更新します。
これでアドセンスがはみ出さずに収まりました。
右端の線もちゃんと見えます。

iphonead2

記事下に表示されるアドセンス

もうひとつあります。
個別記事の下に表示されるアドセンスです。
こちらはサイドバーの上よりも一つ多く枠に囲われている状態ですので、更にはみ出しています。

iphonead3

上の方法で横幅を広げることによりずいぶん改善されますが、それでも少しはみ出してしまいます。

iphonead4

折角なのでこちらも綺麗にしたいと思います。

スタイルシートを調整する

記事下アドセンスのタグが用意されているのでこれを編集します。

/*--------------------------------------
  記事下広告
--------------------------------------*/

#entry_footer_ad {
	margin: 10px auto;
}

marginはそのコンテンツの外側の余白を指定するものです。
この書き方ですと、
margin: 上下の余白 左右の余白;
となります。

上下には10pxの余白を。左右には自動で。となっているのですね。
この値、マイナスも指定できます。
今回は左にはみ出させたいので、マイナスを使います。

/*--------------------------------------
  記事下広告
--------------------------------------*/

#entry_footer_ad {
	margin: 10px -8px;
}

#entry_footer_adは、タブレットとPCの方でも個別に指定してあるのでここだけの変更で大丈夫です。
保存して更新します。

綺麗になった~!

iphonead5

ひとまずこれで良いのではないでしょうか?

おつかれさまでした。

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

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。