[Bogger]テーブルタグをつかうダブルレクタングルだとiPhone5とかで横スクロールが出る場合がある件

テンプレートはVaster2です。 気付かないほうが幸せでしたが、気付いてしまったので直すしかないですね。

追記:2017年10月23日

久しぶりにiphone5サイズでレイアウトを確認したところ、ふたたび横スクロールの発生を確認しました。 記事を書いている時点では気付かなかったことがあったようです。

検証不足ですが、以下を記述すればとりあえず横スクロールは消えます。

CSSのレスポンシブデザインの下にある .content-wrapperのなかに overflow:hidden;を記述

.content-wrapper{
overflow:hidden;
}

追記おわり

発生状況

chromeの検証機能でスマホサイズをiPhone5にしたところ、横スクロールが発生していました。 横幅320pxのスマホ (320px以下？)で発生しているようです。

とりあえず320pxのサイズを無視すれば問題は発生しないようなので、このままでもいいかとも思いましたが、2016年に横幅320pxのiPhoneSEが発売しているということもあり、対策したほうがいい状況のようです。

原因

自分はテーブルタグを使ってダブルレクタングルを記事下に設置しており、PCで2個、スマホのとき1個表示するようにしていますが、どうやらこれが原因のようです。

いろいろ調整をして横スクロール発生がでないようにもできましたが、アドセンスの表示が微妙だったため、テーブルタグ使用によるダブルレクタングルをあきらめ、ほかの方法をとることにしました

解決方法

準備

こちらのサイトを参考にさせてもらいました。Blogger用Vaster2を簡単にカスタマイズしてみる|休日の空間レスポンシブ広告コードを修正する方法 - AdSense ヘルプ アドセンスコードの修正はレスポンシブ広告ユニットのみで許可されているので、レスポンシブ広告ユニットを最低1個取得してください。

スマホの時に消える方はレスポンシブユニットであることが前提です、また、これは好みですが残る方もレスポンシブユニットにしておく方が何かと便利だと思います。

自分は細かく管理していないので、1個のレスポンシブユニットのコードを使いまわして、ダブルレクタングにしました。

HTMLを編集します。必ずバックアップを取ってから作業してください。

CSS

参考にしたコードから変えたところは css の2か所あるbetweenをaroundに、@media screen and (max-width: 540px) を@media screen and (max-width: 768px)にしました。

.ad-entry-bottom{display:-webkit-flex;display:flex;-webkit-justify-content:space-around;
justify-content:space-around;}
.adslot_1 {display:inline-block;width: 300px;height: 250px; }

@media screen and (max-width: 768px){
.ad-entry-bottom{-webkit-justify-content:center;justify-content:center;}
.adslot_1{display:none;}
}

-webkit-justify-content:   justify-content:

のところは

space-between;
space-around;
space-evenly;

と、いずれかに変えると、ダブルレクタングルの位置（間隔）の変更ができます。

補足（蛇足）

これは検証不足なので必要ないかもしれません。（レスポンシブユニットだと必要ない？）

Vaster2はスマホ表示（デフォルトで768px以下）のとき左右に15pxずつのpaddingがあります。

このままでは320px表示のとき横幅300pxのアドセンスが表示できない恐れがあるので、一応対策をしておきます。

cssにこれを貼り付けました。

@media screen and (max-width: 320px){
.post-body{
padding:0 9px;
}

img{
max-width:100%;
}
}

左右のpaddingは10pxあればOKですが、広告によっては左右に1pxの枠があるものがあったので余裕をもって9pxとしました。（枠がないと302pxで表示されることもあるようですが……）

imgのところのmax-width:100%;はなくてもいいと思いますが念のため記述しました。

貼る場所はどこでもいいと思いますが、いろいろ影響がありそうなときは ]]></b:skin> の直前に貼るのがいいのではないでしょうか。

HTML

<div class="ad-entry-bottom">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- left -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-**********"
     data-ad-slot="**********"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- right -->
<ins class="adsbygoogle adslot_1"
     data-ad-client="ca-pub-**********"
     data-ad-slot="**********"
     data-ad-format="rectangle"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

は1個あればいいようなの1個削りました。

このコードをHTML2TEXTなどで実体参照にしてから貼り付けました。 (HTML2TEXTでは”空白も変換する”のチェックを外して変換します)

アドセンスコードをそのまま貼ると、Bloggerではエラーが出るのでasyncをasync='async'に変えて貼り付けていましたが、今回は、chromeの検証機能でエラーが出たので実体参照にしてから貼り付けました。

async='async'のままでも恐らく問題はないと思いますがどうなんでしょうか？

Responsinator

今回、chromeの検証機能にくわえて、検証作業にResponsinatorを使いました。

お客様の広告コードは……

アドセンスがの管理画面で

お客様の広告コードは過去7日間で、承認していないウェブサイトに何度も表示されました。収益の損失を防ぐには、アカウント設定にアクセスして所有するサイトを承認し、広告を表示して下さい

というメッセージが出る場合があります（というかでました）

検証作業でResponsinatorを使うと、 自分の広告コードが第3者のサイト(http://www.responsinator.com/)で表示されることになるようです。

自分の管理しているサイトではないので”表示しない”をクリックすればいいようです。

最後に

テーブルタグのままでいろいろ調整をしましたが満足する表示にならなかったので、display:flex;を使う方法をとりました。

記事プレビューのときに横スクロールが出る場合がありましたが。公開後の記事では問題ないようです。

今後のカスタマイズでまた問題が出るかもしれませんが、その時はまた修正しようと思います。

Vaster2はカスタマイズの楽しさがあります。でも、カスタマイズのたびことに確認しないと後々大変ですね。

参考サイト

Blogger用Vaster2を簡単にカスタマイズしてみる|休日の空間

レスポンシブ広告コードを修正する方法 - AdSense ヘルプ