今あるもの

怪我と病気で失った物を考え 今あるものでこれから何が出来るのかを考える

【Adsense】はてなブログスマホ用のAdsense表示ズレをなおして見た【初心者用】

スマホで320pxのAdsenseとlinkwithinがはみ出る問題の対処決定版(2014/8版) - UXエンジニアになりたい人のブログ

proになって、色々な設定をやり始めて

自分のような「初心者」の方でも

何とか、やりたい事を

出来るようにしてくれるサイト紹介と

自分の、アウトプットの訓練を兼ねて

覚えた事を、書いていきたいと思います。

 

スマホでのAdsense表示がズレル!

・スマホ推奨バナー320px × 100pxが右にずれている

・どのテーマにしてもずれる

 

そこで、まず何でズレルのかを調べました。

その仕様を丁寧に説明してくれている方がいましたので

その方の通りにやってみました。

 

「ダッシュボード→設定→詳細設定→headに要素を追加」と選択

 

<style>

/* 342px(320px/93.75%)未満の横幅のとき、adsenseを10pxずらす */
@media screen and (max-width: 341px) {
  .mobile-adsense {
    position: relative;
    width: 320px;
    left: -10px;
  }
}

/* 382px(358px/93.75%)未満の横幅のとき、幅を100%にしてスクロールバーを出す */
@media screen and (max-width: 381px) {
  div.linkwithin_outer {
    width:100%;
    overflow:scroll;
  }
}
</style>

 

320pxのAdsenseを貼付けるときは、以下のように、コード全体をmobile-adsenseというクラスがついたdivで囲 むこと(本文中でも記事上でも下でも同様の記述でOK)。レスポンシブルコードを貼付けた場合は、320pxのサイズも対象になります。

<div class="mobile-adsense">
adsenseの貼り付け用コード
</div>

これだけでOK!お試しあれ!

引用元:UXエンジニアになりたい人のブログ

 

もし、私と同じように、ズレてしまっている方は

試してみて下さい!