昨日の投稿でスマホ表示時の横揺れ問題について書きました。久しぶりのIT系記事で我ながら悦に入っていたわけです。
[STINGER5]スマホ表示時に横揺れが発生する原因と解決策
すると数時間後、えじさん（@ejinote）がそれ以上の素晴らしい記事を書いてくれました！
原因の確認方法が記載されています！
何がすごいって、まずタイミング。私が記事を投稿して数時間ですよ！私この記事書くのに3時間かかってます。
それなのになんて書くの早いんだ！と感動！このボリューム、私が書いたら、確実に日付変わってますﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ
そして内容！
私は気になったブログをCromeのDeveloper toolsのEmulationを使って一個一個手作業で見てたわけです。
それがなんと！URL入力だけでわかるんですよ！ΣΣ(ﾟдﾟlll)ｶﾞｶﾞｰﾝ!!
いやー、気になったことは記事にすると、答えを教えてくれる人が現れるんだ！と感動して、スマホ見ながらニヤニヤしちゃいました。
嫁さんに「気持ち悪っ」と言われましたけどね(´･ω･`)ｼｮﾎﾞｰﾝ
今日一番書きたかったのはえじさん教えてくれてありがとう！っていう感謝の気持ち。これ大事。
これだけではちょっとボリューム少ないし、私も書いてて物足りないので、残りはスマホ広告の貼り方を書いておきます( ´,_ゝ`)ｲ ﾋ
スポンサーリンク
もくじ
目標：スマホで表示したときにヘッダー最下部にモバイル広告を表示する
完成予定図
今回修正するファイル
- header.php
- style.css
Google Adsenseで広告を作成
Google Adsenseのスクリーンショットは設定画面もNGだったと思うのでテキストのみになります。
私はラージモバイルバナー（320*100）でテキスト広告＋ディスプレイ広告を選択しました。
コードが表示されるので、コピーしてテキストエディタにでも貼り付けておきましょう。
header.phpに広告コードを追加
追加する場所
追加する場所は</header>タグの直前です。<header>ではなく</header>なので注意して下さい。
</header>タグはおそらく最終行にあるはずです。
スマホで閲覧時のみ表示
|
1 2 3 |
<?php if(is_mobile()): ?> ここに貼り付けたコードがスマホでのみ表示されるようになります。 <?php endif; ?> |
is_mobile()関数を使用します。
<?php if(is_mobile()): ?>～<?php endif; ?>で囲んだ部分がスマホのみ表示されるようになります。
微調整のための<div>タグを追加
|
1 2 3 |
<div id="header_ad_mobile"> 広告コード </div> |
広告コードを直接書くと、wrapperのpaddingで右に10pxずれて表示されます。（CSS的には、ずれているのが正常です）
モバイルバナーは320pxのため、右に10pxずれると右端が330pxとなり、表示領域をはみ出します。
それを調整するために微調整用の<div>タグを用意します。
ID名は何でも自由ですが、IDは同一ページ内で1回しか使用できません。モバイルバナーを複数表示したいならClassにした方がいいかもしれません。
広告コードの貼り付け
|
1 2 3 4 5 6 7 8 9 |
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 広告名 --> <ins class="adsbygoogle" style="display:inline-block;width:320px;height:100px" data-ad-client="ca-pub-****************" data-ad-slot="**********"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> |
広告コードは人によって異なります。必ずご自身のコードを貼り付けてください。
上記コードはサンプルなので、このままコピペしても動きません。
最終的なコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php if(is_mobile()): ?> <div id="header_ad_mobile"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 広告名 --> <ins class="adsbygoogle" style="display:inline-block;width:320px;height:100px" data-ad-client="ca-pub-****************" data-ad-slot="**********"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <?php endif; ?> |
上記の通りに貼っていくとこんな感じになります。
これも広告コードの部分をサンプルにしているので、このままでは動きません。
必ずご自身のコードをコピペしてください。
style.cssの編集
ここまでで広告は表示されますが、例の横揺れ問題が発生しているはずです。
これが横揺れ問題の原因です。
そこで、先ほど<div>で囲んだ部分をネガティブマージンで左に動かします。
|
1 2 3 |
#header_ad_mobile { margin-left: -10px; } |
記載場所は特にどこでも問題ありません。
「＠media only screen～～」などで囲まなくても、phpの方で端末を判断しているので問題ないはずです。
まとめ
これでiPhone5Sでは意図した状態で表示されています。
ただし、iPhone5Sを横持ちすると、広告は左寄せになっています。それも気に食わない！o(｀ω´*)oって方は適当にCSSをいじってみたらいいんじゃないかな( ´,_ゝ`)ｲ ﾋ
あと、私iPhone6持ってないんで、6だとどうなるかよくわかりません。また、Android端末もないので確認していません。
IT系ブロガーを名乗っておいてどうなの？って気もしますが、個人のブログだしいいかなーって。
妥協よくない！って方はご自身で検証しちゃってください。結果教えてくれると喜びます(*´艸｀)ｳﾌﾌ
以上、あめたま（@ametama_l2l）でしたヾ(ﾟωﾟ)ﾉ゛