ガジェニュー

~iPhone・格安スマホとか~

【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

       後で読む

szu1
今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かなかったのですが、やっと解決しましたので書き留めておきます。

このブログのAdSenseの構成に関しては前にもエントリーを書いていますが、下記の図のようになっています。
AdSense4この中で右側にあるAdSenseの320×100のバナーがどうしてもはみ出す。今回はこちらの修正になります。

SPONSORED LINKS

iPhoneでAdSenseの表示がはみ出す問題の解決法

こちらには、モバイルバナー(320*50) モバイルラージバナー(320*100)というAdSenseの中でもモバイル用に最適なサイズと言われているものになるのですが、iPhoneの表示サイズは横幅320pxで【stinger5】では左右に10PXずつpaddingが設定されているので単純にいれこむと左側のpadding:10pxのために右側にアドセンスがはみ出します。こうなると見栄えが悪い。スクロールの際にちょっとだけ左右に動いて気持ち悪い。といいことは有りませんでした。

こちらは、style.cssに下記の要素を追記してあげることによってか問題は解消します。

style.CSSに追記するコード

必要な作業はクラスの追加と、対象のphpへの追記だけです。

style.cssには下記を追加します。

/*-----------------------------
iPhoneでAdSenseがはみ出す問題の解消
------------------------------*/
@media screen and (max-width: 341px) {
  .mobile-adsense {
    position: relative;
    left: -10px;
  }
}

続いて、single.phpのAdSenseコードの部分にクラスを設定します。

<?php if(is_mobile()) { //スマホの場合 ?>
    <div class="mobile-adsense">
          //アドセンスのコード(モバイルラージバナー320*100)
    </div>
 <?php } else { //PCの場合 ?>
           //アドセンスのコード(リンクユニット728*15)
 <?php } ?>

このようにモバイルラージバナーのタグを”mobile-adsense”で囲んであげます。

以上で完成です。

カスタマイズのPOINT
@media screen and (max-width: 341px)の記載

この記載なしで、left: -10px;を記載しても他の要素とぶつかってきちんと表示されませんでした。意味としては341px以下の横幅の場合のみ下記を有効にという意味です。おコチラによって341px以下の場合にこのブロックを左に10PX動かすという意味になります。

ということで今回はこちらのコードを使用させて頂きました。反映するとこのように端から端までピッタリ表示されます。綺麗ですね。
sumnail (2)
このAdSenseはみ出す問題の解消の方法として、他のサイトだと#warapperのpaddingを0にすると書かれていたのですが、それをしてしまうとものすごく窮屈で見にくく醜い見た目になってしまいます。STINGER自体がかなり見やすいレイアウトになっているのでユーザーさんのためにも、このあたりの基本的な設定はあまり変えないほうがいいかと思います。

参考にさせていただいたカスタマイズは「はてなブログ」向けでしたが、そのまま使用しても問題はないようです。はてなブログとはメインのエリアの指定方法が異なるみたいなので341pxを331pxにしたほうが良い気もしますが、アクセスの多いiPhoneだけを考えればいいやということで今回は無視します。

以上

レスポンシブデザインのサイトはカスタマイズがなかなか骨が折れます。(自分のレベルが低すぎるだけですが。)

まぁ、今回も何とかなってよかった。めでたしめでたし。

てな感じで。

関連記事

今回参考にさせて頂いたサイト様
UXエンジニアになりたい人のブログ

 - STINGER5, WordPress , ,

  関連記事

201509
【アクセス数報告】2015年8月のPVとアフィリエイトの収益とか

最近ずいぶん涼しくなって来たのに、今日は蒸し暑いですね。今年は残暑が続くのだろう …

sum-adsence
【STINGER5カスタマイズ】AdSenseセンスの表示を色々カスタマイズした備忘録

今回は、メインのブログを「STINGER3」から、レスポンシブデザイン対応の「S …

sicon_1r_192_020215_080729_PM
【アクセス数報告】2015年1月のPVとアフィリエイトの収益とか

早いもので2015年も2月に突入ということで、1年の12分の1がすでに消費されて …

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

icon_1r_192
【アクセス数報告】2015年2月のPVとアフィリエイトの収益とか

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

images_111114_064856_PM
カエレバをアイコンフォントを使ってカスタマイズ(SVGファイルもあるよ)

以前、カエレバのCSSカスタマイズで、カスタマイズしたカエレバの表示ですがスマホ …

simages_121514_015526_PM
【stinger5カスタマイズ】記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法

今まで、「Quick AdSense」というプラグインを使用して文中に置いた「m …

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です