IT便利帳

コンピュータやタブレット端末の便利な使い方やこれは知らなかったといったことを紹介します。

Google Adsense広告の右側がはみ出しているのを調整する方法

      あとで読む   はてブする

Google Adsense

スマートフォン(スマホ)でブログを読む時によく見かけるのが、Google Adsenseなどの広告の右端が若干はみ出ていることです。

最近はスマホのサイズが大きくなったので、はみ出ることが少なくなりましたが、以前のスマホ、例えばiPhone5やiPod Touchなどではサイズが320pxなので、はみ出ている広告を良く見かけます。

ちょっとだけ右に寄って画面から切れているのって気になりますよね。僕の経験上、広告は綺麗に揃っている方が読んでもらえる傾向があります。

少しだけの設定で微調整できるので、ぜひお試しください。

スポンサーリンク

広告(Google Adsense)が右にはみ出している例

広告が右にはみ出している例

広告が右にはみ出している一例です。一番右側を見てもらうと少しだけ右にはみ出しています(赤い枠参照)。

この広告はGoogle Adsenseの320×100です。この他320×50も同様にはみ出すことが多いです

これは画面のサイズが320pxで、広告の幅も320pxだからです。左側に10px分余白(margin)を設定しているので、その分右側に10px分切れているのが一般的です。

ではどう直すのでしょうか。一番簡単な方法を紹介します。

 

スポンサーリンク

右にはみ出した広告(Google Adsense)を修正

上下の余白などやスポンサーリンクの記入などもありますが、まずは右にはみ出した分を修正します。

<div style=”margin-left:-10px;“>
Google Adsenseコード
</div>

これだけです。Adsenseコードに<div style=”margin-left:-10px;“>~</div>で挟んであげるだけで左に詰めてくれます。-10px分左に詰めるという意味です。

たまにこの修正をしても、まだ左に余白がある場合があります。その時は、-10pxを-20pxにしたりして微調整してあげてください。保存し再読込みすると修正されます。

広告が綺麗に表示されている例▲-10px左に詰めたことで、広告が綺麗に表示されている例

 

上下余白とスポンサーリンクを入れた形

 

余談ですが、僕が広告を表示させる時には、誤クリックを防ぐために上下に余白を、そして同じく誤クリックを防ぎ広告であることを表す「スポンサーリンク」を入れています。

その場合は下のように記入しています。

<div style=”color:#696969; padding-top:40px; margin-left:-10px; padding-bottom:30px;“>
スポンサーリンク<br>
Google Adsenseコード
</div>

この設定が絶対ではありませんが一応書いておきます。

広告の上の余白に40px(padding-top)、下の余白に30px(padding-bottom)入れています。上下はだいたい30~40pxあけています(場所によって数字は異なります)。これが正しいのかはわかりませんが、誤クリックは絶対にさせないように、それぞれ設定して確認してみてください

そして「スポンサーリンク」をグレイ(color:#696969)で表示させているという意味です。

先ほど上で紹介した左に10pxつめています(margin-left:-10px;)。

これが僕個人で設定している方法です。他にも何通りもの方法があります。色々試して、自分が納得できる設定にしてください。

 

最後に

スマートフォンで見た時に広告(Google Adsense)が右端にはみ出しているのを調整し、綺麗に表示させる方法をご紹介しました。320×100、320×50でよく見かけます。

設定方法はいたって簡単。それぞれテーマが異なるので、-10pxなのか-20pxなのかはわかりません。だいたい-10pxです。設定し直して微調整してみてください。

これが出来ると左右がピタッと揃います。ぜひお試しください。

【関連】記事中でもAdsenseをPCとスマホで切り替えOK!レスポンシブ広告ユニット

【関連】Google Adsense1アカウントで複数サイトを追加登録する方法

【関連】[Google Adsense]テキスト広告の色を最適化してみました

「いいね!」で
最新情報をお届け!

Twitter でIT便利帳を

 - adsense・アフィリエイト

スポンサーリンク

注目キーワード

スマモバ

U-NEXT

Kindle Unlimited

  関連記事

Google Adsense
Google Adsense1アカウントで複数サイトを追加登録する方法

複数のサイトやブログを運営している、または運営しようという方も多いと思います。僕 …

Google Adsense
[Google Adsense]テキスト広告の色を最適化してみました

昨日の「[WordPress]テキストリンクの色を変更→クリックされやすくなるら …

phg-affriate-fukusu-websites
[複数サイト運営者用]iTunes Storeアフィリエイト(PHG)に別ブログサイトを追加する方法

複数ブログサイトを運営している人は、iTuens Storeアフィリエイト(PH …

Google Adsense
記事中でもAdsenseをPCとスマホで切り替えOK!レスポンシブ広告ユニット

Google Adsenseを記事中に挿入するのにAdMoreというプラグインを …